了解如何优化短信动态密码表单并改善用户体验。
要求用户提供通过短信发送的动态密码(动态密码)是一种常见的做法 确认用户电话号码的方式。以下是短信动态密码的几个用例:
- 双重身份验证。除了用户名和密码之外,您还可以使用短信动态密码 可明确表明相应账号归收到 通过短信发送的动态密码。
- 电话号码验证。有些服务会将电话号码用作用户的 主要标识符。在此类服务中,用户可以输入自己的电话号码和 通过短信接收的动态密码来证明其身份。有时需要与 PIN 码组合使用 构成双重身份验证。
- 账号恢复。如果用户失去对其账号的访问权限,则需要: 进行恢复。向其注册的电子邮件地址发送电子邮件,或 向手机号码发送短信是常用的账号恢复方法。
- 付款确认 在付款系统中,某些银行或信用卡 出于安全考虑,发卡机构请求付款人进行额外的身份验证。 短信动态密码通常用于此目的。
此博文介绍了针对上述用途构建短信动态密码表单的最佳做法 案例
核对清单
要通过短信动态密码提供最佳用户体验,请按以下步骤操作:
- 将
<input>
元素与以下内容搭配使用: <ph type="x-smartling-placeholder">- </ph>
type="text"
inputmode="numeric"
autocomplete="one-time-code"
- 使用
@BOUND_DOMAIN #OTP_CODE
作为动态密码短信的最后一行。 - 使用 WebOTP API。
使用 <input>
元素
使用包含 <input>
元素的表单是您应执行的
因为它适用于所有浏览器。即使其他建议来自
此帖子在某些浏览器中不可用,用户仍可输入并提交动态密码
。
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
下面几个技巧可确保输入字段充分发挥 浏览器功能。
type="text"
由于动态密码通常为五位或六位数字,因此使用
输入字段的 type="number"
看似直观,因为它会更改
仅通过键盘输入数字。我们不建议您这样做,因为浏览器
为一个可数数字,而不是多个数字的序列,
这可能会导致意外行为使用 type="number"
会导致上下运行
显示在输入字段旁边的按钮;按这些按钮
递增或递减数字,并且可以移除前面的零。
请改用 type="text"
。此操作不会将手机键盘变成数字
但没关系,关于使用 inputmode="numeric"
的下一条提示
作业。
inputmode="numeric"
使用inputmode="numeric"
将手机键盘更改为纯数字键盘。
有些网站为动态密码输入字段使用 type="tel"
,因为它也
在以下情况下,将手机键盘仅显示为数字(包括 *
和 #
)
重点。这项黑客操作过去曾在inputmode="numeric"
没有得到广泛支持。自 Firefox 开始支持
inputmode="numeric"
,
也无需使用语义不正确的 type="tel"
黑客手段。
autocomplete="one-time-code"
autocomplete
属性可让开发者指定
必须提供自动补全帮助,并告知浏览器
字段中预期的信息类型。
使用 autocomplete="one-time-code"
,每当用户在
表单打开时,操作系统会启发式解析短信中的动态密码,
键盘会推荐动态密码供用户输入。它仅适用于 Safari 12 和
但我们强烈建议您使用它
在这些平台上改善短信动态密码体验的简单方法。
autocomplete="one-time-code"
可提升用户体验,但还有更多精彩
做法是确保短信符合源于来源的消息要求,
格式。
设置短信文字的格式
通过与 通过短信传送的与来源绑定的一次性验证码 规范
格式规则很简单:在短信末尾添加接收者域名
以 @
开头的动态密码,以 #
开头的动态密码。
例如:
Your OTP is 123456
@web-otp.glitch.me #123456
使用标准格式的动态密码信息可进行提取 更简便、更可靠的代码。将动态密码与 使用户更难向恶意网站提供代码。
使用这种格式有以下几项好处:
- 动态密码将与网域绑定。如果用户所在的网域不是 短信中指定的验证码,则系统不会显示动态密码建议。 这样也能降低钓鱼式攻击和潜在的账号盗用风险。
- 现在,浏览器无需依赖 神秘而易断的启发法。
当网站使用 autocomplete="one-time-code"
、iOS 14 或更高版本的 Safari 时
将按照上述规则建议动态密码。
这种短信格式对 Safari 以外的浏览器也有益。Chrome、Opera、
Android 上的 Vivaldi 也支持与来源绑定的一次性代码规则,
WebOTP API,但不是通过 autocomplete="one-time-code"
。
使用 WebOTP API
WebOTP API 可让您访问动态密码
。通过调用
navigator.credentials.get()
otp
类型 (OTPCredential
),其中 transport
包含 sms
,即网站
将等待符合来源绑定一次性验证码的短信
由用户提供并授予访问权限将动态密码传递到 JavaScript 后
网站可以在表单中使用它,也可以将其直接 POST 到服务器。
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
<ph type="x-smartling-placeholder">如需详细了解如何使用 WebOTP API,请参阅在网络上验证电话号码
。 或复制并粘贴以下代码段。(
请确保 <form>
元素的 action
和 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);
});
});
}
摄影:Jason Leung 不启动。