Các phương pháp hay nhất về biểu mẫu OTP qua tin nhắn SMS

Tìm hiểu cách tối ưu hoá biểu mẫu OTP qua tin nhắn SMS và cải thiện trải nghiệm người dùng.

Eiji Kitamura

Yêu cầu người dùng cung cấp OTP (mật khẩu một lần) được gửi qua SMS là một cách phổ biến để xác nhận số điện thoại của người dùng. Có một số trường hợp sử dụng đối với OTP qua tin nhắn SMS:

  • Xác thực hai yếu tố. Ngoài tên người dùng và mật khẩu, OTP qua tin nhắn SMS có thể được dùng như một tín hiệu mạnh mẽ cho thấy tài khoản thuộc quyền sở hữu của người đã nhận được OTP qua tin nhắn SMS.
  • Xác minh số điện thoại. Một số dịch vụ dùng số điện thoại làm giá trị nhận dạng chính của người dùng. Trong các dịch vụ đó, người dùng có thể nhập số điện thoại vàOTP nhận được qua SMS để chứng minh danh tính. Đôi khi, phương thức này được kết hợp với mã PIN để tạo thành phương thức xác thực hai yếu tố.
  • Khôi phục tài khoản. Khi người dùng mất quyền truy cập vào tài khoản của họ, cần có cách để khôi phục tài khoản đó. Gửi email đến địa chỉ email đã đăng ký hoặc SMS OTP đến số điện thoại của họ là những phương thức khôi phục tài khoản phổ biến.
  • Xác nhận thanh toán Trong hệ thống thanh toán, một số ngân hàng hoặc công ty phát hành thẻ tín dụng yêu cầu người thanh toán xác thực thêm vì lý do bảo mật. OTP qua tin nhắn SMS thường được dùng cho mục đích đó.

Bài đăng này giải thích các phương pháp hay nhất để tạo biểu mẫu OTP qua tin nhắn SMS cho các trường hợp sử dụng nêu trên.

Danh sách kiểm tra

Để mang lại trải nghiệm tốt nhất cho người dùng với OTP qua tin nhắn SMS, hãy làm theo các bước sau:

  • Sử dụng phần tử <input> với:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • Sử dụng @BOUND_DOMAIN #OTP_CODE làm dòng cuối cùng của tin nhắn SMS OTP.
  • Sử dụng API WebOTP.

Dùng phần tử <input>

Sử dụng biểu mẫu có phần tử <input> là phương pháp hay nhất quan trọng nhất mà bạn có thể làm theo vì biểu mẫu này hoạt động trên mọi trình duyệt. Ngay cả khi các đề xuất khác trong bài đăng này không hoạt động trên một số trình duyệt, người dùng vẫn có thể nhập và gửi OTP theo cách thủ công.

<form action="/verify-otp" method="POST">
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>
</form>

Sau đây là một vài ý tưởng nhằm đảm bảo trường nhập dữ liệu có thể khai thác tối đa chức năng của trình duyệt.

type="text"

Vì OTP thường là các số có 5 hoặc 6 chữ số, nên việc sử dụng type="number" cho trường nhập dữ liệu có vẻ trực quan vì nó chỉ thay đổi bàn phím di động thành số. Bạn không nên làm như vậy vì trình duyệt dự kiến trường đầu vào là một số có thể đếm được thay vì một chuỗi gồm nhiều số. Điều này có thể gây ra hành vi không mong muốn. Việc sử dụng type="number" sẽ khiến các nút mũi tên lên và xuống sẽ hiển thị bên cạnh trường nhập dữ liệu; thao tác nhấn các nút này sẽ làm tăng hoặc giảm số lượng và có thể xoá các số 0 trước đó.

Thay vào đó, hãy sử dụng type="text". Thao tác này sẽ không chỉ chuyển bàn phím di động thành số, nhưng điều này không có vấn đề gì vì mẹo tiếp theo để sử dụng inputmode="numeric" sẽ giúp bạn thực hiện việc đó.

inputmode="numeric"

Sử dụng inputmode="numeric" để thay đổi bàn phím di động thành chỉ số.

