Credential Management API

Credential Management API 是一种基于标准的浏览器 API,可在站点和浏览器之间提供程序化接口,以实现跨设备的无缝登录。

Credential Management API

  • 消除登录流程中的摩擦 - 即使用户的会话已过期或他们在另一台设备上保存了凭据,用户也可以自动重新登录站点。
  • 允许通过帐号选择器一键登录 - 用户可以在原生帐号选择器中选择一个帐号。
  • 存储凭据 - 您的应用可以存储用户名和密码组合,甚至是联合帐号详细信息。这些凭据可以通过浏览器跨设备同步。

想要查看实际效果吗?请试用 Credential Management API 演示,并查看代码

查看 Credential Management API 浏览器支持

浏览器支持

  • Chrome: 51.
  • Edge: 18.
  • Firefox: 60.
  • Safari: 13.

来源

在使用 Credential Management API 之前,请先检查是否支持 PasswordCredentialFederatedCredential

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

用户登录

要让用户登录,请从浏览器的密码管理器检索凭据,并使用它们登录用户。

例如

  1. 当用户访问您的网站但未登录时,调用 navigator.credentials.get()
  2. 使用检索到的凭据登录用户。
  3. 更新 UI 以指示用户已登录。

用户登录中了解更多信息。

保存或更新用户凭据

如果用户使用联合身份提供商(如 Google 登录、Facebook、GitHub)登录

  1. 在用户成功登录或创建帐号后,使用用户的电子邮件地址作为 ID 创建 FederatedCredential,并使用 FederatedCredentials.provider 指定身份提供商。
  2. 使用 navigator.credentials.store() 保存凭据对象。

用户登录中了解更多信息。

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

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

从表单保存凭据中了解更多信息。

退出

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

禁用自动登录还使用户可以轻松地在帐号之间切换,例如,在工作帐号和个人帐号之间,或在共享设备上的帐号之间切换,而无需重新输入其登录信息。

退出中了解更多信息。

反馈