SMS OTP表格最佳实践

要求用户提供通过SMS传递的OTP（一次密码）是一个公共道，以确认用户＆＃39; S电话号码。 SMS OTP有一些用例：

双因素身份验证。除了用户名和密码外，SMS OTP还可以被融合为该帐户由接收到OTP的人拥有的强信号。

电话号码验证。一些服务使用电话号码作为用户＆＃39;闪闪发光的标识符。在此类服务中，用户可以通过短信输入他们的电话号码和Theotp来证明他们的身份。有时它＆＃39;结合Pinto构成了双因素认证。

帐户恢复。当用户失去对其帐户的访问时，需要恢复它的方法。将电子邮件发送到他们的注册电子邮件地址ORAN SMS OTP到他们的电话号码是常见的帐户恢复方法。

付款系统中的付款确认，一些银行或信用卡窗手从付款人提供额外的身份验证以出于安全原因.SMS OTP通常用于此目的。

这篇文章解释了为上述USECASE构建SMS OTP表格的最佳实践。

警告：虽然这篇文章讨论了SMS OTP表格最佳实践，但请注意，SMS OTP ISNOT本身是最安全的认证方法，因为PhoneNumbers可以回收并有时被劫持。 otpitteelf的概念不是网络训练。

如果您正在寻找更好的安全性，请考虑使用WebAuthn。从谈话中了解更多信息。什么＆＃39;在注册和amp中的新增功能;登录＆＃34;在TheChrome Dev峰会2019年，并使用BioMetricsensor与＆＃34建立重新认证体验;构建您的第一个WebAuthn应用程序＆＃34; Codelab。

使用具有＆lt;输入＆gt的形式。元素是Mycan最重要的最重要的练习，因为它在所有浏览器中都有工作。即使此从Don＆＃39的其他建议在某些浏览器中工作，用户仍然能够进入并提交OTPManually。

以下是一些想法，以确保输入字段获得最佳播种器功能。

由于OTPS通常是五个或六位数字，因此使用Type =＆＃34;数字＆＃34;对于输入字段可能似乎直观，因为它仅将MobileKeyboard更改为数字。不推荐使用这是因为浏览器预期Aninput字段是可数号而不是多个数字的序列，这可能导致意外行为。使用type =＆＃34;数字＆＃34;导致向上和向下显示输入字段旁边;按下这些按钮内压力或递减数字，并可删除在先前的零中。

使用type =＆＃34;文本＆＃34;反而。这赢得了＆＃39; t oneworeOnly将移动键盘转换为，但这很好，因为使用inputmode =＆＃34的下一个提示;数字＆＃34; Doesthat工作。

一些网站使用类型=＆＃34;电话＆＃34;对于OTP输入字段，因为它将移动键盘Alsoturns仅为当截策时的数字（包括*和＃）。当InputMode =＆＃34;数字＆＃34; WANN＆＃39; T.＆＃39;否广泛支持这个黑客。由于Firefox开始支持InputMode =＆＃34;数字＆＃34;，有没有必要使用语义上不正确的类型=＆＃34;电话＆＃34;黑客。

Autocompleteattribute允许开发人员指定Browserhas提供自动完成帮助的权限，并通知浏览器关于该字段中所期望的信息的TheType。

使用autocomplete =＆＃34;一次性代码＆＃34;每当用户在AFORP打开时收到SMS消息时，操作系统将启发出来的SMS中的OTP，键盘将建议用户进入OTP。它只适用于iOS，iPados和MacOS上的Safari 12 andlater，但我们强烈建议使用它，因为它是改善在这些平台上的短信OTP体验的易行方式。

autocomplete =＆＃34;一次性代码＆＃34;通过确保SMS消息符合原始MessageFormat来提高用户体验，但是在那里提高了用户体验。

Patternspifize所输入的OTP必须匹配的格式。使用正则表达式指定匹配模式，例如，\ d {6}将OTP约束为六位数字符串。了解有关[使用JavaScript获取更复杂的实时验证的模式属性]（https://developers.google.com/web/fundamentals/design-and -/input/forms#use_javascript_for_more_complex_real -time_validation）

对于更多一般形式的最佳实践，萨姆杜顿＆＃39; S登录表格最佳实践是一个伟大的出轨。

通过与通过SMSspecification传递的原始绑定的一次性代码对齐，增强用户体验进入OTP的体验。

格式规则很简单：完成带有接收器的SMS消息，其中包含@和OTP前面的＃。

使用OTP消息的标准格式使得从中提取代码更容易且更可靠。关联OTP代码的Website使得欺骗用户更难为恶意站点提供代码。

该消息以（可选）的人类可读文本开头，该文本包含具有至少一个数字的四个Tothing字符字母数字字符串，留下URL和OTP的姓氏。

调用API的网站URL的域部分必须由@申请申请。

要了解有关Chrome特定规则的更多信息，请读取SMS消息部分的格式Webotp API POST。

OTP将绑定到域名。如果用户在SMS消息中指定的其他Thanthe中，则OTP建议赢得＆＃39; T出现。这也减轻了网络钓鱼攻击和潜在账户劫持的风险。

浏览器现在将能够可靠地提取OTP，而无需靠在蒙信和片状启发式中。

当网站使用autocomplete =＆＃34;一个时间代码＆＃34 ;,Authari，带iOS 14或后来的Safari建议在上述规则之后的OTP。

如果用户位于带有与iOS上相同的iCloud帐户设置相同的iCloud帐户设置的桌面上，则iOS设备上接收的OTP也将在桌面Safari上使用。

要了解有关ApplePlatforms可用性的其他优势和细微差别，请使用域中键读取增强SMS传递的代码安全性。

此SMS消息格式也会使除Safari以外的浏览器。 Android上的Chrome，Opera和Vivaldi还支持使用Webotp API的起源的一次性代码规则，但不是通过AutoComplete =＆＃34;一次性代码和＃34;

Webotp API提供对SMS消息中OTPreceive的访问。通过调用Navigator.CredentialS.get（）使用OTP类型（OTPCredential），其中传输包括短信，网站等待SMS，符合始终绑定的一次性代码，以表达和授予用户的访问。一旦OTP传递给JavaScript，网站就可以用形式使用它或将其直接发布到服务器。

了解如何详细使用Webotp API在WebTep API或复制并粘贴以下代码段的Webwith上的电话号码中。 （构造＆lt; form＆gt;元素具有正确设置的动作和方法属性。）

//特征检测（＆＃39; otpcredential＆＃39;窗口）{窗口。 addeventlistener（＆＃39; domcontentloaded＆＃39;，e =＆gt; {const input = document。queryselector（＆＃39;输入[autocomplete =＆＃34;一次性代码＆＃34;]＆＃39;）;如果（！输入）返回; //如果手动提交表单，请取消Webotp API。CONST ac = new（）; const form =输入。最近（＆＃39;形式＆＃39;）;如果（表格）{表格。addeventlistener（＆＃39;提交＆＃39; e =＆gt; {//取消webotp api。ac。abort（）;}）;} //调用webotp api navigator .credentials。get（{otp：{运输：[＆＃39; SMS＆＃39;]}，信号：AC .Signal}）。然后（OTP =＆gt; {输入.value = OTP .code; //在获得OTP时自动提交表单。如果（表格）表格。提交（）;}）。catch（err =＆gt; {console。log（err）;}）;}）; }