Trang này được dịch bởi Cloud Translation API.

Xác minh số điện thoại trên máy tính bằng API WebOTP

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.

Yi Gu

Eiji Kitamura

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 sang máy tính. Hãy đọc tiếp để tìm hiểu thêm.

Giới thiệu

OTP qua 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ư làm bước thứ hai trong quy 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 đổi từ máy tính sang thiết bị di động, mở ứng dụng SMS, ghi nhớ và nhập mã OTP trên trang web ban đầu trở lại trên máy tính sẽ gây ra sự phiền toái. Cách này dễ mắc lỗi và dễ bị tấn công giả mạo.

WebOTP API 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 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. SMS có định dạng cụ thể và được liên kết với nguồn gốc, do đó, SMS cũng giúp giảm nguy cơ các trang web lừa đảo đánh cắp OTP.

WebOTP API đang hoạt động.

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 từ 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ó chức năng điện thoại. API hiện hỗ trợ việc theo dõi 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.

WebOTP API trên máy tính.

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 được phát hành 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 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 đang chạy ở nền trước hoặc nền sau trên thiết bị Android.

Bản minh hoạ

Để tự 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 đúng tin nhắn văn bản trên màn hình từ chiếc đ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 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 trong 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 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 nhau theo sau là @, theo sau 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 sẽ tự động chuyển tiếp mã OTP đến trang web và phân giải 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 WebOTP API.

Lưu ý quan trọng: Nếu bản minh hoạ không hoạt động, vui lòng kiểm tra những điều sau: 1. Kiểm tra kỹ để đảm bảo đáp ứng tất cả các điều kiện tiên quyết. 2. Nếu số điện thoại của người gửi có trong danh bạ của người nhận, thì SMS sẽ không kích hoạt hộp thoại WebOTP vì đó là thiết kế. Vui lòng thử dùng một số điện thoại khác. 3. Nếu sự cố vẫn tiếp diễn, hãy mở chrome://sync-internals trên Android Chrome nhận được tin nhắn SMS đó rồi nhấn vào Dừng đồng bộ hoá, sau đó nhấn vào Yêu cầu bắt đầu để bắt đầu lại quá trình đồng bộ hoá.

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 trường hợp sử dụng trên thiết bị di động đều phải áp dụng được 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, 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.

Hỗ trợ trình duyệt và khả năng tương tác

Tính năng này được cung cấp bởi tính năng Đồng bộ hoá Chrome nên hiện chỉ hoạt động trên Chrome. Chrome không hỗ trợ tính năng nhận và gửi tin nhắn SMS trên iOS hoặc iPadOS.

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 lại có cùng định dạng SMS với tính năng 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 chứa định dạng mã một lần liên kết với nguồn gốc đến với nguồn gốc đã so 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, 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 rất có giá trị trong việc cải thiện WebOTP API. Hãy dùng thử và cho chúng tôi biết cảm nhận của bạn.

Ảnh của Luis Villasmil trên Unsplash