Kể từ Chrome 93, các trang web có thể xác minh số điện thoại từ Chrome dành cho máy tính.
WebOTP giúp người dùng nhập mã xác minh số điện thoại trên trang web dành cho thiết bị di động chỉ bằng một lần nhấn mà không cần chuyển đổi giữa các ứng dụng. Chrome 93 cũng mở rộng chức năng này cho máy tính để bàn. Hãy đọc tiếp để tìm hiểu thêm.
Giới thiệu
OTP qua tin nhắn SMS (mật khẩu một lần) thường được dùng để xác minh số điện thoại, chẳng hạn như bước thứ hai trong quá trình xác thực hoặc để xác minh các khoản thanh toán trên web. Tuy nhiên, toàn bộ quy trình chuyển từ máy tính sang thiết bị di động, mở ứng dụng SMS, ghi nhớ và nhập OTP trên trang web ban đầu lại trên máy tính sẽ gây thêm phiền hà. Cách này rất dễ mắc sai lầm và rất dễ bị tấn công lừa đảo.
API WebOTP cho phép các trang web lấy mật khẩu một lần qua tin nhắn SMS theo phương thức lập trình và tự động điền vào biểu mẫu cho người dùng chỉ bằng một lần nhấn mà không cần chuyển đổi ứng dụng. Tin nhắn SMS có định dạng cụ thể và có ràng buộc với nguồn gốc, vì vậy, nó giúp giảm thiểu nguy cơ trang web lừa đảo đánh cắp OTP.
Một trường hợp sử dụng chưa được hỗ trợ trong WebOTP là nhắm đến các yêu cầu xác minh số điện thoại trên một thiết bị máy tính từ xa hoặc máy tính xách tay. API này chỉ hoạt động trên các thiết bị có tính năng điện thoại. API này hiện hỗ trợ nghe tin nhắn SMS nhận được trên các thiết bị khác để hỗ trợ người dùng hoàn tất quy trình xác minh số điện thoại trên máy tính trong Chrome 93.
Dùng thử
Điều kiện tiên quyết
- Máy tính để bàn hoặc máy tính xách tay (Windows, Mac, Linux hoặc ChromeOS).
- Điện thoại Android có Dịch vụ Google Play phiên bản 20.30.12 trở lên.
- Chrome 93 trở lên, cả trên máy tính để bàn hoặc máy tính xách tay và thiết bị di động. Chrome 93 Beta ra mắt từ cuối tháng 7 năm 2021.
- Bạn cần đăng nhập vào cùng một Tài khoản Google trên cả Chrome dành cho máy tính và Chrome dành cho thiết bị di động. Ví dụ: qua https://myaccount.google.com/ hoặc https://mail.google.com. Không cần bật tính năng đồng bộ hoá.
- Trên thiết bị Android, bạn cần đăng nhập vào Android thông qua phần "Cài đặt -> Google".
- Chrome 93 phải là trình duyệt mặc định trên thiết bị Android.
- Chrome 93 phải đang chạy ở chế độ nền trước hoặc nền trên thiết bị Android.
Bản minh hoạ
Để tự mình thử quy trình xác minh số điện thoại liền mạch này trên máy tính, hãy làm theo các bước sau:
- Truy cập vào https://web-otp-demo.glitch.me/ trên máy tính. Nhấp vào nút Xác minh.
- Gửi chính xác tin nhắn văn bản trên màn hình từ điện thoại thứ hai sang thiết bị Android.
- Khi tin nhắn SMS được gửi đến thiết bị Android, một hộp thoại sẽ xuất hiện hỏi xem bạn có muốn xác minh số điện thoại trên máy tính hay không. Nhấn vào Gửi để phê duyệt.
- Trên máy tính, mã xác minh gửi đến thiết bị Android sẽ được tự động điền vào trường nhập dữ liệu.
Cách hoạt động của API WebOTP
Hãy cùng xem cách hoạt động của API WebOTP:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
if (otp.code) input.value = otp.code;
…
Tin nhắn SMS phải được định dạng là mã một lần ràng buộc theo nguồn gốc.
Your OTP is: 123456.
@web-otp-demo.glitch.me #123456
Xin lưu ý rằng dòng cuối cùng chứa nguồn gốc được liên kết với @ theo sau là OTP đứng trước #.
Khi tin nhắn văn bản đến, một thanh thông tin sẽ bật lên và nhắc người dùng xác minh số điện thoại của họ. Sau khi người dùng nhấp vào nút Verify, trình duyệt sẽ tự động chuyển tiếp OTP đến trang web và giải quyết navigator.credentials.get(). Sau đó, trang web có thể trích xuất OTP và hoàn tất quy trình xác minh.
Tìm hiểu thêm tại bài viết Xác minh số điện thoại trên web bằng API WebOTP.
Cách sử dụng API WebOTP trên máy tính
Tính năng xác minh số điện thoại qua SMS được sử dụng rộng rãi và không phụ thuộc vào nền tảng. Mọi trường hợp sử dụng trên thiết bị di động đều nên áp dụng cho máy tính.
Việc sử dụng API WebOTP trên máy tính cũng giống như trên thiết bị di động, vì vậy, các trang web có thể triển khai cùng một mã trên các nền tảng.
Khả năng hỗ trợ và khả năng tương tác của trình duyệt
Tính năng này được Chrome Sync hỗ trợ nên hiện chỉ hoạt động với Chrome. Không hỗ trợ nhận và truyền SMS trên hệ điều hành iOS hoặc iPad trong Chrome.
Mặc dù các công cụ trình duyệt khác ngoài Chromium không triển khai API WebOTP, nhưng Safari chia sẻ định dạng SMS với sự hỗ trợ input[autocomplete="one-time-code"]. Trong Safari, miễn là người dùng bật tính năng tự động đồng bộ hoá iMessage, thì khi một tin nhắn SMS chứa định dạng mã một lần liên kết với nguồn gốc xuất hiện có nguồn gốc trùng khớp trên iOS hoặc iPadOS, thì tin nhắn sẽ được chuyển tiếp đến macOS. Nếu người dùng tập trung vào trường nhập dữ liệu, thì Safari sẽ đề xuất OTP để người dùng nhập.
Ý kiến phản hồi
Ý kiến phản hồi của bạn sẽ giúp chúng tôi cải thiện API WebOTP. Hãy dùng thử và cho chúng tôi biết suy nghĩ của bạn.
Ảnh của Luis Villasmil trên Unsplash