设置开发环境以实现 FedCM

若要设置环境以开始实现 FedCM,您需要在 Chrome 中的 IdP 和 RP 上都设置安全上下文(HTTPS 或 localhost)。

阻止第三方 Cookie

通过 Chrome 设置阻止第三方 Cookie
通过 Chrome 设置阻止第三方 Cookie

您可以在 Chrome 中测试 FedCM 在不使用第三方 Cookie 的情况下的运作方式。如需阻止第三方 Cookie,请使用无痕模式,或在桌面设备上前往 chrome://settings/cookies 选择“阻止第三方 Cookie”,或在移动设备上依次前往设置 > 网站设置 > Cookie 选择“阻止第三方 Cookie”。

在桌面设备上调试

我们正在努力改进使用开发者工具进行 FedCM 调试的体验。 在这些功能开发期间,您可以使用 chrome://net-export 网络请求日志:

  1. 导航到 chrome://net-export
  2. 选择“Include raw bytes”(包含原始字节),然后点击“Start Logging to Disk”(开始记录到磁盘)。系统提示时,选择要保存日志的位置。

    Net-export 工具界面:显示“Stat Logging to Disk”按钮,并且“Include raw bytes”复选框处于选中状态。
    Net-export 工具界面:开始
  3. 打开调用 FedCM 的页面,例如演示 RP

  4. 完成您要调试的 FedCM 流程(例如用户注册)。

  5. 前往 chrome://net-export,然后按“停止记录”。

    Net-export 工具界面:日志文件已写入,并显示了文件路径。
    Net-export 工具界面:已完成对磁盘的写入
  6. 使用您选择的日志查看工具打开日志,例如 NetLog 查看器

  7. 使用 NetLog 查看器时,请从左侧面板中选择 Events 并应用 type:URL_REQUEST 过滤条件。

在此示例中,日志显示系统向 accounts 端点发送了两个请求。之所以会出现这种情况,是因为用户在首次访问该页面时并未使用身份提供方 (IdP) 登录。URL_REQUEST_JOB_FILTERED_BYTES_READ 表示服务器在响应正文中返回了错误消息:{ error: "not signed in." }

Net-export 工具界面:响应正文中包含错误消息的日志。
Net-export 工具界面:错误响应

第二个 /accounts 请求成功,身份提供方响应了账号数据:

Net-export 工具界面:响应正文中包含账号数据的日志。
“Net-export”工具界面:包含账号数据的响应

Next steps

Review how to implement your identity solution with FedCM on the Identity Provider side.
Implement FedCM for your RPs and distribute the JavaScript SDK. Keep RPs up-to-date by eliminating the need for self-implementation.