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

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

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

API WebOTP cung cấp cho các trang web khả năng lập trình lấy mật khẩu một lần từ tin nhắn SMS và nhập mật khẩu đó tự động ở dạng 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 . Tin nhắn SMS được định dạng đặc biệt và liên kết với nguồn gốc để giảm thiểu cũng có nguy cơ bị 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. Thông tin này thường được sử dụng để xác nhận thanh toán, đặc biệt bằng Bảo mật 3D. Có điểm chung để hỗ trợ nhiều nguồn gốc iframe, API WebOTP hiện đang phân phối OTP được liên kết với các nguồn gốc lồng nhau bắt đầu từ Chrome 91.

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

Bản thân API WebOTP đã đủ đơn giản:

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

Tin nhắn SMS phải được định dạng một lần liên kết với máy chủ gốc mã.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Lưu ý rằng ở dòng cuối cùng, mã này chứa nguồn gốc phải được liên kết đứng trước bằng @ 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 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ông tin cơ bản về cách sử dụng WebOTP trong 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 thường thấy khi thanh toán trong trường hợp cụ thể. Một số tổ chức phát hành thẻ tín dụng yêu cầu bạn thực hiện 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. Tính năng này được gọi là Bảo mật 3D và có dạng thường được hiển thị trong iframe trên cùng một trang như thể đó là một phần của luồng 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ị 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 có chứa OTP tới người dùng để họ có thể hãy nhập mã đó để xác minh danh tính của họ.

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

Để sử dụng API WebOTP từ trong iframe trên nhiều nguồn gốc, bạn cần thực hiện hai những điều sau:

  • Chú thích cả gốc khung trên cùng và gốc iframe trong văn bản SMS .
  • Định cấu hình chính sách quyền để cho phép iframe trên nhiều nguồn gốc nhận OTP trực tiếp từ người dùng.
WebOTP API trong 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 nguồn gốc liên kết trong tin nhắn văn bản SMS

Khi API WebOTP được gọi từ bên trong 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 đứng trước @ và OTP đứng sau # theo sau là gốc iframe đứng trước @.

@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 thông qua chính sách về quyền thông tin xác thực otp để tránh tình trạng ngoài ý muốn hành vi. Nhìn 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 ví dụ khác về cách chỉ định một chính sách quyền

Chú ý

Các cấp độ lồng ghép

Hiện tại, Chrome chỉ hỗ trợ các lệnh gọi API WebOTP từ các iframe trên nhiều nguồn gốc có không quá một nguồn gốc riêng biệt trong chuỗi đối tượng cấp trên. Trong 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 được hỗ trợ nhưng sử dụng WebOTP trong c.com thì không được hỗ trợ.

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

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

Khả năng tương tác

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, ngay khi Tin nhắn SMS chứa định dạng mã một lần liên kết theo nguồn gốc sẽ được gửi đến cùng với tin nhắn SMS máy chủ gốc, bàn phím đề 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 với một định dạng SMS duy nhất sử dụng %. Tuy nhiên, khi cuộc thảo luận về thông số kỹ thuật kết thúc sẽ đi 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ụ.

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. Vì vậy, hãy tiếp tục dùng thử và cho chúng tôi biết những gì bạn nghĩ.

Tài nguyên

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