Credential Management API：密码凭据存储与自动填充

---

title: Credential Management API：密码凭据存储与自动填充

keywords:

• navigator.credentials
• PasswordCredential
• credentials.store
• 自动填充
• 登录

description: 使用 Credential Management API 管理密码凭据的获取与存储，改善登录体验并与自动填充集成，提供隐私与回退策略。

categories:

• 文章资讯
• 编程技术

---

概述

Credential Management 提供统一的凭据接口，支持获取与存储密码凭据。与自动填充协作可减少输入与提升登录体验。

用法/示例

const cred = await navigator.credentials.get({ password: true })
if (cred) {
  const r = await fetch('/login', { method: 'POST', body: new URLSearchParams({ id: cred.id, password: cred.password }) })
}

const stored = new PasswordCredential({ id: '[email protected]', name: 'User', password: 'pass' })
await navigator.credentials.store(stored)

工程建议

• 在安全上下文中使用并最小化敏感数据的前端存储。
• 对不支持环境使用传统表单与密码管理器回退。
• 与服务器端会话与风险控制协作，防护暴力与滥用。

参考与验证

• MDN：Credential Management — https://developer.mozilla.org/docs/Web/API/Credential_Management_API