WebAuthn 无密码登录：PublicKeyCredential 创建与获取实践

概述WebAuthn 提供基于公钥的无密码登录能力，浏览器与验证器协作生成与使用凭据。站点在 `navigator.credentials.create` 创建凭据，在 `navigator.credentials.get` 获取断言进行登录。用法/示例const publicKey = {

challenge: Uint8Array.from(self.crypto.getRandomValues(new Uint8Array(32))),

rp: { name: 'Example', id: location.hostname },

user: { id: Uint8Array.from('user-id', c => c.charCodeAt(0)), name: '[email protected]', displayName: 'User' },

pubKeyCredParams: [{ type: 'public-key', alg: -7 }],

authenticatorSelection: { residentKey: 'preferred', userVerification: 'preferred' },

attestation: 'none'

}

const cred = await navigator.credentials.create({ publicKey })

const request = {

challenge: Uint8Array.from(self.crypto.getRandomValues(new Uint8Array(32))),

allowCredentials: [{ type: 'public-key', id: storedId }],

userVerification: 'preferred'

}

const assertion = await navigator.credentials.get({ publicKey: request })

工程建议仅在 HTTPS 与有效 RP ID 下运行；对凭据 ID 使用 Base64url 编码并安全存储。合理选择 `userVerification` 与 `residentKey`，根据产品需求权衡体验与安全。后端进行签名与计数验证，并绑定会话与设备特性，防止重放与跨站滥用。参考与验证MDN：WebAuthn — https://developer.mozilla.org/docs/Web/API/Web_Authentication_APIW3C：WebAuthn Level 3 — https://www.w3.org/TR/webauthn-3/web.dev：Passkeys — https://web.dev/articles/passkeys