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

从 Chrome 93 开始，网站可以通过桌面版 Chrome 验证电话号码。

Yi Gu
Eiji Kitamura

WebOTP 可帮助用户一键在移动网站上输入电话号码验证码，而无需在应用之间切换。Chrome 93 还将此功能扩展到了桌面设备。请阅读下文，了解详情。

简介

短信动态密码 (OTP) 通常用于验证电话号码，例如作为身份验证的第二步，或用于验证网站上的付款。不过，从桌面设备切换到移动设备、打开短信应用、记住 OTP 并在原始网站上重新输入 OTP 的整个流程会增加摩擦。这样很容易出错，并且容易受到钓鱼式攻击。

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

WebOTP API 在使用中。

WebOTP 尚不支持的一个用例是定位到来自远程桌面设备或笔记本电脑的电话号码验证请求，因为该 API 仅适用于具有电话功能的设备。该 API 现在支持监听其他设备上收到的短信，以协助用户在 Chrome 93 桌面版中完成电话号码验证。

桌面设备上的 WebOTP API。

试试看

前提条件

演示

如需亲自在桌面设备上试用这种流畅的电话号码验证流程，请按以下步骤操作：

  1. 在桌面设备上访问 https://web-otp-demo.glitch.me/。点击验证按钮。
  2. 将第二部手机屏幕上显示的确切短信发送到 Android 设备。
  3. 当短信传送到 Android 设备后，系统会显示一个对话框，询问您是否要在桌面设备上验证电话号码。按 Submit 以批准。
  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

请注意，最后一行包含要绑定的来源（前面带有 @），后跟 OTP（前面带有 #）。

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

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

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

通过短信验证电话号码是一种广泛使用的验证方式，不受平台限制。移动设备上的任何用例都应适用于桌面设备。

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

浏览器支持和互操作性

此功能由 Chrome 同步提供支持，因此目前仅适用于 Chrome。 不支持在 iOS 或 iPadOS 设备上通过 Chrome 接收和发送短信。

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

反馈

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

照片由 Luis Villasmil 拍摄，选自 Unsplash