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` 格式或等效绑定；限制有效期与尝试次数。测试清单自动读取与手动回退均成功；错误与超时路径提示清晰。