在桌面设备上使用 WebOTP API 验证电话号码

自 Chrome 93 起,网站可在桌面版 Chrome 中验证电话号码。

借助 WebOTP,用户只需点按一下,即可在移动网站上输入电话号码验证码,而无需切换应用。Chrome 93 也将此功能扩展到了桌面设备。请继续阅读以了解详情。

简介

短信动态密码(动态密码)通常用于验证电话号码,例如用于身份验证的第二个验证步骤,或用于在网络上验证付款。但是,从桌面设备切换到移动设备、打开短信应用、记住并在原始网站上输入动态密码的整个流程会更顺畅。这种做法很容易出错,并且容易受到钓鱼式攻击。

借助 WebOTP API,网站能够以程序化方式从短信中获取动态密码,并且用户只需点按一下即可自动填写表单,而无需切换应用。短信具有特定的格式并且与源站绑定,因此也可以降低钓鱼式攻击网站窃取动态密码的风险。

WebOTP API 的实际运用。

WebOTP 尚不支持的一种使用场景是针对来自远程桌面设备或笔记本电脑的电话号码验证请求,该 API 仅适用于具有电话功能的设备。该 API 现在支持监听在其他设备上收到的短信,以帮助用户在 Chrome 93 中在桌面设备上完成电话号码验证。

桌面设备上的 WebOTP API。

试试看

前提条件

演示

如需在桌面设备上亲自尝试这一无缝的电话号码验证流程,请按以下步骤操作:

  1. 在桌面设备上访问 https://web-otp-demo.glitch.me/。点击验证按钮。
  2. 将第二部手机屏幕上显示的确切短信发送到 Android 设备。
  3. 短信发送到 Android 设备后,系统会显示一个对话框,询问您是否要在桌面上验证电话号码。按提交批准。
  4. 在桌面设备上,系统应该会在输入字段中自动填充发送到 Android 设备的验证码。

WebOTP API 的工作原理

让我们来看看 WebOTP API 的工作原理:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
  if (otp.code) input.value = otp.code;
…

短信必须采用与源站绑定的一次性验证码格式

Your OTP is: 123456.

@web-otp-demo.glitch.me #123456

请注意,最后一行包含要绑定到的源站,后跟 @,后跟动态密码,且后跟 #

收到短信时,系统会弹出一个信息栏,提示用户验证其电话号码。用户点击 Verify 按钮后,浏览器会自动将动态密码转发到网站并解析 navigator.credentials.get()。然后,网站就可以提取动态密码并完成验证流程。

如需了解详情,请参阅使用 WebOTP API 在网页上验证电话号码

如何在桌面设备上使用 WebOTP API

通过短信进行电话号码验证的应用广泛,且不受平台限制。移动设备上的任何用例都应适用于桌面设备。

在桌面设备上使用 WebOTP API 与在移动设备上使用相同,因此网站可以跨平台部署相同的代码。

浏览器支持和互操作性

此功能由 Chrome 同步功能提供支持,因此目前仅适用于 Chrome。 不支持在 iOS 或 iPad OS 上的 Chrome 中接收和传输短信。

虽然 Chromium 以外的浏览器引擎不会实现 WebOTP API,但 Safari 与其 input[autocomplete="one-time-code"] 支持共用相同的短信格式。在 Safari 中,只要用户开启了 iMessage 自动同步功能,当 iOS 或 iPadOS 上的匹配来源收到包含来源绑定一次性代码格式的短信时,该消息就会被转发到 macOS。如果用户将焦点置于输入字段,Safari 会建议用户需要输入的动态密码。

反馈

您的反馈对于改进 WebOTP API 意义重大。欢迎试用并告诉我们您的想法。

照片由 Luis Villasmil 提供,拍摄于 Unsplash 用户