vlambda博客
学习文章列表

前言

合适的场景，提供给用户合适的键盘。今日早读文章由@排骨翻译分享。

正文从这开始～～

在用户登录输入双重身份验证代码时，在用户体验方面存在很多冲突的可能。作为开发人员，在不能降低用户体验的前提下，应该构建支持帐户安全需求。但有时候感觉这些需求好像是一场相互之间的战争。

在这篇文章中，看看简单的 <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>具有name和唯一ID， <label>使用正确的for属性显式与其关联，这对可访问性很重要。为了达到同样的效果，你还可以将 <label>内嵌 <input>标签。使用一点 CSS时，这可能如下所示：

然而，我们可以通过增加几个属性来逐步增强这种体验。

获得正确的键盘

对于带屏幕键盘的手机或设备，首先需要注意的是，我们正在展示完整的虚拟键盘。一次性密码是由数字字符组成，因此最好给用户显示一个数字键盘。

你可能会认为，将 <input>的类型从"文本"切换到"数字"就可以解决：

 
   
   
 

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

但是你错了。这确实触发了iOS上的另一个键盘，但它仍然包含了一些无用的键。

改变字段的类型会改变浏览器解释该字段的方式，但也可能导致错误; 如果双重认证代码以0开头，数字字段可能会去掉前导的0。

输入模式

Inputmode属性改变了浏览器应该显示的键盘，而不改变字段的数据含义。我们希望从数字键盘输入。因此，改为添加输入模式“ numeric”

 
   
   
 

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

对支持inputmode的浏览器来说是很友好的，但是几年前还是一片空白。对于较老的浏览器，还有另外一个技巧可以触发数字键盘，并免费提供一些额外的验证。

模式

Pattern属性允许你使用正则表达式来验证 <input>的内容。使用模式[0-9]*告诉浏览器只接受字段中的数字，并在不支持输入模式的浏览器中触发数字键盘。

我们的 HTML 现在如下所示：

 
   
   
 

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

键盘是一个更简单的数字输入：

有一件事可以让填写的表格变得更加容易，那就是自动填写一次性密码。

HTML 自动完成

按照MDN的说法，允许Web开发人员在指定用户代理填写表单字段值时必须提供自动帮助的任何权限，以及浏览器关于该字段中预期信息类型的指导。

在iOS和macOS上的Safari浏览器中，可以利用这个优势，让浏览器提供双重认证代码，这些代码通过短信发送到设备上，属性值为“one-time-code”的autocomplete属性将触发此行为。

 
   
   
 

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

有了这个，我们的 <input>就完整了，现在用户体验如下所示：

其他有用的自动补全值

在网页上，对浏览器和密码管理器查找登录表单有很好的启发式作用，但是使用 usename和 current-password使它变得非常明显。如果你要在不同的页面上使用用户名和密码构建登录表单，那么你肯定需要考虑使用这些属性。

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

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

这种自动完成的行为目前只存在于iOS和macOS上的Safari中，但是Chrome团队正在研究类似的想法来简化这个过程。目前有一个模仿安卓的短信接收API的实验。这将允许开发者从短信中提取一次性密码，并且，因为它是JavaScript的，可以立即提交表单，为用户节省更多的时间。

在编写本API的时候，这个API是原始版本测试的一部分，它允许你测试并反馈给 Chrome 团队。如果您对此感兴趣，请注册并尝试 API。

通过 HTML 获得更好的体验

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

<input>元素是我们可以访问的最有趣的HTML元素之一。根据属性，它可以是文本字段、范围滑块、文件选择器、按钮等等。

如果您正在寻找更好的双重身份验证体验，那么请查看 Authy 推送身份验证，它完全减少了代码的复制。

为你推荐