JavaScript实现生物识别：WebAuthn使用教程

本篇文章向大家介绍《JavaScript如何实现生物识别？WebAuthn API使用教程》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

WebAuthn 是 W3C 标准，通过浏览器委托操作系统完成指纹、人脸等生物验证，JavaScript 仅发起请求并处理结果，不接触原始生物数据；注册调用 create()，登录调用 get()，需服务端配合校验，且依赖 HTTPS 和系统级生物认证配置。

JavaScript 本身不能直接调用指纹、人脸等硬件传感器，但可以通过 WebAuthn API（Web Authentication API）与操作系统或浏览器集成的生物识别模块安全交互——前提是设备支持且用户已设置好系统级生物认证（如 Windows Hello、Touch ID、Face ID 或 Android 的 BiometricPrompt）。

WebAuthn 是什么？它怎么和生物识别挂钩？

WebAuthn 是 W3C 标准，让网站能用公钥密码学替代密码登录。它不直接“读取”指纹图像，而是由浏览器委托操作系统完成生物验证，验证通过后才生成/使用密钥对。也就是说：
– 生物识别由系统底层完成（安全区/TEE）
– JavaScript 只负责发起认证请求、处理结果
– 整个过程不暴露生物特征数据，也不传输原始生物信息

注册新用户（绑定生物识别）

调用 navigator.credentials.create()，传入包含 challenge 和 user 信息的参数对象。浏览器会弹出系统级验证界面（如“请按指纹”）：

• 确保 challenge 是服务端生成的随机 buffer（至少16字节），防止重放攻击
• user.id 必须是 Uint8Array，通常用 base64url 解码后的用户唯一 ID
• authenticatorSelection.authenticatorAttachment 设为 "platform" 可优先触发设备内置生物识别（而非 USB 安全密钥）
• 成功后返回 PublicKeyCredential，含公钥、凭证 ID、attestation 语句，需发回服务端存储备用

用户登录（用生物识别验证身份）

调用 navigator.credentials.get() 发起认证请求。浏览器再次唤起系统生物验证界面：

• 服务端需提供 challenge（新随机值）和已注册的 allowCredentials 列表（credential ID 数组）
• 若用户选择生物识别并通过，浏览器返回签名响应（含 authenticatorData、signature、clientDataJSON）
• 服务端需校验 signature 是否匹配该用户此前注册的公钥，并检查 authenticatorData 中的标志位（如 flags.uv 表示用户验证已通过）
• 注意：不是所有平台默认启用生物验证，部分需用户首次手动选中“使用生物识别”并授权

兼容性与注意事项

Chrome 67+、Edge 18+、Firefox 60+、Safari 16.4+ 均支持 WebAuthn。但实际体验取决于：

• 操作系统是否启用生物识别（如 macOS 需开启 Touch ID，Windows 需配置 Hello）
• 浏览器是否运行在 HTTPS 环境（localhost 除外）
• 移动端 Safari 目前仅支持 Face ID/Touch ID 注册和登录，不支持跨设备同步凭证
• 不要假设“有生物识别就一定可用”，需用 navigator.credentials.create 的 catch 捕获 NotAllowedError、SecurityError 等异常，并降级到密码或其他方式

好了，本文到此结束，带大家了解了《JavaScript实现生物识别：WebAuthn使用教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！