FedCM 更新:Domain Hint API

从 Chrome 123 开始,您可以将网域提示Federated Credential Management API (FedCM) 搭配使用。借助 Domain Hint API,开发者可以仅显示来自他们接受的网域的联合登录账号,从而提供更好的用户体验。

域提示 API

FedCM 可用于让用户使用身份提供方 (IdP) 提供的帐号信息更轻松地登录依赖方(RP,引用网站)。但在某些情况下,RP 已经知道只有与特定网域关联的帐号才能登录网站。在企业场景中,这尤其常见,因为在这种情况下要访问的网站被限制在公司网域内。为了提供更好的用户体验,FedCM API 允许 RP 仅显示可用于登录 RP 的帐号。这样可以防止用户尝试使用公司网域以外的帐号登录 RP,但之后却收到错误消息(或在登录不起作用的情况下使系统静音),因为未使用正确的帐号类型。

借助 Domain Hint API,RP 可以在 FedCM API 调用中指定 domainHint 属性,以仅显示与用户匹配的帐号。IdP 可以在来自帐号列表端点的响应中提供 domain_hints 属性,以指明与帐号关联的网域。这样,浏览器就可以显示匹配的帐号,而不会向 IdP 披露请求的网域提示。

来自帐号列表端点的 JSON 响应示例如下所示:

{
 "accounts": [{
   "id": "1234",
   "given_name": "John",
   "name": "John Doe",
   "email": "john_doe@idp.example",
   "picture": "https://idp.example/profile/123",
   "approved_clients": ["123", "456", "789"],
  }, {
   "id": "5678",
   "given_name": "Johnny",
   "name": "Johnny",
   "email": "johnny@idp.example",
   "picture": "https://idp.example/profile/456"
   "approved_clients": ["abc", "def", "ghi"],
   "domain_hints": ["corp.example"]
  }]
}

RP 可以使用 domainHint 属性调用 navigator.credentials.get() 来过滤帐号。例如,假设某位用户访问了 corp-partner.example,并使用 corp.example 中的帐号登录。该网站会按如下方式调用该 API:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "abc",
      nonce: nonce,
      domainHint : "corp.example"
    }]
  }
});

系统不会将 domainHint 值发送到帐号列表端点进行服务器端过滤,因为这可能是指向 IdP 的指纹矢量。Chrome 会照常执行 FedCM 请求,并过滤掉与 navigator.credentials.get() 调用指定的 domainHint 值不匹配的帐号。然后,Chrome 会向用户显示 FedCM 对话框及新帐号列表。此方法类似于 Login Hint API,但这两个 API 解答不同的问题。Login Hint API 旨在回答“哪个是我所需用户的标识符?”,而 Domain Hint 旨在回答“此帐号必须属于哪个公司或服务器?”。

使用 domainHint: "any" 时,Chrome 会过滤掉没有任何网域的帐号(即 domain_hints 未传递或为空)。例如,这适用于以下用例:RP 仅允许在其注册过程中使用受管理的帐号。

如果没有与 domainHint 匹配的帐号,FedCM 对话框会显示登录提示,允许用户登录与 RP 请求的提示匹配的 IdP 帐号。当用户点按提示时,系统将使用配置文件中指定的登录网址打开一个弹出式窗口。然后,该链接会被附加登录提示和网域提示查询参数。

没有帐号与 domainHint 匹配的登录提示示例。
没有与 domainHint 匹配的账号时的登录提示示例。