WebOTP 短信验证码自动读取：安全校验与回退实践

背景与价值减少手动输入与错误率，提高转化与安全性；消息需包含绑定域信息以防劫持。自动读取async function readOTP() { try { const res = await (navigator as any).credentials.get({ otp: { transport: ['sms'] } }); return res?.code || ''; } catch { return ''; } } 校验与回退async function verify(code: string) { const r = await fetch('/api/otp/verify', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ code }) }); return r.ok; } async function startOTP() { const code = await readOTP(); if (!code) return { ok: false, reason: 'fallback' }; const ok = await verify(code); return { ok }; } 指标验证（Chrome 128/Android）自动读取成功率：≥ 85%（合规文案与绑定域）。完成耗时（P95）：≤ 3.5s。回退成功率：≥ 98%（手动输入与重发机制）。安全文案与约束短信需包含 `@yourdomain.com #123456` 格式或等效绑定；限制有效期与尝试次数。测试清单自动读取与手动回退均成功；错误与超时路径提示清晰。