"WebAuthn/FIDO2 无密码认证最佳实践"

WebAuthn/FIDO2 无密码认证最佳实践概述WebAuthn/FIDO2通过公钥注册与挑战签名实现无密码认证，提升安全性与用户体验。本文提供服务端与前端的最小实现与治理建议。注册流程（前端）async function startRegistration(username: string) { const res = await fetch('/webauthn/register/options', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username }) }) const options = await res.json() options.challenge = Uint8Array.from(atob(options.challenge), c => c.charCodeAt(0)) options.user.id = Uint8Array.from(atob(options.user.id), c => c.charCodeAt(0)) const cred = await navigator.credentials.create({ publicKey: options }) const att = (cred as PublicKeyCredential) const payload = { id: att.id, rawId: btoa(String.fromCharCode(...new Uint8Array(att.rawId as ArrayBuffer))), type: att.type, response: { clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(att.response.clientDataJSON as ArrayBuffer))), attestationObject: btoa(String.fromCharCode(...new Uint8Array(att.response.attestationObject as ArrayBuffer))) } } await fetch('/webauthn/register/verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }) } 登录流程（前端）async function startLogin(username: string) { const res = await fetch('/webauthn/login/options', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username }) }) const options = await res.json() options.challenge = Uint8Array.from(atob(options.challenge), c => c.charCodeAt(0)) options.allowCredentials = options.allowCredentials.map((c: any) => ({ ...c, id: Uint8Array.from(atob(c.id), d => d.charCodeAt(0)) })) const assertion = await navigator.credentials.get({ publicKey: options }) const cred = assertion as PublicKeyCredential const payload = { id: cred.id, rawId: btoa(String.fromCharCode(...new Uint8Array(cred.rawId as ArrayBuffer))), type: cred.type, response: { clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(cred.response.clientDataJSON as ArrayBuffer))), authenticatorData: btoa(String.fromCharCode(...new Uint8Array((cred.response as AuthenticatorAssertionResponse).authenticatorData as ArrayBuffer))), signature: btoa(String.fromCharCode(...new Uint8Array((cred.response as AuthenticatorAssertionResponse).signature as ArrayBuffer))), userHandle: btoa(String.fromCharCode(...new Uint8Array(((cred.response as any).userHandle || new ArrayBuffer(0)) as ArrayBuffer))) } } await fetch('/webauthn/login/verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }) } 服务端要点（伪代码）// 生成挑战并存储到会话 function issueChallenge(): string { const bytes = crypto.randomBytes(32) return bytes.toString('base64') } // 验证注册：解析attestationObject并保存公钥（credentialId, publicKey, counter） // 验证登录：校验challenge与签名、counter递增、防重放 运维要点在HTTPS下启用，前端与后端使用随机挑战并防重放绑定设备与账户，记录AAGUID与计数器用于风险检测对账号恢复提供备用登录（MFA/备份代码），并限制重置路径通过WebAuthn/FIDO2的挑战与签名流程，可在Web场景实现安全、便捷的无密码认证。