Một số trang web sử dụng type="tel" cho các trường nhập OTP vì tính năng này cũng chỉ chuyển bàn phím di động thành số (bao gồm cả * và #) khi có tiêu điểm. Kiểu tấn công này được sử dụng trước đây khi inputmode="numeric" chưa được hỗ trợ rộng rãi. Vì Firefox bắt đầu hỗ trợ inputmode="numeric", nên bạn không cần phải sử dụng kiểu tấn công type="tel" không chính xác về mặt ngữ nghĩa.

autocomplete="one-time-code"

Thuộc tính autocomplete cho phép nhà phát triển chỉ định quyền mà trình duyệt có để hỗ trợ tính năng tự động hoàn thành và thông báo cho trình duyệt về loại thông tin dự kiến có trong trường.

Với autocomplete="one-time-code" bất cứ khi nào người dùng nhận được tin nhắn SMS trong khi biểu mẫu đang mở, hệ điều hành sẽ phân tích cú pháp OTP trong SMS theo cách phỏng đoán và bàn phím sẽ đề xuất OTP để người dùng nhập. Tính năng này chỉ hoạt động trên Safari 12 trở lên trên iOS, iPadOS và macOS. Tuy nhiên, bạn nên sử dụng công cụ này vì đây là cách dễ dàng để cải thiện trải nghiệm SMS OTP trên các nền tảng đó.

"autocomplete="one-time-code"" trong thực tế.

autocomplete="one-time-code" cải thiện trải nghiệm người dùng, nhưng bạn còn có thể làm nhiều việc hơn nữa bằng cách đảm bảo rằng tin nhắn SMS tuân thủ định dạng tin nhắn liên kết gốc.

Định dạng văn bản SMS

Cải thiện trải nghiệm người dùng khi nhập OTP bằng cách điều chỉnh cho phù hợp với quy cách mã một lần liên kết với nguồn gốc được gửi qua SMS.

Quy tắc định dạng rất đơn giản: Hãy hoàn tất tin nhắn SMS bằng miền của người nhận đứng trước @ và OTP đứng trước #.

Ví dụ:

Your OTP is 123456

@web-otp.glitch.me #123456

Việc sử dụng định dạng chuẩn cho các thông báo OTP giúp việc trích xuất mã từ các thông báo này trở nên dễ dàng và đáng tin cậy hơn. Việc liên kết mã OTP với trang web sẽ khiến người dùng khó lừa người dùng cung cấp mã cho các trang web độc hại hơn.

Việc sử dụng định dạng này sẽ mang lại một số lợi ích:

  • Mã OTP sẽ được liên kết với miền. Nếu người dùng đang sử dụng các miền không phải là miền được chỉ định trong tin nhắn SMS, thì nội dung đề xuất OTP sẽ không xuất hiện. Việc này cũng giúp giảm thiểu nguy cơ bị tấn công lừa đảo và chiếm đoạt tài khoản tiềm ẩn.
  • Giờ đây, trình duyệt có thể trích xuất OTP một cách đáng tin cậy mà không cần phụ thuộc vào các thông tin phỏng đoán bí ẩn.

Khi một trang web sử dụng autocomplete="one-time-code", Safari chạy iOS 14 trở lên sẽ đề xuất OTP theo các quy tắc trên.

Định dạng tin nhắn SMS này cũng mang lại lợi ích cho các trình duyệt khác ngoài Safari. Chrome, Opera và Vivaldi trên Android cũng hỗ trợ quy tắc mã một lần ràng buộc nguồn gốc bằng API WebOTP, mặc dù không thông qua autocomplete="one-time-code".

Sử dụng API WebOTP

API WebOTP cung cấp quyền truy cập vào OTP nhận được trong tin nhắn SMS. Bằng cách gọi navigator.credentials.get() với loại otp (OTPCredential) trong đó transport bao gồm sms, trang web sẽ đợi một tin nhắn SMS tuân thủ mã một lần ràng buộc nguồn gốc để được gửi và người dùng cấp quyền truy cập. Sau khi OTP được chuyển vào JavaScript, trang web có thể sử dụng OTP dưới dạng hoặc POST trực tiếp lên máy chủ.

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
API WebOTP trong thực tế.

Tìm hiểu chi tiết cách sử dụng API WebOTP trong bài viết Xác minh số điện thoại trên web bằng API WebOTP hoặc sao chép và dán đoạn mã sau. (Hãy đảm bảo phần tử <form> đã đặt thuộc tính action và method đúng cách.)

// Feature detection
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    // Cancel the WebOTP API if the form is submitted manually.
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        // Cancel the WebOTP API.
        ac.abort();
      });
    }
    // Invoke the WebOTP API
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      // Automatically submit the form when an OTP is obtained.
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Ảnh của Jason Leung trên Unsplash.