Credential Management API 是一种基于标准的浏览器 API,可在站点和浏览器之间提供程序化接口,以实现跨设备的无缝登录。
Credential Management API
- 消除登录流程中的摩擦 - 即使用户的会话已过期或他们在另一台设备上保存了凭据,用户也可以自动重新登录站点。
- 允许通过帐号选择器一键登录 - 用户可以在原生帐号选择器中选择一个帐号。
- 存储凭据 - 您的应用可以存储用户名和密码组合,甚至是联合帐号详细信息。这些凭据可以通过浏览器跨设备同步。
想要查看实际效果吗?请试用 Credential Management API 演示,并查看代码。
查看 Credential Management API 浏览器支持
在使用 Credential Management API 之前,请先检查是否支持 PasswordCredential
或 FederatedCredential
。
if (window.PasswordCredential || window.FederatedCredential) {
// Call navigator.credentials.get() to retrieve stored
// PasswordCredentials or FederatedCredentials.
}
用户登录
要让用户登录,请从浏览器的密码管理器检索凭据,并使用它们登录用户。
例如
- 当用户访问您的网站但未登录时,调用
navigator.credentials.get()
。 - 使用检索到的凭据登录用户。
- 更新 UI 以指示用户已登录。
在用户登录中了解更多信息。
保存或更新用户凭据
如果用户使用联合身份提供商(如 Google 登录、Facebook、GitHub)登录
- 在用户成功登录或创建帐号后,使用用户的电子邮件地址作为 ID 创建
FederatedCredential
,并使用FederatedCredentials.provider
指定身份提供商。 - 使用
navigator.credentials.store()
保存凭据对象。
在用户登录中了解更多信息。
如果用户使用用户名和密码登录
- 在用户成功登录或创建帐号后,使用用户 ID 和密码创建
PasswordCredential
。 - 使用
navigator.credentials.store()
保存凭据对象。
在从表单保存凭据中了解更多信息。
退出
当用户退出时,调用 navigator.credentials.preventSilentAccess()
以防止用户自动重新登录。
禁用自动登录还使用户可以轻松地在帐号之间切换,例如,在工作帐号和个人帐号之间,或在共享设备上的帐号之间切换,而无需重新输入其登录信息。
在退出中了解更多信息。