通行密钥登录需通过https、用户主动触发navigator.credentials.get()调用并传入publickey参数，由系统凭证管理器处理身份验证，非传统表单填充；须先完成注册、正确关联源，并做好错误处理与密码登录兜底。
HTML5 的 Credential Management API 支持通行密钥（Passkeys）的存储与自动填充，但需注意：通行密钥本身由操作系统或平台凭证管理器（如 iOS 钥匙串、Windows Hello、Android 凭证管理器）托管，浏览器通过标准 Credential API 与其交互。实现“一键填充”并非传统表单自动填值，而是触发系统级身份验证流程。以下是关键步骤和注意事项：
确保环境与权限就绪
通行密钥功能依赖现代浏览器和平台支持：
- Chrome 108+、Edge 109+、Safari 16.4+（macOS/iOS）、Firefox 115+（有限支持）
- 网站必须通过 HTTPS（本地开发可使用
localhost） - 用户已启用通行密钥并至少注册过一个（可在系统设置中检查）
- 页面需获得用户主动交互（如点击按钮）后才能调用
navigator.credentials.get()
声明通行密钥支持并请求登录
在登录入口（如“使用通行密钥登录”按钮）绑定点击事件，调用 get() 并指定 password: false 和 mediation: "optional"：
document.getElementById("login-with-passkey").addEventListener("click", async () => {
try {
const credential = await navigator.credentials.get({
password: false,
mediation: "optional",
publicKey: {
challenge: new Uint8Array([/* 服务端生成的随机挑战 */]),
allowCredentials: [/* 可选：指定特定密钥 ID 列表 */],
userVerification: "preferred"
}
});
if (credential && credential.type === "publickey") {
// 将 credential.response 发送给后端验证
await submitAssertion(credential);
}
} catch (err) {
console.warn("通行密钥登录失败:", err.name);
}
});
注意：mediation: "optional" 允许浏览器在有唯一匹配密钥时跳过选择弹窗，实现接近“一键”体验；若有多把密钥，仍会唤起系统选择器。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
配合注册流程，让密钥可被发现
通行密钥能否被自动填充，取决于是否已在该站点完成注册。注册时需调用 navigator.credentials.create() 并传入 publicKey 选项，且服务端返回的 challenge 必须是新鲜、不可预测的。注册成功后，浏览器会将密钥与当前源（origin）关联，后续登录时才能识别并提供。
确保注册响应头包含 Content-Type: application/json，且前端正确处理公钥凭证创建结果——这是密钥能被后续 get() 找到的前提。
优化用户体验，避免误触与降级
通行密钥不是万能替代方案，需合理兜底：
- 始终保留传统密码登录入口，并明确标注“或使用通行密钥”
- 检测
"publickey" in window.navigator.credentials再显示通行密钥按钮 - 捕获
NotAllowedError（用户拒绝）、SecurityError（HTTPS 缺失）、NotFoundError（无可用密钥）等错误，引导用户注册或换方式 - 不要在页面加载时自动调用
get()—— 违反用户激活要求，会被浏览器阻止
不复杂但容易忽略：通行密钥的“一键填充”本质是系统级快捷登录，它不填表单字段，而是直接完成身份断言。开发者要做的，是正确触发、优雅处理、平滑降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
