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

// 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);
  });
}

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

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