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

Giờ đây, WebOTP API có thể nhận OTP từ bên trong iframe.

Eiji Kitamura
Yi Gu
OTP (mật khẩu một lần) qua SMS 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 giao dịch 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 mã OTP theo cách thủ công sẽ dễ dẫn đến sai sót và gây khó khăn cho trải nghiệm người dùng.

WebOTP API cho phép các trang web lấy mật khẩu dùng một lần từ tin nhắn SMS theo cách có lập trình và tự động nhập mật khẩu đó 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. SMS được định dạng đặc biệt và liên kết với nguồn gốc, vì vậy, SMS cũng giảm thiểu khả năng 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 dùng để xác nhận thanh toán, đặc biệt là với 3D Secure. Nhờ có định dạng chung để hỗ trợ iframe nhiều nguồn gốc, WebOTP API hiện cung cấp 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 WebOTP API

Bản thân WebOTP API khá đơ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ã sử dụng một lần liên kết với nguồn.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Lưu ý rằng ở dòng cuối cùng, dòng này chứa nguồn gốc sẽ được liên kết với @, theo sau là OTP với #.

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 OTP đến trang web và phân giải navigator.credentials.get(). Sau đó, trang web có thể trích xuất mã OTP và hoàn tất quy trình xác minh.

Tìm hiểu những điều cơ bản về cách sử dụng WebOTP tại phần Xác minh số điện thoại trên web bằng WebOTP API.

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

Việc nhập OTP vào biểu mẫu trong iframe nhiều nguồn gốc là điều thường thấy 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ự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. Đây là phương thức 3D Secure và biểu mẫu này thường xuất hiện trong một iframe trên cùng trang như thể đó là một phần của quy trình thanh toán.

Ví dụ:

  • 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 người dùng 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 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 mã này nhằm xác minh danh tính của mình.

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

Để sử dụng WebOTP API trong một iframe nhiều nguồn, bạn cần làm 2 việc:

  • Chú thích cả nguồn gốc khung 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 trên nhiều nguồn gốc nhận OTP trực tiếp từ người dùng.
WebOTP API đang hoạt động trong một iframe.

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

Chú thích các nguồn gốc liên kết vào tin nhắn văn bản SMS

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

@shop.example #123456 @bank.exmple

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

Để sử dụng WebOTP trong iframe 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 để tránh hành vi không mong muốn. Nói chung, có hai cách để đạt được mục tiêu này:

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

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

Chú ý

Cấp độ lồng ghép

Hiện tại, Chrome chỉ hỗ trợ các lệnh gọi WebOTP API từ iframe nhiều nguồn gốc có không quá một nguồn gốc duy nhất trong chuỗi tổ tiên của 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

việc sử dụng WebOTP trong b.com được hỗ trợ nhưng không được hỗ trợ 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à UX phức tạp.

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

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 WebOTP API, nhưng Safari dùng chung định dạng SMS với chế độ hỗ trợ input[autocomplete="one-time-code"]. Trong Safari, ngay khi một SMS chứa định dạng mã một lần liên kết với nguồn gốc đến cùng với nguồn gốc trùng khớp, bàn phím sẽ đề xuất nhập OTP vào trường nhập.

Kể từ tháng 4 năm 2021, Safari hỗ trợ iframe có định dạng SMS riêng biệ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à quyết định sử dụng @, 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 rất có giá trị trong việc cải thiện WebOTP API. Vì vậy, hãy 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