🔑 Passkey 流程图 实时联动

点击下方按钮执行真实的 WebAuthn 流程,图中节点会在每一步真正发生时点亮。 不是动画演示 —— 每个高亮都对应一次真实的 API 调用或密码学操作。 ← 返回主 Demo

就绪
👤 用户
点击按钮触发注册/登录
生物识别 / PINTouch ID · Face ID · 1Password
完成会话已建立
🌐 浏览器 / OS
navigator.credentials.create() / .get()
凭证选择器系统绘制,网页无法控制
写入真实 originclientDataJSON ← 抗钓鱼锚点
🔐 认证器
生成密钥对私钥留在 Secure Enclave
私钥签名authData ‖ SHA-256(clientData)
💻 前端
请求 optionsPOST /options
base64url → ArrayBufferchallenge / user.id / credIds
ArrayBuffer → base64url打包 assertion
提交校验POST /verify
⚙️ 服务端
生成 challenge加密随机 · TTL 120s
查已有凭证excludeCredentials / allowCredentials
消费 challenge取出即作废 ← 防重放
执行校验清单见右侧逐条结果
落库 / 更新公钥 · signCount · AAGUID
签发会话HttpOnly Cookie

服务端校验清单

对应调研文档 5.2。任一失败即中断,绝不放行。

    实时报文

    当前步骤的真实数据,未做任何美化或伪造。

    等待操作…

    执行日志