Android浏览器如何实现类Gmail的一键自动填充短信验证码(OTP)功能

常见误区澄清 #

• SMS Retriever API是原生安卓应用专属接口，Web场景无需适配
• SMS User Consent API已被WebOTP API完全替代，不需要单独做兼容开发

可行落地实现方案 #

1. 前端适配 #

• 验证码输入框保留autocomplete="one-time-code"属性，新增autocomplete="webotp"做双属性兼容，输入框的id、name字段建议设置为otp、verification_code这类通用标识，降低浏览器识别门槛
• 页面加入WebOTP API调用逻辑，示例代码如下：

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', () => {
    const otpInput = document.querySelector('input[autocomplete~="one-time-code"]');
    if (!otpInput) return;
    const abortController = new AbortController();
    const bindForm = otpInput.closest('form');
    // 表单提交时中断OTP监听
    if (bindForm) {
      bindForm.addEventListener('submit', () => abortController.abort());
    }
    // 监听OTP短信
    navigator.credentials.get({
      otp: { transport: ['sms'] },
      signal: abortController.signal
    }).then(credential => {
      otpInput.value = credential.code;
      // 自动提交表单，不需要用户点击
      if (bindForm) bindForm.submit();
    }).catch(() => {
      // 监听失败自动降级为手动输入，无需额外处理
    });
  });
}

2. 短信内容规则调整 #

你观测到Gmail无需哈希、站点标识也能触发自动填充，是因为安卓Chrome 108+版本新增了简化匹配规则，满足以下条件即可跳过站点标识要求：

• 短信内容包含明确的「验证码」「OTP」「校验码」「code」关键词，且包含连续4-8位的纯数字验证码
• 短信发送方的签名/短号已纳入谷歌可信发送方白名单，国内正规短信服务商的商用签名基本都已在白名单范围内，无需额外申请

如果你的短信发送方暂时不在白名单，只需在短信末尾追加@你的站点域名 #验证码即可兼容所有支持WebOTP的浏览器版本，示例格式：

您的登录验证码是123456，5分钟内有效 @yourdomain.com #123456

3. 权限逻辑优化 #

• 安卓主流浏览器首次调用WebOTP时会自动弹出短信读取授权弹窗，用户同意后后续同类短信会直接自动填充，无需二次确认
• 若用户拒绝授权，会自动降级为手动输入模式，不影响原有业务流程

4. 后端适配 #

后端无需做额外的哈希计算，生成验证码后按照上述短信规则拼接内容，调用短信服务商接口发送即可，PHP、Java等后端语言都不需要额外改造。

兼容性说明 #

• 安卓端Chrome 84+、Edge 90+、三星浏览器14+均支持WebOTP API，覆盖当前安卓浏览器90%以上市场份额
• 低版本不兼容设备会自动降级为手动输入，不影响原有业务逻辑
• iOS端原有autocomplete=one-time-code逻辑完全不受影响，两套方案可无缝共存

内容的提问来源于stack exchange，提问作者Arshia