Tìm hiểu cách tối ưu hoá biểu mẫu OTP qua SMS và cải thiện trải nghiệm người dùng.
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 mã xác thực một lần qua SMS:
- Xác thực hai yếu tố. Ngoài tên người dùng và mật khẩu, mã xác thực một lần qua SMS có thể được dùng làm tín hiệu mạnh mẽ cho thấy tài khoản thuộc sở hữu của người nhận mã xác thực một lần 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à mã xác thực một lần (OTP) nhận được qua SMS để chứng minh danh tính của họ. Đôi khi, mật khẩu được kết hợp với mã PIN để tạo thành quy trình 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ý của họ hoặc gửi mã xác thực một lần 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 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 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 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 mã xác thực một lần 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_CODElà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 và 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 tất cả trình duyệt. Ngay cả khi các đề xuất khác trong bài đăng này không hoạt động trong một số trình duyệt, người dùng vẫn có thể nhập và gửi mã 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ì mã 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 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 mong muốn trường nhập dữ liệu là một số có thể đếm được thay vì một chuỗi 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; việc nhấn các nút này sẽ làm tăng hoặc giảm số 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 chỉ biến bàn phím di động thành số, nhưng điều đó không sao vì mẹo tiếp theo về cách sử dụng inputmode="numeric" sẽ 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ì nó cũng chỉ chuyển bàn phím di động thành số (bao gồm cả * và #) khi được lấy tiêu điểm. Lỗ hổng này từng đượ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 cách hack 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ự độ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 một 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 thức 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, nhưng bạn nên sử dụng tính năng này vì đây là một cách dễ dàng để cải thiện trải nghiệm OTP qua SMS trên các nền tảng đó.
autocomplete="one-time-code" giúp 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 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 với nguồn 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 theo quy cách của mã một lần liên kết với nguồn gốc được phân phối qua SMS.
Quy tắc định dạng rất đơn giản: 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.glitch.me #123456
Việc sử dụng định dạng tiêu chuẩn cho tin nhắn OTP giúp việc trích xuất mã từ các tin nhắn đó trở nên dễ dàng và đáng tin cậy hơn. Việc liên kết mã OTP với các trang web sẽ 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.
Việc sử dụng định dạng này 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 ở 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 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 các 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 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 liên kết với 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
WebOTP API cung cấp quyền truy cập vào mã 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ẽ chờ 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à người dùng cấp quyền truy cập. Sau khi OTP được truyền đến JavaScript, trang web có thể sử dụng mã này trong một biểu mẫu hoặc POST trực tiếp mã này đến máy chủ.
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
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. (Đảm bảo phần tử <form> đã đặt đúng thuộc tính action và method.)
// 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 chụp của Jason Leung trên Unsplash.