Kể từ Chrome 93, các trang web có thể xác minh số điện thoại trên 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 trong 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 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
Mã OTP qua SMS (mật khẩu một lần) thường được dùng để xác minh số điện thoại, cho ví dụ như bước thứ hai trong quy trình xác thực hoặc để xác minh 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ở tin nhắn SMS ghi nhớ và nhập OTP trên trang web ban đầu trên máy tính sẽ tăng thêm phiền hà. Họ rất dễ mắc lỗi theo cách này và rất dễ bị tấn công giả mạo.
API WebOTP giúp các trang web có thể lấy mật khẩu một lần từ 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 liên kết với nguồn gốc nên sẽ giảm thiểu nguy cơ cá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 mục tiêu số điện thoại yêu cầu xác minh từ một thiết bị máy tính từ xa hoặc máy tính xách tay— API chỉ hoạt động trên các thiết bị có chức năng điện thoại. API ngay bây giờ hỗ trợ nghe các tin nhắn SMS nhận được trên các thiết bị khác để hỗ trợ người dùng trong hoàn tất quá 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ộ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 có 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ụ: thông qua https://myaccount.google.com/ hoặc https://mail.google.com. Bạn 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 "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 chạy ở chế độ nền trước hoặc nền sau trên Android thiết bị.
Bản minh hoạ
Để 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 để bàn. Nhấp vào nút Xác minh.
- Gửi đúng tin nhắn văn bản trên màn hình từ chiếc điện thoại thứ hai đến Thiết bị Android.
- Khi 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 muốn xác minh số điện thoại trên máy tính. Nhấn vào Submit (Gửi) để chấp thuận.
- Trên máy tính, mã xác minh được gửi đến thiết bị Android sẽ là tự động điền vào trường nhập dữ liệu.
Cách hoạt động của API WebOTP
Hãy 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 bằng mã một lần liên kết với máy chủ gốc.
Your OTP is: 123456.
@web-otp-demo.glitch.me #123456
Lưu ý rằng dòng cuối cùng chứa nguồn gốc phải được liên kết với @ theo sau
tiếp theo là OTP đứng sau #.
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 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
quá trình xác minh.
Tìm hiểu thêm trong 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
Phương thức 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 hình thức sử dụng ốp lưng trên thiết bị di động sẽ áp dụng cho thiết bị 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, để các trang web có thể triển khai cùng một mã trên nhiều nền tảng.
Khả năng tương tác và hỗ trợ trình duyệt
Tính năng này được Chrome Sync hỗ trợ nên hiện chỉ hoạt động trên Chrome. Tính năng nhận và truyền tin nhắn SMS trên iOS hoặc iPad OS trong Chrome không được hỗ trợ.
Mặc dù các công cụ trình duyệt không phải Chromium không triển khai API WebOTP,
Safari có cùng đị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 khi một tin nhắn SMS có chứa thông tin liên kết gốc
định dạng mã một lần xuất hiện cùng với nguồn gốc trùng khớp trên iOS hoặc iPadOS,
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, Safari
sẽ đề xuất OTP để người dùng nhập.
Phản hồi
Ý kiến phản hồi của bạn sẽ giúp chúng tôi rất nhiều trong việc cải thiện API WebOTP. Dùng thử và cho chúng tôi biết những gì bạn nghĩ.
Nhiếp ảnh gia: Luis Villasmil về Không hiển thị màn hình