WebAuthn API是当前唯一可行的指纹验证方案，HTML表单本身不支持指纹识别，必须通过JavaScript调用navigator.credentials.create()或get()完成认证，并手动提交序列化后的凭证数据。
WebAuthn API 是当前唯一可行的指纹验证方案
HTML 表单本身不支持指纹识别，submit 事件无法直接触发生物认证。必须绕过传统表单提交流程，改用 JavaScript 调用 navigator.credentials.create() 或 navigator.credentials.get()（即 WebAuthn API）完成身份断言，再将生成的凭证数据（如 response.clientDataJSON、response.authenticatorData）作为隐藏字段手动提交或通过 fetch 发送到后端。
不能在 <form> 的 onsubmit 里直接调用 navigator.credentials.get()
WebAuthn 操作是异步且需要用户交互触发（比如点击按钮），而原生表单提交会立即刷新页面或跳转，导致 Promise 被中断、NotAllowedError 报错，或认证弹窗被浏览器拦截。常见错误现象包括控制台报 DOMException: The operation either timed out or was not allowed。
- 必须把“指纹验证”和“表单提交”拆成两个明确步骤：先点按钮唤起认证，成功后再触发提交逻辑
- 禁用默认提交行为：
event.preventDefault()是必须的 - 验证通过后，建议用
fetch提交数据，而非form.submit()，避免丢失凭证二进制字段（如ArrayBuffer需要Uint8Array转 base64）
PublicKeyCredential 返回的数据怎么塞进表单里
WebAuthn 返回的是二进制结构（ArrayBuffer），不能直接赋值给 <input type="hidden">。必须序列化：对关键字段（如 authenticatorData、signature、clientDataJSON）调用 new TextDecoder().decode() 或 base64url.encode()（注意不是标准 base64）。
-
clientDataJSON是 UTF-8 JSON 字符串，可直接JSON.parse()后取challenge和origin校验 -
authenticatorData和signature是ArrayBuffer，需转为 base64url 字符串（推荐用npm install base64url或手写解码函数） - 后端必须用对应算法（如 ECDSA with SHA-256）验签，前端传错编码格式会导致验签失败，且无明确报错提示
Chrome/Firefox/Safari 对 allowCredentials 和平台 authenticator 支持差异大
桌面端 Chrome 默认优先调起 Windows Hello（指纹/人脸），但 Safari（macOS/iOS）只允许调用 Touch ID / Face ID，且要求域名已启用 HTTPS + 关联 Apple Developer 账户配置关联域（apple-app-site-association）。Firefox 则可能静默回退到安全密钥（如 YubiKey），跳过本机指纹。
立即学习“前端免费学习笔记（深入）”；
- 测试时务必在真实设备上操作，
localhost在 Chrome/Firefox 下可绕过 HTTPS，但 Safari 强制要求真实证书 -
allowCredentials数组若为空或 ID 错误，Chrome 可能直接报NotAllowedError，而 Safari 返回UnknownError，调试需看error.name而非消息文本 - 不要依赖
navigator.credentials.isUserVerifyingPlatformAuthenticatorAvailable()—— 它在 Safari 中始终返回false，即使 Touch ID 可用
signature 是 DER 编码格式，且需配合原始 challenge、authenticatorData 前 32 字节（attested credential data length）做完整校验。漏掉任一字段，攻击者就能伪造凭证。 
