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

自 Chrome 93 起,网站可以通过桌面版 Chrome 验证电话号码。

顾易 (Yi Gu)
顾一
Eiji Kitamura
北村英二

借助 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。 不支持在 Chrome 中的 iOS 或 iPad 操作系统上接收和传输短信。

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

反馈

您的反馈对于改进 WebOTP API 至关重要。欢迎试用并告诉我们您的想法。

照片由 Luis Villasmil 提供,由 Unsplash 提供