Điền biểu mẫu OTP trong iframe nhiều nguồn gốc bằng API WebOTP

API WebOTP hiện có thể nhận OTP từ bên trong iframe.

Eiji Kitamura
Yi Gu
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, việc chuyển đổi giữa trình duyệt và ứng dụng SMS để sao chép và dán hoặc nhập OTP theo cách thủ công sẽ khiến bạn dễ mắc lỗi và gây phiền hà cho trải nghiệm người dùng.

API WebOTP cho phép các trang web dùng phương thức lập trình để lấy mật khẩu một lần từ tin nhắn SMS và tự động nhập mật khẩu đó dưới dạng 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 biệt và liên kết với nguồn gốc nên giảm thiểu cơ hội 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 đến một nguồn gốc bên trong iframe. Phương thức này thường dùng để xác nhận thanh toán, đặc biệt là với tính năng Bảo mật 3D. Nhờ có định dạng phổ biến để hỗ trợ iframe nhiều nguồn gốc, API WebOTP hiện phân phối các OOTP liên kết với các nguồn gốc lồng nhau kể từ Chrome 91.

Cách hoạt động của API WebOTP

Bản thân API WebOTP cũng đủ đơn giản:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
…

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.glitch.me #12345

Lưu ý ở dòng cuối cùng, tệp này 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ông tin cơ bản về cách sử dụng WebOTP qua bài viết Xác minh số điện thoại trên web bằng API WebOTP.

Các trường hợp sử dụng iframe trên nhiều nguồn gốc

Việc nhập OTP vào một biểu mẫu trong iframe trên nhiều nguồn gốc là trường hợp phổ biến trong các trường hợp thanh toán. Một số công ty phát hành thẻ tín dụng yêu cầu thêm một bước xác minh để kiểm tra tính xác thực của người thanh toán. Đây được gọi là Bảo mật 3D và biểu mẫu này thường hiển thị trong iframe trên cùng một trang như thể đây là một phần của quy trình thanh toán.

Ví dụ:

  • Một người dùng truy cập vào shop.example để mua một đôi giày bằng thẻ tín dụng.
  • Sau khi nhập số thẻ tín dụng, nhà cung cấp dịch vụ thanh toán tích hợp sẽ hiển thị một biểu mẫu từ bank.example trong iframe yêu cầu người dùng xác minh số điện thoại để thanh toán nhanh.
  • bank.example gửi một tin nhắn SMS chứa OTP cho người dùng để họ có thể nhập nhằm xác minh danh tính của mình.

Cách sử dụng API WebOTP từ iframe trên nhiều nguồn gốc

Để sử dụng API WebOTP từ bên trong một iframe trên nhiều nguồn gốc, bạn cần thực hiện 2 việc:

  • Chú thích cả nguồn gốc khung hình trên cùng và nguồn gốc iframe trong tin nhắn văn bản SMS.
  • Định cấu hình chính sách về quyền để cho phép iframe nhiều nguồn gốc nhận OTP trực tiếp từ người dùng.
API WebOTP trong một iframe đang hoạt động.

Bạn có thể tự mình thử bản minh hoạ tại https://web-otp-iframe-demo.stackblitz.io.

Chú thích các nguồn gốc ràng buộc vào tin nhắn văn bản SMS

Khi API WebOTP được gọi từ trong một iframe, tin nhắn văn bản SMS phải bao gồm nguồn gốc khung hình trên cùng có đứng sau @, theo sau là OTP theo sau #, sau đó là nguồn gốc khung nội tuyến đứng sau @.

@shop.example #123456 @bank.exmple

Định cấu hình chính sách về quyền

Để sử dụng WebOTP trong iframe trên nhiều nguồn gốc, trình nhúng phải cấp quyền truy cập vào API này thông qua chính sách về quyền otp-credentials nhằm tránh hành vi ngoài ý muốn. Nói chung có hai cách để đạt được mục tiêu này:

  • qua tiêu đề HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • qua thuộc tính allow của iframe:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Xem thêm ví dụ về cách chỉ định chính sách quyền .

Chú ý

Các cấp lồng

Hiện tại, Chrome chỉ hỗ trợ các lệnh gọi API WebOTP từ các iframe nhiều nguồn gốc có không có nhiều nguồn gốc duy nhất trong chuỗi đối tượng cấp trên. Trong các trường hợp sau:

  • a.com -> b.com
  • a.com -> b.com -> b.com
  • a.com -> a.com -> b.com
  • a.com -> b.com -> c.com

sử dụng WebOTP trong b.com nhưng không được hỗ trợ sử dụng WebOTP trong c.com.

Xin lưu ý rằng trường hợp sau đây cũng không được hỗ trợ do thiếu nhu cầu và tính phức tạp của trải nghiệm người dùng.

  • a.com -> b.com -> a.com (gọi API WebOTP)

Khả năng tương thích

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, ngay khi 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ùng với nguồn gốc đã khớp, bàn phím sẽ đề xuất nhập OTP vào trường nhập dữ liệu.

Kể từ tháng 4 năm 2021, Safari hỗ trợ iframe ở một định dạng SMS duy nhất bằng cách sử dụng %. Tuy nhiên, khi cuộc thảo luận về thông số kỹ thuật đã kết thúc với @, chúng tôi hy vọng việc triển khai định dạng SMS được hỗ trợ sẽ hội tụ.

Ý kiến phản hồi

Ý kiến phản hồi của bạn sẽ giúp cải thiện API WebOTP. Vì vậy, hãy tiếp tục dùng thử và cho chúng tôi biết suy nghĩ của bạn.

Tài nguyên

Ảnh của rupixen.com trên Unsplash