Đ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 mã OTP từ trong iframe.

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

WebOTP API cho phép các trang web 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 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. Tin nhắn SMS được định dạng đặc biệt và liên kết với nguồn gốc, do đó, giảm thiểu khả năng các trang web giả mạ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 một iframe. Phương thức này thường được dùng để xác nhận thanh toán, đặc biệt là với 3D Secure. Với định dạng phổ biến để hỗ trợ các iframe trên nhiều nguồn gốc, WebOTP API hiện phân phối OTP 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 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ã 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 ý rằng ở dòng cuối cùng, mã này chứa nguồn gốc cần liên kết, trước đó là @, theo sau là OTP, trước đó là #.

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ông tin cơ bản về cách sử dụng WebOTP tại 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 nhiều nguồn gốc

Việc nhập mã OTP vào một biểu mẫu trong iframe nhiều nguồn gốc là 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. Phương thức này được gọi là 3D Secure và biểu mẫu thường hiển thị trong một iframe trên cùng một 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 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 một iframe yêu cầu người dùng xác minh số điện thoại của họ để thanh toán nhanh.
• bank.example gửi tin nhắn SMS chứa mã OTP cho người dùng để họ có thể nhập mã đó nhằm xác minh danh tính của mình.

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

Để sử dụng API WebOTP từ trong một iframe nhiều nguồn gốc, bạn cần làm hai 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 qua 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 trực tiếp OTP từ người dùng.

Bạn có thể tự 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 đến tin nhắn văn bản SMS

Khi WebOTP API đượ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 cấp cao nhất đứng trước @, theo sau là OTP đứng trước #, theo sau là nguồn 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 một 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 của thông tin xác thực otp để tránh hành vi ngoài ý 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ú ý

Mức lồng ghép

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 quá một nguồn gốc duy nhất trong chuỗi gốc. 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

Hỗ trợ sử dụng WebOTP trong b.com nhưng không hỗ trợ sử dụng 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à độ phức tạp về trải nghiệm người dùng.

• 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á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, ngay 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, 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 với định dạng SMS riêng biệt bằng cách sử dụng %. Tuy nhiên, do cuộc thảo luận về thông số kỹ thuật đã kết luận là sử dụng @, nên 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 API WebOTP. Vì vậy, hãy dùng thử API này và cho chúng tôi biết suy nghĩ của bạn.

Tài nguyên

• Xác minh số điện thoại trên web bằng API OTP trên web
• Các phương pháp hay nhất về biểu mẫu OTP qua tin nhắn SMS
• WebOTP API
• Mã một lần liên kết với nguồn gốc được phân phối qua SMS

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