webauthndemo是什么Google官方WebAuthn演示项目全解析无密码登录入门完整指南【免费下载链接】webauthndemoAn example Node.js Relying Party implementation of the WebAuthn specification项目地址: https://gitcode.com/gh_mirrors/we/webauthndemowebauthndemo是 Google 官方开源的 WebAuthn 规范演示项目一个基于 Node.jsExpress TypeScript的 Relying Party依赖方完整实现。它让你零门槛体验无密码登录Passkey/密码密钥用指纹、面容或安全密钥注册并登录是学习 FIDO2 无密码认证的最佳入门教材。本文带你快速跑起项目、看懂架构、吃透无密码登录的完整流程。一、什么是 WebAuthn为什么需要它WebAuthnWeb Authentication是 W3C 制定的开放网络认证标准核心思想是用公私钥对取代密码。传统密码登录WebAuthn 无密码登录记密码、输密码指纹/面容/安全密钥一键登录撞库、钓鱼风险高密钥绑定域名难以被钓鱼密码泄露全泄露每站独立凭证互不影响浏览器Chrome、Safari、Edge与操作系统Windows Hello、Touch ID、Android均已原生支持。而 webauthndemo 正是演示服务端该怎么做的教科书级示例。二、webauthndemo 的 5 大核心功能平台认证器注册—— 用设备生物识别Touch ID / Windows Hello创建 Passkey跨平台认证器注册—— 用 USB/NFC 安全密钥注册无密码登录—— 注册后直接用生物识别登录告别密码凭证管理—— 查看、删除已注册的 Passkey展示公钥、计数器、传输方式等信息Payload 分析器—— 可视化查看 WebAuthn 原始数据帮助理解协议细节三、一键运行本地启动步骤4步搞定环境要求Node.js ≥ 20已安装 npm# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/we/webauthndemo.git cd webauthndemo # 2. 安装依赖 npm install # 3. 构建项目 npm run build然后需要两个终端分别启动# 终端 A启动 Firebase 本地模拟器Firestore Auth npm run emulator# 终端 B启动 Web 服务默认端口 8080 npm run dev 打开浏览器访问http://localhost:8080即可开始体验 Passkey 注册与登录。 小贴士模拟器配置位于firebase.json其中 Firestore 模拟器运行在localhost:8081Auth 模拟器在127.0.0.1:9099。四、项目架构速览一张图看懂目录结构webauthndemo/ ├── src/ │ ├── server.mts # Express 服务入口 │ ├── libs/ # 后端核心逻辑 │ │ ├── auth.mts # Firebase 登录验证 │ │ ├── webauthn.mts # WebAuthn 注册/认证核心 │ │ ├── credential.mts # 凭证存储Firestore │ │ ├── config.mts # 配置与 Session │ │ └── helper.mts # CSRF 防护等工具 │ ├── public/scripts/ # 前端 TypeScript 逻辑 │ ├── templates/ # Handlebars 页面模板 │ └── tsconfig.json ├── firebase.json # 模拟器配置 ├── firestore.rules # 数据库安全规则 ├── app.yaml / dev.yaml # GCP App Engine 部署配置 └── package.json关键设计前后端分离协作 —— 浏览器端负责调用 WebAuthn API 与认证器交互服务端负责生成/验证 challenge、存储公钥。五、无密码登录全流程注册与认证的 4 个关键接口webauthndemo 的所有 WebAuthn 能力都集中在src/libs/webauthn.mts中对外暴露 4 个核心接口挂载在/webauthn路由下注册流程把 Passkey 绑定到账号POST /webauthn/registerRequest—— 服务端生成注册选项含 challenge存入 session浏览器弹窗 → 用户按指纹/面容 → 设备生成密钥对POST /webauthn/registerResponse—— 服务端用verifyRegistrationResponse验证把公钥、凭证ID、计数器存入 Firestore见src/libs/credential.mts认证流程无密码登录POST /webauthn/authRequest—— 生成登录选项challenge浏览器调起设备生物识别 → 设备用私钥签名POST /webauthn/authResponse—— 服务端用公钥验签、检查计数器防重放验证通过即完成登录⚠️安全细节值得注意每次验证都会校验expectedOrigin和expectedRPID依赖方域名这就是 WebAuthn 天然抗钓鱼的原理所有接口还叠加了 CSRF 检查与鉴权见src/libs/helper.mts。六、想深入源码按这份路线读文件入门第一站src/server.mts—— 只有不到 100 行看路由如何挂载核心必读src/libs/webauthn.mts—— 注册/验证/登录全流程约 450 行数据层src/libs/credential.mts—— 凭证如何写入/查询 Firestore 的credentials集合登录体系src/libs/auth.mts—— 演示先用 Firebase 账号登录再用 Passkey 免密登录的两层结构前端逻辑src/public/scripts/main.ts—— 浏览器如何调用navigator.credentialsAPI页面模板src/templates/index.html—— Material Web Components 搭建的交互界面 学习建议先跑通流程 → 再对照 4 个接口的源码 → 最后打开 Payload 分析器观察实际数据三天内可建立完整认知。七、总结为什么值得学习 webauthndemo✅官方出品Google 亲自维护代码质量与安全性有保障Apache-2.0 协议✅麻雀虽小五脏俱全注册、认证、凭证管理、安全校验一应俱全✅门槛极低npm installnpm run build即可本地体验✅生产级参考基于simplewebauthn/server库实现看完即可迁移到自己的项目无密码登录正在取代传统密码成为行业主流而 webauthndemo 就是理解这套技术的最佳起点。克隆仓库跑起来用你自己的指纹体验一次 Passkey 登录吧【免费下载链接】webauthndemoAn example Node.js Relying Party implementation of the WebAuthn specification项目地址: https://gitcode.com/gh_mirrors/we/webauthndemo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 webauthndemo是什么？Google官方WebAuthn演示项目全解析：无密码登录入门完整指南
webauthndemo是什么Google官方WebAuthn演示项目全解析无密码登录入门完整指南【免费下载链接】webauthndemoAn example Node.js Relying Party implementation of the WebAuthn specification项目地址: https://gitcode.com/gh_mirrors/we/webauthndemowebauthndemo是 Google 官方开源的 WebAuthn 规范演示项目一个基于 Node.jsExpress TypeScript的 Relying Party依赖方完整实现。它让你零门槛体验无密码登录Passkey/密码密钥用指纹、面容或安全密钥注册并登录是学习 FIDO2 无密码认证的最佳入门教材。本文带你快速跑起项目、看懂架构、吃透无密码登录的完整流程。一、什么是 WebAuthn为什么需要它WebAuthnWeb Authentication是 W3C 制定的开放网络认证标准核心思想是用公私钥对取代密码。传统密码登录WebAuthn 无密码登录记密码、输密码指纹/面容/安全密钥一键登录撞库、钓鱼风险高密钥绑定域名难以被钓鱼密码泄露全泄露每站独立凭证互不影响浏览器Chrome、Safari、Edge与操作系统Windows Hello、Touch ID、Android均已原生支持。而 webauthndemo 正是演示服务端该怎么做的教科书级示例。二、webauthndemo 的 5 大核心功能平台认证器注册—— 用设备生物识别Touch ID / Windows Hello创建 Passkey跨平台认证器注册—— 用 USB/NFC 安全密钥注册无密码登录—— 注册后直接用生物识别登录告别密码凭证管理—— 查看、删除已注册的 Passkey展示公钥、计数器、传输方式等信息Payload 分析器—— 可视化查看 WebAuthn 原始数据帮助理解协议细节三、一键运行本地启动步骤4步搞定环境要求Node.js ≥ 20已安装 npm# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/we/webauthndemo.git cd webauthndemo # 2. 安装依赖 npm install # 3. 构建项目 npm run build然后需要两个终端分别启动# 终端 A启动 Firebase 本地模拟器Firestore Auth npm run emulator# 终端 B启动 Web 服务默认端口 8080 npm run dev 打开浏览器访问http://localhost:8080即可开始体验 Passkey 注册与登录。 小贴士模拟器配置位于firebase.json其中 Firestore 模拟器运行在localhost:8081Auth 模拟器在127.0.0.1:9099。四、项目架构速览一张图看懂目录结构webauthndemo/ ├── src/ │ ├── server.mts # Express 服务入口 │ ├── libs/ # 后端核心逻辑 │ │ ├── auth.mts # Firebase 登录验证 │ │ ├── webauthn.mts # WebAuthn 注册/认证核心 │ │ ├── credential.mts # 凭证存储Firestore │ │ ├── config.mts # 配置与 Session │ │ └── helper.mts # CSRF 防护等工具 │ ├── public/scripts/ # 前端 TypeScript 逻辑 │ ├── templates/ # Handlebars 页面模板 │ └── tsconfig.json ├── firebase.json # 模拟器配置 ├── firestore.rules # 数据库安全规则 ├── app.yaml / dev.yaml # GCP App Engine 部署配置 └── package.json关键设计前后端分离协作 —— 浏览器端负责调用 WebAuthn API 与认证器交互服务端负责生成/验证 challenge、存储公钥。五、无密码登录全流程注册与认证的 4 个关键接口webauthndemo 的所有 WebAuthn 能力都集中在src/libs/webauthn.mts中对外暴露 4 个核心接口挂载在/webauthn路由下注册流程把 Passkey 绑定到账号POST /webauthn/registerRequest—— 服务端生成注册选项含 challenge存入 session浏览器弹窗 → 用户按指纹/面容 → 设备生成密钥对POST /webauthn/registerResponse—— 服务端用verifyRegistrationResponse验证把公钥、凭证ID、计数器存入 Firestore见src/libs/credential.mts认证流程无密码登录POST /webauthn/authRequest—— 生成登录选项challenge浏览器调起设备生物识别 → 设备用私钥签名POST /webauthn/authResponse—— 服务端用公钥验签、检查计数器防重放验证通过即完成登录⚠️安全细节值得注意每次验证都会校验expectedOrigin和expectedRPID依赖方域名这就是 WebAuthn 天然抗钓鱼的原理所有接口还叠加了 CSRF 检查与鉴权见src/libs/helper.mts。六、想深入源码按这份路线读文件入门第一站src/server.mts—— 只有不到 100 行看路由如何挂载核心必读src/libs/webauthn.mts—— 注册/验证/登录全流程约 450 行数据层src/libs/credential.mts—— 凭证如何写入/查询 Firestore 的credentials集合登录体系src/libs/auth.mts—— 演示先用 Firebase 账号登录再用 Passkey 免密登录的两层结构前端逻辑src/public/scripts/main.ts—— 浏览器如何调用navigator.credentialsAPI页面模板src/templates/index.html—— Material Web Components 搭建的交互界面 学习建议先跑通流程 → 再对照 4 个接口的源码 → 最后打开 Payload 分析器观察实际数据三天内可建立完整认知。七、总结为什么值得学习 webauthndemo✅官方出品Google 亲自维护代码质量与安全性有保障Apache-2.0 协议✅麻雀虽小五脏俱全注册、认证、凭证管理、安全校验一应俱全✅门槛极低npm installnpm run build即可本地体验✅生产级参考基于simplewebauthn/server库实现看完即可迁移到自己的项目无密码登录正在取代传统密码成为行业主流而 webauthndemo 就是理解这套技术的最佳起点。克隆仓库跑起来用你自己的指纹体验一次 Passkey 登录吧【免费下载链接】webauthndemoAn example Node.js Relying Party implementation of the WebAuthn specification项目地址: https://gitcode.com/gh_mirrors/we/webauthndemo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考