无需登录 数据私有 本地保存

Web OTP API 验证演示 - 短信动态码自动填入

11
0
0
0

Web OTP API 验证演示

体验短信动态码自动填入 · 无需手动复制粘贴

检测中...
9:41
短信
1069-服务号
欢迎使用我们的服务!登录验证码将在您请求后发送到您的手机。
刚刚
1069-服务号
新消息 · 验证码
------
1 2 3

步骤 1:输入手机号并发送验证码

请输入有效的手机号码(11位数字)
等待验证码...
就绪
JavaScript 核心代码
// 1. 检测浏览器是否支持 Web OTP API
if ('OTPCredential' in window) {
  // 2. 创建 AbortController(建议60秒超时)
  const ac = new AbortController();
  const timeoutId = setTimeout(() => ac.abort(), 60000);

  // 3. 调用 API 监听短信
  navigator.credentials.get({
    otp: { transport: ['sms'] },
    signal: ac.signal
  }).then(otp => {
    clearTimeout(timeoutId);
    // 4. 自动填入验证码
    document.querySelector('#otp-input').value = otp.code;
  }).catch(err => {
    console.log('OTP 获取失败或已取消', err);
  });
}
SMS 格式要求 & 生成器

短信末尾必须包含 @域名 #验证码 格式,浏览器才能自动识别。域名需与网站域名匹配。

您的验证码是:123456
@example.com #123456

上方第二行(@域名 #验证码)是浏览器识别的关键,通常对用户不可见,由短信网关自动附加。

常见问题与知识点

什么是 Web OTP API?

Web OTP API 是 Credential Management API 的一部分,允许浏览器在用户收到 SMS 短信时自动读取其中的一次性验证码(OTP),并自动填入网页中的输入框,无需用户手动切换应用、复制粘贴。这大大提升了移动端的登录和验证体验。

短信必须包含什么格式?

短信末尾必须包含 @your-domain.com #验证码 的格式。例如:您的验证码是123456。@example.com #123456。其中 @ 后面是您的网站域名,# 后面是验证码。浏览器通过解析这一行来提取 OTP,并验证域名是否匹配。

哪些浏览器支持 Web OTP API?

目前主要支持 Android 版 Chrome(84+)、Android 版 Edge、以及部分基于 Chromium 的移动浏览器。桌面端浏览器通常不支持 SMS transport。iOS Safari 有类似的 autocomplete="one-time-code" 机制,但实现方式不同。

需要 HTTPS 吗?

是的,Web OTP API 必须在 HTTPS 环境下使用(localhost 除外)。这是因为该 API 涉及敏感的用户凭证信息,浏览器强制要求安全上下文。在生产环境中部署时,请确保您的网站已配置有效的 SSL 证书。

如何处理超时?

使用 AbortController 是推荐的做法。在调用 API 时传入 signal,并设置一个定时器(通常 60 秒)来自动取消监听。这样可以避免无限等待,同时释放资源。如果用户未收到短信,API 会在超时后优雅地失败。

Web OTP 与 SMS Retriever 有什么区别?

SMS Retriever API 是 Android 原生 API,需要在客户端集成 Google Play Services,且需要申请权限。Web OTP API 是浏览器层面的实现,无需额外权限,无需安装任何 SDK,纯 JavaScript 即可调用,更简单、更安全、跨平台兼容性更好。

域名匹配规则是什么?

SMS 中 @ 后面的域名需要与调用 API 的网页来源(origin)匹配。浏览器会验证这一对应关系,防止恶意网站读取其他网站发送的验证码。域名比较通常忽略 www 前缀,但子域名需要精确匹配。

可以在 PWA 中使用吗?

可以!Web OTP API 在 PWA(渐进式 Web 应用)中同样可用,并且体验更佳。许多现代 Web 应用结合 PWA + Web OTP API,为用户提供接近原生应用的验证码自动填入体验,无需离开应用即可完成验证。