无需登录 数据私有 本地保存

FedCM登录演示 - 联合身份管理流程

13
0
0
0
https://newsdaily.example.com
📰 NewsDaily
未登录 访客

👋 欢迎访问 NewsDaily

阅读最新资讯,个性化您的新闻体验。登录以获取专属内容推荐。

🔐 登录 NewsDaily

选择您的身份提供商(IdP)进行安全登录。此演示模拟 FedCM(联合身份管理) 流程。

由浏览器原生 FedCM API 保护您的隐私 · 无需第三方 Cookie
✅ 登录成功!
user@example.com

FedCM 流程已完成。IdP 已向本站发放身份令牌,用户身份已验证。

G
使用 Google 账号登录
newsdaily.example.com
此 IdP 将与本站共享您的姓名、邮箱和头像。 隐私政策 · 使用条款
FedCM 流程步骤
  • 1 用户点击 IdP 登录按钮
  • 2 浏览器调用 FedCM API
  • 3 IdP 返回可用账户列表
  • 4 用户选择账户并授权
  • 5 IdP 签发身份令牌 (Token)
  • 6 RP 验证令牌,完成登录
模拟控制台日志
--:--:--等待用户操作...
FedCM 常见问题与知识点

FedCM(原名 WebID)是 Google 提出的一项浏览器 API,旨在保护用户隐私的同时实现联合身份登录。它让浏览器成为用户、身份提供商(IdP)和依赖方(RP)之间的可信中介

与传统的 OAuth/OIDC 重定向流程不同,FedCM 由浏览器原生对话框来获取用户同意,防止跨站追踪。用户能清楚看到哪些信息将被共享,且整个过程无需依赖第三方 Cookie。

FedCM 是 Privacy Sandbox 计划的重要组成部分,Chrome 108+ 已正式支持。

特性传统 OAuth/OIDCFedCM
用户同意界面由 IdP 网页提供(可被伪造)浏览器原生 UI(防钓鱼)
跨站追踪风险较高(依赖重定向和 Cookie)极低(浏览器中介)
第三方 Cookie 依赖部分场景依赖完全不依赖
账户选择IdP 页面内选择浏览器对话框内选择
隐私声明IdP 自行展示浏览器统一展示

FedCM 通过以下机制保护隐私:

① 浏览器中介:所有 IdP 与 RP 之间的通信都经过浏览器,RP 无法直接联系 IdP,防止隐蔽追踪。
② 明确用户同意:浏览器显示原生对话框,清晰列出要共享的信息,用户必须主动点击"继续"。
③ 无第三方 Cookie:FedCM 不依赖第三方 Cookie,消除了主要的跨站追踪途径。
④ 定向令牌:每个 RP 获得独立的令牌,无法跨站关联用户身份。
⑤ IdP 登录状态 API:IdP 可告知浏览器用户登录状态,但浏览器不会向 RP 泄露此信息,除非用户同意。

  • Google Chrome 108+(2022年12月发布):✅ 完整支持
  • Microsoft Edge 108+✅ 完整支持(基于Chromium)
  • Mozilla Firefox🟡 积极评估中,已参与标准讨论
  • Safari / WebKit⚪ 尚未明确支持计划
  • 移动端 Chrome Android✅ 支持

IdP 需要完成以下配置:

1. 提供 .well-known/fedcm.json(必需):
{
  "accounts_endpoint": "/fedcm/accounts",
  "client_metadata_endpoint": "/fedcm/client-metadata",
  "id_assertion_endpoint": "/fedcm/assertion",
  "login_url": "/login"
}
2. 实现三个端点:账户列表端点、客户端元数据端点、断言签发端点。
3. 设置 Sec-Fetch-Dest: webidentity 响应头以确认 FedCM 请求。
4. 可选:实现 IdentityProvider.login()logout() 以支持登录状态API。

RP 端调用非常简单,使用 navigator.credentials.get()
const credential = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: 'https://idp.example.com/.well-known/fedcm.json',
      clientId: 'rp-client-id',
      nonce: 'random-nonce'
    }]
  }
});
// credential.token 包含 IdP 签发的身份令牌
// 将 token 发送到 RP 后端验证
浏览器会自动处理账户选择对话框、用户同意和令牌获取。

Google 计划在 2025 年淘汰 Chrome 中的第三方 Cookie。FedCM 是替代方案之一,专门解决联合登录场景:

• 传统联合登录常依赖第三方 Cookie 实现静默登录检测和 SSO。
• FedCM 提供了不依赖 Cookie 的替代机制,包括登录状态API。
• 对于非登录场景的身份需求,还有 Storage Access APICHIPS 等补充方案。
• FedCM 是 Privacy Sandbox 生态中的关键组件,确保联合身份在无第三方 Cookie 的世界中依然可用。

FedCM 支持两种主要模式:

① 按钮模式(Button Mode):用户点击 RP 页面上的"使用XX登录"按钮后触发。这是最常见的模式,本演示即模拟此模式。
② 自动重新认证模式(Auto-reauthentication):用户之前已授权,返回时浏览器可自动获取令牌而无需再次弹出对话框。需要用户之前已明确同意。

此外,Chrome 还在实验多 IdP 同时请求Continuation API等高级特性。