从 Chrome 142 开始,当信赖方 (RP) 作为第三方 iframe 嵌入到另一个网站中时,您可以选择在 FedCM 界面中显示该 iframe 的网域。此功能可增强用户在登录嵌入到其他网站的服务时的透明度。
背景
以前,当从跨源 iframe 内调用 FedCM 时,FedCM 对话框界面只会显示顶级网域。如果用户互动的服务与顶级网站不同,这可能会让用户感到困惑。例如,用户可能正在浏览嵌入了评论 widget 的新闻网站。当用户尝试登录评论 widget 时,FedCM 对话框只会显示新闻网站的网域,而不会显示评论服务的网域:
为解决此问题,Chrome 现在提供了一种方法,让 IdP 除了顶级网站的网域之外,还可以在 FedCM 对话框中指明向哪个 iframe 的网域发送令牌。这样一来,用户可以更清楚地了解哪些第三方服务参与了登录流程。
实现
IdP 的客户端元数据端点会同时接收 client_id 和可选的 top_frame_origin,例如:
GET /client_metadata_endpoint?client_id=1234&top_frame_origin=https%3A%2F%2Ftop-frame.example HTTP/1.1
Host: idp.example
Origin: https://iframe.example/
Accept: application/json
Sec-Fetch-Dest: webidentity
然后,IdP 可以实现自定义逻辑,以确定 RP 和顶级网站是否属于同一方。如果 RP 同时拥有顶级网站和 iframe,IdP 可以选择仅显示顶级网域(这是默认行为)。如需同时显示这两个网域,IdP 需要在其客户端元数据端点响应中添加 client_is_third_party_to_top_frame_origin 属性,并将其值设置为 true。
以下是客户端元数据端点响应的示例:
// In the client metadata endpoint
const clientIsThirdParty = isClientOriginDifferentFromTopFrame();
responseData = {
privacy_policy_url: "..."
terms_of_service_url: "...",
client_is_third_party_to_top_frame_origin: clientIsThirdParty,
}
当此属性设置为 true 且 RP 作为 iframe 嵌入到另一个网站上时,FedCM 对话框将同时显示顶级网域和 iframe 网域。这样可以为用户提供有关登录请求的更多背景信息。
client_is_third_party_to_top_frame_origin 的默认值为 false,因此现有实现不会受到此更改的影响。
如需了解更多详情,请参阅关于在身份提供方上实现 FedCM 的文档。
试试看
您可以在 fedcm-demo-rp.dev/iframe 上观看此功能的实时演示。代码托管在演示 GitHub 代码库中。
欢迎您就此功能和其他 FedCM 功能提供反馈。在 FedCM GitHub 代码库中分享您的想法并报告任何问题。