Tìm hiểu cách tối ưu hoá biểu mẫu SMS OTP 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à điều bình thường để 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 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 SMS có thể được sử dụng làm tín hiệu mạnh cho biết tài khoản thuộc sở hữu của người nhận Mã OTP qua tin nhắn 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 quyền truy cập của người dùng giá trị nhận dạng chính. Trong các dịch vụ đó, người dùng có thể nhập số điện thoại của họ và OTP nhận được qua tin nhắn 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 chế độ 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ọ, bạn cần tìm cách khôi phục nó. Gửi email đến địa chỉ email đã đăng ký của họ hoặc OTP qua tin nhắn SMS đến số điện thoại của họ là phương pháp khôi phục tài khoản phổ biến.
- Xác nhận khoản thanh toán Trong hệ thống thanh toán, một số ngân hàng hoặc thẻ tín dụng tổ chức phát hành thẻ 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 sử 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 mục đích sử dụng ở trên trường hợp.
Danh sách kiểm tra
Để cung cấp trải nghiệm người dùng tốt nhất với 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_CODElàm dòng cuối 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ì nó hoạt động trong tất cả các trình duyệt. Ngay cả khi các đề xuất khác từ
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 để đảm bảo trường nhập dữ liệu khai thác hiệu quả nhất chức năng của trình duyệt.
type="text"
Vì OTP thường là các số có năm hoặc sáu chữ số, nên sử dụng
type="number" cho trường nhập dữ liệu có vẻ trực quan vì trường này thay đổi thiết bị di động
chỉ bàn phím thành số. Điều này không được khuyến nghị vì trình duyệt dự kiến
trường nhập dữ liệu là một số có thể đếm được thay vì một chuỗi gồm nhiều số,
từ đó có thể gây ra hành vi không mong muốn. Sử dụng type="number" nguyên nhân gây tăng và giảm
các nút được hiển thị bên cạnh trường nhập dữ liệu; nhấn các nút này
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 biến bàn phím di động thành số
nhưng điều đó cũng không sao vì mẹo tiếp theo để sử dụng inputmode="numeric"
công việc đó.
inputmode="numeric"
Sử dụng inputmode="numeric"
để thay đổi bàn phím di động thành chỉ nhập số.
Một số trang web sử dụng type="tel" cho các trường nhập OTP vì mã này cũng
chuyển bàn phím di động sang chỉ số (bao gồm * và #) khi
tập trung. Kiểu tấn công này đã được sử dụng trong quá khứ khi inputmode="numeric"
chưa được hỗ trợ rộng rãi. Kể từ khi Firefox bắt đầu hỗ trợ
inputmode="numeric",
không cần phải sử dụng lệnh tấn công type="tel" không chính xác về mặt ngữ nghĩa.
autocomplete="one-time-code"
autocomplete
cho phép nhà phát triển chỉ định quyền mà trình duyệt
phải cung cấp hỗ trợ tự động hoàn thành và thông báo cho trình duyệt về
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 tin nhắn SMS suy đoán và
bàn phím sẽ đề xuất OTP để người dùng nhập. Công cụ này chỉ hoạt động trên Safari 12 và
trên iOS, iPadOS và macOS, nhưng bạn nên sử dụng trình duyệt này vì đây là
dễ dàng để cải thiện trải nghiệm sử dụng SMS OTP trên những nền tảng đó.
autocomplete="one-time-code" cải thiện trải nghiệm người dùng, nhưng còn nhiều tính năng khác
có thể làm bằng cách đảm bảo rằng tin nhắn SMS tuân thủ tin nhắn liên kết với máy chủ gốc
định dạng.
Định dạng văn bản SMS
Nâng cao 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 mã một lần liên kết với máy chủ gốc được gửi qua SMS đặc điểm kỹ thuật.
Quy tắc định dạng rất đơn giản: Hoàn tất tin nhắn SMS bằng miền của người nhận
đứng sau @ và OTP đứng sau #.
Ví dụ:
Your OTP is 123456
@web-otp.glitch.me #123456
Sử dụng định dạng tiêu chuẩn cho thông báo OTP giúp trích xuất mã dễ dàng và đáng tin cậy hơn. Liên kết mã OTP với các trang web làm cho 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 sau:
- OTP sẽ được liên kết với miền. Nếu người dùng đang ở trên các miền không phải là mã OTP được chỉ định trong tin nhắn SMS thì nội dung đề xuất về 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 giả mạo và có nguy cơ bị chiếm đoạt tài khoản.
- Trình duyệt giờ đây sẽ có thể trích xuất OTP một cách đáng tin cậy mà không phụ thuộc vào những suy đ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ông phả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 gốc với
API WebOTP, mặc dù không thông qua autocomplete="one-time-code".
Sử dụng API WebOTP
API WebOTP cấp quyền truy cập vào OTP
đã nhận được trong tin nhắn SMS. Bằng cách gọi điện
navigator.credentials.get()
thuộc 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 máy chủ gốc
do người dùng cung cấp và cấp quyền truy cập. Sau khi OTP được truyền đến JavaScript,
trang web có thể sử dụng đoạn mã 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);
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. (Nhãn hiệu
đảm bảo phần tử <form> có thuộc tính action và method được đặt đú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);
});
});
}
Nhiếp ảnh gia: Jason Leung trên Không hiển thị màn hình.