凭据管理 API

Eiji Kitamura

Meggin Kearney

Credential Management API 是一种基于标准的浏览器 API， 实现跨设备无缝登录。

凭据管理 API：

• 消除登录流程中的障碍 - 即使用户的会话已过期或已在其他设备上保存凭据，用户仍可自动重新登录网站。
• 允许使用账号选择器一键登录 - 用户可以在原生账号选择器中选择账号。
• 存储凭据 - 您的应用可以存储用户名和密码的组合，甚至是联合账号详情。这些凭据可以通过浏览器在设备间同步。

。

要点 ：使用 Credential Management API 需要从安全来源提供页面。

想要看看它的实际运用情况？试用 Credential Management API 演示 并查看 代码。

检查 Credential Management API 浏览器支持

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 51 个
• <ph type="x-smartling-placeholder"></ph> 18 岁
• <ph type="x-smartling-placeholder"></ph> 60 个
• <ph type="x-smartling-placeholder"></ph> 13

来源

在使用 Credential Management API 之前，请先检查 PasswordCredential 或 FederatedCredential。

if (window.PasswordCredential || window.FederatedCredential) {
  // Call navigator.credentials.get() to retrieve stored
  // PasswordCredentials or FederatedCredentials.
}

警告 ：在支持 WebAuthn(PublicKeyCredential) 的浏览器上，通过勾选 navigator.credentials 进行功能检测可能会破坏您的网站，但并非所有凭据类型（PasswordCredential 和 FederatedCredential）都是由 Credential Management API 定义的。了解详情。

登录用户

要让用户登录，请从浏览器的密码中检索凭据 并使用它们来登录用户。

例如：

1. 如果用户到达您的网站却没有登录， 调用 navigator.credentials.get()。
2. 使用检索到的凭据让用户登录。
3. 更新界面以表明用户已登录。

如需了解详情，请访问 登录用户。

保存或更新用户凭据

如果用户通过联合身份提供方（例如 Google）登录 Sign-In、Facebook、GitHub：

1. 在用户成功登录或创建账号后，使用用户的电子邮件地址创建 FederatedCredential，如下所示： ID 并使用 FederatedCredentials.provider 指定身份提供方。
2. 使用 navigator.credentials.store() 保存凭据对象。

如需了解详情，请访问 登录用户。

如果用户使用用户名和密码登录：

1. 在用户成功登录或创建账号后，使用用户 ID 创建 PasswordCredential，并 密码。
2. 使用 navigator.credentials.store() 保存凭据对象。

如需了解详情，请访问 保存表单中的凭据。

退出账号

当用户退出账号时，调用 navigator.credentials.preventSilentAccess() 以防止用户自动重新登录。

停用自动登录功能还可让用户轻松切换账号， 例如工作账号和个人账号之间，或 而无需重新输入登录信息。

如需了解详情，请访问 退出账号。

反馈