首页 > web前端 > js教程 > 正文

javascript怎样进行生物识别?_javascript的WebAuthn API如何使用?

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

javascript怎样进行生物识别?_javascript的webauthn api如何使用?

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

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

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

注册新用户(绑定生物识别)

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

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

用户登录(用生物识别验证身份)

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

音疯
音疯

音疯是昆仑万维推出的一个AI音乐创作平台,每日可以免费生成6首歌曲。

音疯 178
查看详情 音疯

立即学习Java免费学习笔记(深入)”;

  • 服务端需提供 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 等异常,并降级到密码或其他方式
基本上就这些。WebAuthn 不是 JS 直接调生物传感器,而是把验证环节“外包”给可信环境,JS 负责流程调度和密钥管理——既安全,又无需接触敏感生物数据。

以上就是javascript怎样进行生物识别?_javascript的WebAuthn API如何使用?的详细内容,更多请关注php中文网其它相关文章!

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号