credential.get() 返回 undefined 或 promise 拒绝的主因是安全上下文不满足（仅 httpS/localhost）或用户拒绝授权；返回凭证不含 password 属正常设计，应以 credential.id 发起后端校验；须用 credential.get() 替代已废弃的 request()，并配合 autocomplete 语义化表单触发自动填充。
credential.get() 返回 undefined 或 Promise 拒绝
调用 credential.get() 后没拿到数据，常见原因是页面未满足安全上下文要求或用户未授权。该 API 只能在 https（或 localhost）下运行，HTTP 页面会直接抛出 SecurityError。另外，浏览器会弹出权限提示，若用户点击“拒绝”或之前已永久拒绝，Promise 会以 NotAllowedError 拒绝。
- 检查当前协议：
window.location.protocol必须为"https:"或"http:"且主机为"localhost" - 确保页面已获得用户主动交互（如点击事件），否则 chrome 等浏览器会静默拒绝请求
- 不要在页面加载时立即调用，应包裹在
button.onclick或form.onsubmit中 - 捕获并检查错误类型：
credential.get({ password: true }) .catch(err => { console.error(err.name); // 如 "SecurityError"、"NotAllowedError"、"NotFoundError" });
获取到的 credential 对象没有 password 字段
即使传入 { password: true }，返回的 PasswordCredential 实例也可能不含 password 属性——这是有意设计：浏览器只在「用户明确选择该账号并确认提交」后才暴露密码，否则仅提供 id、name、iconURL 等元信息用于 ui 渲染。
- 只有当用户从自动填充弹层中点击某个账号，且该账号由浏览器管理（非第三方密码管理器注入），才可能返回完整凭证
-
credential.password在部分浏览器（如 safari）始终为undefined，不可依赖 - 更稳妥的做法是用
credential.id发起后端查询，由服务端校验并下发 session
credential.request() 和 credential.get() 的区别与选型
这两个方法名字相似但行为不同：credential.request() 是旧版（已废弃）接口，仅 firefox 早期支持；credential.get() 是现行标准，必须使用它。若代码里还写着 navigator.credentials.request，运行时会报 TypeError: navigator.credentials.request is not a function。
- 一律改用
navigator.credentials.get()，参数结构保持一致 - 注意兼容性检测写法：
if ('get' in navigator.credentials) { navigator.credentials.get({ password: true }); } - 不推荐 fallback 到
document.querySelector('input[type="password"]')手动取值——这绕过安全模型，且无法触发自动填充逻辑
配合表单自动填充的最小可行配置
单纯调用 credential.get() 不足以激活浏览器的自动填充行为。必须配合语义化表单，让浏览器识别出登录上下文。
立即学习“前端免费学习笔记（深入）”；
- 表单需含
autocomplete="username"和autocomplete="current-password"的输入框 - 提交按钮需有
type="submit"，且表单要有action（可为空字符串） - 页面首次加载后，用户手动点击一次登录按钮，后续刷新才可能触发自动填充弹层
- 示例结构：
实际项目中，最易被忽略的是「用户首次访问时无凭证可填」这个前提——credential.get() 不会凭空生成账号，它只读取浏览器已保存的、且与当前 origin 匹配的凭证。如果测试时清空了浏览器密码管理器，或者域名刚换过（比如从 dev.example.com 切到 example.com），就必然拿不到结果。