当前位置：首页 > 文章列表 > 文章 > 前端 > FedCM联合身份管理实现教程

FedCM联合身份管理实现教程

2026-05-29 23:21:44 0浏览收藏

FedCM联合身份管理并非HTML可直接调用的“开箱即用”功能，而是一个严格受限的JavaScript API——它必须在HTTPS安全上下文中、由用户手势（如点击）触发，通过`navigator.credentials.get()`显式调用，并依赖正确的providers配置、OIDC服务端信任链及浏览器策略支持；任何试图用纯HTML标签或属性实现FedCM登录的做法都会失败，真正落地的关键在于理解其作为协议层的本质：它不是前端语法糖，而是连接客户端行为、运行时环境、浏览器安全机制与后端身份服务的精密协同系统。

html制作FedCM联合身份管理_html FedCM Federated Credential联合登录【推荐】

目前无法用纯 HTML 实现 FedCM（Federated Credential Management API）联合登录——它必须由 JavaScript 主动调用，且只在安全上下文（HTTPS + 顶级浏览上下文）中可用，FedCm 不是 HTML 属性或标签，也没有这类原生元素。

为什么

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学习网公众号。