Credential Management API 可实现原生异步自动填充：检测支持后，在 DOM 就绪且用户未输入前调用 navigator.credentials.get()，通过 mediation 控制交互强度，安全注入凭证并更新 UI，登出时需调用 preventSilentAccess() 保持状态一致。
可以直接用 Credential Management API 实现原生、异步的用户身份自动填充，核心在于让浏览器在不刷新页面、不阻塞交互的前提下，主动检索并注入已保存的凭证。它不是靠监听表单提交，而是由浏览器在合适时机（比如页面加载、输入框聚焦、或用户触发登录动作时）自动介入。
检测支持并准备调用时机
先确认浏览器是否支持该 API，注意不能只检查 navigator.credentials，因为部分浏览器支持 WebAuthn 但不支持 PasswordCredential/FederatedCredential。稳妥做法是：
- 检查
window.PasswordCredential或window.FederatedCredential是否存在 - 对不支持环境降级为传统表单逻辑，避免白屏或报错
- 推荐在页面 DOM 就绪后、且用户尚未开始输入前调用
navigator.credentials.get()，实现“静默自动填充”
发起异步凭证获取请求
调用 navigator.credentials.get() 是异步操作，返回 Promise，天然适配现代前端流程。关键点在于配置 mediation 参数控制交互强度：
-
mediation: 'silent'：完全无感，仅当有唯一匹配凭证时才返回，适合页面加载后自动续登 -
mediation: 'optional'：用户聚焦到登录字段时弹出账号选择器，兼顾体验与可控性 -
mediation: 'required'：强制弹出选择器，适用于敏感操作前的身份再确认
示例中可同时请求密码和联合凭证，浏览器会合并展示：
const cred = await navigator.credentials.get({
password: true,
federated: { providers: ['https://accounts.google.com'] },
mediation: 'optional'
});
安全注入凭证并更新 UI
获取成功后，API 返回的是结构化对象（如 PasswordCredential），包含 id、password、name 等字段，可直接映射到对应表单控件：
- 将
cred.id填入用户名/邮箱字段，cred.password填入密码字段（仅限 HTTPS 页面） - 若为
FederatedCredential，则跳过密码字段，直接调用对应 OAuth 流程或向后端发起联合登录请求 - 填充后立即调用登录逻辑（如发请求验证），同时更新界面状态（如隐藏登录表单、显示欢迎信息）
配合退出与凭证管理保持一致性
用户登出时，必须调用 navigator.credentials.preventSilentAccess()，否则下次访问仍可能自动填充并尝试静默登录，造成状态错乱：
- 该方法会清除当前域名下的静默访问权限，但不影响已保存的凭证本身
- 如需更新凭证（例如用户改密），应重新构造
PasswordCredential并调用navigator.credentials.store() - 敏感操作（如修改邮箱、删除账号）建议禁用静默访问，并要求显式选择凭证或二次验证
