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

Eiji Kitamura

Thông thường, bạn sẽ yêu cầu người dùng cung cấp mật khẩu một lần (OTP) để xác nhận danh tính của họ bằng cách gửi tin nhắn SMS. Một số trường hợp sử dụng OTP qua SMS bao gồm:

  • Xác thực hai yếu tố. Ngoài tên người dùng và mật khẩu, bạn có thể dùng OTP qua SMS làm tín hiệu mạnh cho thấy tài khoản thuộc sở hữu của người nhận OTP qua SMS.
  • Xác minh số điện thoại. Một số dịch vụ sử 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ụ như vậy, 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 của họ. Đôi khi, mã 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ó một cách để khôi phục tài khoản đó. Gửi email đến địa chỉ email đã đăng ký hoặc gửi OTP qua SMS đế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 tổ chức 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. Mã OTP qua SMS thường được dùng cho mục đích đó.

Hãy tiếp tục đọc để biết các phương pháp hay nhất về cách tạo biểu mẫu OTP qua SMS cho những trường hợp sử dụng này.

Danh sách kiểm tra

Để mang lại trải nghiệm tốt nhất cho người dùng khi sử dụng OTP qua 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 WebOTP API.

Sử 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ì phương pháp 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 số ý tưởng để đảm bảo trường nhập dữ liệu khai thác tối đa chức năng của trình duyệt.

type="text"

Vì OTP thường là 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ì thao tác này sẽ thay đổi bàn phím di động thành chỉ số. Bạn không nên làm như vậy vì trình duyệt yêu cầu trường nhập dữ liệu phải là một số đế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 lên và xuống xuất hiện bên cạnh trường nhập dữ liệu; khi nhấn vào các nút này, số sẽ tăng hoặc giảm và có thể xoá các số 0 đứng trước.

Thay vào đó, hãy sử dụng type="text". Thao tác này sẽ không chuyển bàn phím di động thành chỉ có số, nhưng không sao vì mẹo tiếp theo về cách sử dụng inputmode="numeric" sẽ làm 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 dữ liệu OTP vì thuộc tính này cũng chuyển bàn phím di động thành chỉ số (bao gồm cả * và #) khi được lấy tiêu điểm. Thủ thuật 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 sử dụng thủ thuật 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ó để cung cấp tính năng hỗ trợ 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 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 phương pháp phỏng đoán và bàn phím sẽ đề xuất OTP để người dùng nhập. API này chỉ hoạt động trên Safari 12 trở lên trên iOS, iPadOS và macOS, nhưng bạn nên sử dụng API này vì đây là cách tốt hơn để cải thiện trải nghiệm OTP qua SMS trên các nền tảng đó.

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

autocomplete="one-time-code" giúp cải thiện trải nghiệm người dùng, nhưng bạn có thể làm nhiều hơn thế bằng cách đảm bảo rằng tin nhắn SMS tuân thủ định dạng tin nhắn ràng buộc nguồn gốc.

Thuộc tính không bắt buộc

Các thuộc tính không bắt buộc bao gồm:

Hãy đọc các phương pháp hay nhất về biểu mẫu đăng nhập để biết thêm lời khuyên.

Đị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 thông số kỹ thuật của mã một lần liên kết với nguồn gốc được gửi qua SMS.

Về cơ bản, quy tắc định dạng như sau: Kết thúc tin nhắn SMS bằng miền của người nhận, trước đó là @ và OTP, trước đó là #.

Ví dụ:

Your OTP is 123456

@web-otp.example.com #123456

Định dạng chuẩn cho tin nhắn OTP giúp việc trích xuất 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 khiến việc lừa người dùng cung cấp mã cho các trang web độc hại trở nên khó khăn hơn.

Quy tắc định dạng chính xác

Các quy tắc chính xác là:

  • Tin nhắn bắt đầu bằng văn bản mà con người có thể đọc được (không bắt buộc), chứa một chuỗi chữ và số từ 4 đến 10 ký tự, trong đó có ít nhất một số, còn dòng cuối cùng dành cho URL và OTP.
  • Phần miền của URL của trang web đã gọi API phải có tiền tố @.
  • URL phải chứa #, theo sau là OTP. Số ký tự không được vượt quá 140.

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

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

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 sau.

Đị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 liên kết với nguồn gốc bằng WebOTP API, mặc dù không thông qua autocomplete="one-time-code".

Sử dụng WebOTP API

WebOTP API 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 liên kết với nguồn gốc được gửi và được người dùng cấp quyền truy cập. Sau khi OTP được chuyển đến JavaScript, trang web có thể sử dụng OTP đó trong biểu mẫu hoặc POST trực tiếp lên máy chủ.

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
WebOTP API đang hoạt động.

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

// 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);
    });
  });
}