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

Web OTP API演示 - 自动读取短信验证码

17
0
0
0

Web OTP API 演示

自动读取短信验证码 · 无需手动输入

Android Chrome HTTPS Required
1 配置域名
短信中 @域名 必须与此域名匹配。留空则使用当前域名。
2 操作
3 状态与结果
就绪
检测中...
🎉 验证码已获取
------
点击"开始监听"后等待短信到达
短信模拟预览
Messages
等待短信...
短信格式要求
// 短信末尾必须包含:
@example.com #验证码

// 完整短信示例:
您的验证码是 884921
请勿泄露给他人
@example.com #884921
@域名与#验证码之间可用空格分隔，顺序可互换。
JavaScript 示例
const ac = new AbortController();
const signal = AbortSignal.timeout(60000);

try {
  const otp = await navigator.credentials.get({
    otp: { transport: ['sms'] },
    signal
  });
  if (otp?.code) {
    console.log('OTP:', otp.code);
    // 自动填充验证码
  }
}catch (err) {
  if (err.name === 'AbortError') {
    // 超时或用户取消
  }
}
事件日志
--:--:-- 工具已就绪，等待操作...
浏览器兼容性
浏览器 平台 支持状态 备注
Chrome Android ✓ 支持 v84+，需HTTPS
Chrome 桌面端 ✗ 不支持 桌面端无SMS接收能力
Safari iOS / macOS ✗ 不支持 iOS使用另一种机制
Firefox Android △ 有限支持 部分版本支持
Edge Android ✓ 支持 基于Chromium，v84+
正在检测浏览器兼容性...
常见问题 FAQ
Web OTP API（One-Time Password）是一项Web标准，允许网页在用户授权下自动从短信中读取一次性验证码。相比传统方式，它的优势包括：
• 无需手动输入：用户点击"允许"即可自动填充
• 无需剪切板权限：比读取剪切板更安全
• 无需额外权限：不依赖SMS读取权限
• 用户体验流畅：减少验证步骤，降低流失率
• 标准化：由W3C规范，Chrome、Edge等主流浏览器支持
短信末尾必须包含特殊格式标记：
• 格式：@您的域名 #验证码
• 域名必须与网页域名一致（支持子域名匹配）
• 示例：@example.com #884921
• @域名 和 #验证码 顺序可互换
• 两者之间可用空格分隔
• 短信前面可以包含任意文字内容
• 验证码通常为4-8位数字或字母
• Chrome Android 84+：完全支持 ✓
• Edge Android 84+：完全支持 ✓（基于Chromium）
• Chrome 桌面端：不支持 ✗（无SMS功能）
• Safari iOS/macOS：不支持 ✗（iOS有不同机制）
• Firefox Android：有限支持 △
• 其他浏览器：基本不支持
建议始终使用特性检测，在不支持的浏览器上提供手动输入回退方案。
使用您现有的短信服务商（如阿里云、腾讯云、Twilio等），在短信模板末尾添加格式标记：
您的验证码是：{code}，有效期5分钟。@yourdomain.com #{code}

注意事项：
• 确保@域名与网站域名匹配
• 验证码在短信中出现两次（正文+格式标记）
• 格式标记对用户可见但不影响阅读
• 测试时请使用真实手机接收短信
Web OTP APISMS Retriever
平台Web浏览器Android原生应用
格式@域名 #验证码<#>验证码<#>
权限用户点击允许自动读取
适用场景PWA、移动网页原生App
标准化W3C规范Google Play Services
两者是不同平台的解决方案，不可混用。
是的，必须使用HTTPS。
navigator.credentials.get() 是安全敏感的API，浏览器强制要求：
• 生产环境必须使用HTTPS
• 本地开发可使用 localhost（被视为安全上下文）
• 使用IP地址访问将被拒绝
• 这是为了防止中间人攻击和验证码劫持
iOS Safari 不支持 Web OTP API。
但iOS有自己的机制：
• Safari可在输入框设置 autocomplete="one-time-code"
• iOS会从短信中自动检测验证码并建议填充
• 系统键盘上方会显示验证码建议
• 无需特殊短信格式
最佳实践：同时使用两种方案，覆盖所有平台。
🔧 相关工具