設定開發環境以實作 FedCM

如要設定環境以開始實作 FedCM,您需要在 Chrome 中的 IdP 和 RP 上建立安全內容 (HTTPS 或 localhost)。

封鎖第三方 Cookie

在 Chrome 設定中封鎖第三方 Cookie
在 Chrome 設定中封鎖第三方 Cookie

您可以測試 FedCM 在 Chrome 上不使用第三方 Cookie 的運作情況。如要封鎖第三方 Cookie,請使用無痕模式,或是在電腦上前往 chrome://settings/cookies 的「設定」>「網站設定」>「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 tool 介面:開始
  3. 開啟會呼叫 FedCM 的頁面,例如 demo RP

  4. 完成要偵錯的 FedCM 流程 (例如使用者註冊)。

  5. 前往 chrome://net-export,然後按下「停止記錄」。

    Net-export 工具介面:記錄檔已寫入,並顯示檔案路徑。
    Net-export tool 介面:已完成寫入磁碟的記錄
  6. 使用您選擇的記錄檢視工具開啟記錄,例如 NetLog 檢視器

  7. 使用 NetLog 檢視器時,請從左側面板選取 Events,然後套用 type:URL_REQUEST 篩選器。

在這個範例中,記錄顯示有兩個要求傳送至 accounts 端點。這是因為使用者首次造訪網頁時,並未透過 IdP 登入。URL_REQUEST_JOB_FILTERED_BYTES_READ 表示伺服器在回應本文中回應錯誤訊息:{ error: "not signed in." }

Net-export 工具介面:回應主體中含有錯誤訊息的記錄。
Net-export tool 介面:錯誤回應

第二個 /accounts 要求成功,IdP 回應了帳戶資料:

Net-export 工具介面:回應本文含有帳戶資料的記錄。
Net-export tool 介面:含有帳戶資料的回應

後續步驟

瞭解如何在識別資訊提供者端,透過 FedCM 導入識別資訊解決方案。
為 RP 實作 FedCM,並發布 JavaScript SDK。無需自行實作,即可讓 RP 保持最新狀態。