FedCM联合身份管理实现教程

FedCM 是一个受限制的 Web API，设计上禁止声明式调用。浏览器会直接忽略任何试图在 HTML 中“绑定” FedCM 的写法，比如：

<button onclick="navigator.credentials.get({federated: {...}})">登录</button>

这段代码即使写出来，也会因缺少运行时权限检查、未处理 Promise 拒绝、未适配用户手势（如 click）而失败。常见错误现象包括：

• SecurityError: Failed to execute 'get' on 'CredentialsContainer': The user gesture is required
• TypeError: Cannot read properties of undefined (reading 'get')（navigator.credentials 为 undefined，因未启用 FedCM 或环境不满足）
• 点击后无响应，控制台静默（尤其在 localhost 以外的 HTTP 环境）

必须用 JavaScript 调用 navigator.credentials.get() 并处理 federated 选项

真实可行的最小可运行路径是：监听用户点击 → 检查 navigator.credentials 和 FedCm 支持 → 构造合法 federated 对象 → 调用 get() 并 await 响应。

关键参数差异和注意事项：

• providers 数组必须包含至少一个符合格式的 URL（如 "https://accounts.google.com"），不能是域名或相对路径
• protocol 字段目前仅支持 "openidconnect"（Chrome 123+），旧版可能忽略该字段但不报错
• 必须显式传入 mediation: "optional" 或 "required"，否则 Chrome 可能拒绝调用
• 整个流程需包裹在 try/catch 中，因为用户取消、网络失败、RP 配置错误都会导致 Promise reject

示例片段（需部署在 HTTPS 下）：

document.getElementById("fedcm-btn").addEventListener("click", async () => {
  if (!navigator.credentials || !navigator.credentials.get) return;
  try {
    const cred = await navigator.credentials.get({
      federated: {
        providers: ["https://accounts.google.com"],
        protocol: "openidconnect",
        mediation: "optional"
      }
    });
    console.log(cred); // { id, name, iconURL, provider }
  } catch (err) {
    console.error("FedCM failed:", err.name, err.message);
  }
});

FedCM 在 Chrome 中启用需要额外配置，不是“写了就能用”

即使代码正确，FedCM 在 Chrome 中默认仍处于实验性阶段，需手动开启或依赖特定条件：

• 本地开发必须使用 localhost 或 HTTPS，HTTP/127.0.0.1:xxx 会被静默禁用
• Chrome 119+ 默认启用，但若用户关闭了 chrome://flags/#enable-federated-credentials-management-api，API 就不可用
• Relying Party（你的网站）需在 Google Cloud Console 注册 OAuth 2.0 凭据，并在 https://console.cloud.google.com/apis/credentials 中配置 Authorized JavaScript origins（必须精确匹配，含协议和端口）
• Google Identity Services（GIS）SDK 已弃用 FedCM 直接集成方式；当前推荐路径是：先用 GIS 获取 token，再配合 FedCM 做凭据缓存与自动填充，而非单靠 FedCM 完成首次登录

真正卡住多数人的不是语法，而是把 FedCM 当作“HTML 插件”来用——它本质是 JS 驱动的身份协商协议层，依赖服务端 OIDC 配置、客户端运行时策略、以及浏览器对 RP 的信任链。漏掉任一环，navigator.credentials.get 就只是返回 undefined 或抛出模糊错误。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。