HTML属性可改善用户的双因素身份验证体验

登录时，用户体验中很容易出现摩擦，尤其是在输入双因素身份验证码时。作为开发者，我们构建的应用程序应该既能满足账户安全的需求，又不损害用户体验。有时，这些需求可能会感觉像是在互相冲突。

在这篇文章中，我们将研究<input>有助于加快用户双因素身份验证体验的简单元素和 HTML 属性。

默认体验

当你为 Web 应用程序实现双因素身份验证时（例如使用Authy 双因素身份验证 API），你需要一个表单，让用户输入你将要发送的一次性密码。你可以创建类似于以下 HTML 的代码：

<form action="/sessions/check-2fa" method="POST">
  <div>
    <label for="token">Please enter the code you were sent:</label>
    <input type="text" name="token" id="token" />
  </div>
  <button type="submit">Check token</button>
</form>

这已经是一次不错的体验了。<input>有一个名称和一个唯一的 ID，并且<label>使用了正确的for属性来显式地与其关联，这对于可访问性至关重要。您也可以将 包裹起来<label>以<input>获得相同的效果。使用一些 CSS，它可能看起来像这样：

然而，我们只需添加一些属性就可以逐步增强这种体验。

选择合适的键盘

在移动设备或带有屏幕键盘的设备上，首先要注意的是，我们呈现的是完整的字母键盘。一次性密码由数字字符组成，因此最好为用户提供数字键盘。

您可能会认为将“文本”切换type为<input>“数字”是解决方案：

    <input type="number" name="token" id="token" />

但你错了。这确实会在 iOS 上触发不同的键盘，但仍然包含一些无用的按键。

更改字段类型会改变浏览器对该字段的解析方式。这也可能导致错误；例如，如果双因素身份验证代码以零开头，则数字字段可能会删除该前导零。

输入模式

该inputmode属性会更改浏览器应显示的键盘，而不会改变字段收集的数据的含义。我们希望它<input>接收文本输入，但使用数字键盘。因此，请添加inputmode="numeric"

    <input type="text" name="token" id="token" inputmode="numeric" />

inputmode还有许多其他值，包括表示电话号码的“tel”，以及“email”、“decimal”、“url”、“search”和“none”（如果您想要渲染自己的键盘）。CSS Tricks 上的这篇文章详细介绍了不同的inputmodes。

如今，浏览器对移动操作系统的支持inputmode已经很好了，但几年前它还很冷门。对于老款浏览器，还有另一个技巧可以免费触发数字键盘并添加一些额外的验证。

图案

该属性允许您使用正则表达式pattern验证内容。使用该模式会告诉浏览器我们只接受字段中的数字，并且在不支持该模式的浏览器中也会触发数字键盘。<input>[0-9]*inputmode

我们的 HTML 现在看起来像这样：

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
/>

而键盘的数字输入就简单多了：

有一件事可以使这个表格更容易填写，那就是自动完成一次性密码。

HTML 自动完成

根据 MDN “自动完成功能让 Web 开发人员可以指定如果有任何权限 用户代理必须提供自动协助来填写表单字段值，并向浏览器提供有关该字段所需信息类型的指导。”

在 iOS 和 macOS 上的 Safari 中，我们可以利用此功能，让浏览器建议通过短信发送到设备的双因素身份验证码。添加autocomplete值为“one-time-code”的属性即可触发此行为。

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

至此，我们的<input>工作就完成了，用户的体验现在如下所示：

其他有用的自动完成值

自动填充值有很多，涵盖从姓名、地址到信用卡信息以及其他账户详情等所有内容。对于注册和登录，以下几个自动填充值非常有用：username、email、new-password、current-password。

浏览器和密码管理器有很好的启发式算法来查找网页上的登录表单，但使用username和值会使其变得非常明显。如果您要在不同的页面上构建包含用户名和密码的登录表单current-password，则绝对需要考虑使用这些属性。

在注册表单中，请确保使用“新密码”值，因为它会在某些浏览器中触发密码建议。

在其他浏览器中自动完成一次性密码

此自动完成功能目前仅存在于 iOS 和 macOS 上的 Safari 浏览器中，但 Chrome 团队正在研究类似的想法以简化此过程。目前，他们正在尝试一个命令式短信接收器 API，该 API以Android 的短信接收器 API为蓝本。这将允许开发者从短信中提取一次性密码，并且由于该密码是用 JavaScript 编写的，因此可以立即提交表单，从而节省用户更多时间。

在撰写本文时，此API 仍在试用中，您可以试用并反馈给 Chrome 团队。如果您感兴趣，请注册并试用该 API。

通过 HTML 获得更好的体验

在这篇文章中，我们看到，只需添加一些 HTML 属性，我们就可以改善用户的登录体验，尤其是在移动设备上。

元素<input>是我们接触到的最有趣的 HTML 元素之一。根据属性的不同，它可以是文本框、范围滑块、文件选择器、按钮等等。

如果您正在寻找更好的双因素身份验证体验，请查看Authy 推送身份验证，它可以完全省去复制代码的麻烦。

您还有其他提升用户登录体验的建议吗？欢迎在下方评论区留言，或者在 Twitter 上关注我@philnash。