FedCM 更新：Button Mode API 來源試用、CORS 和 SameSite

Eiji Kitamura

從 Chrome 125 起，Button Mode API 會啟動 來自電腦的流量試用。識別資訊提供者可透過 Button Mode API 運用 即使使用者在 API 呼叫時沒有有效的 IdP 工作階段，FedCM API 也不例外。 這樣一來，使用者就能透過聯合帳戶登入網站， 前往 IdP 網站。按鈕模式的 FedCM UI 更加醒目 受到使用者管制，因此與現有小工具流程相比 才能精確反映使用者登入的意圖。

按鈕模式 API

我們提供 FedCM 使用者介面的小工具，會顯示在右上方 或行動裝置的底部功能表。 也許使用者到達依賴方 (RP) 的時候這種訓練方式稱為 小工具模式。如要顯示小工具，使用者必須登入 IdP 才算出「受限的資料處理」模式FedCM 本來並沒有什麼可靠的方式 使用者先登入 IdP，然後才能登入 RP 即可使用 IdP 提供的帳戶，FedCM 即將新增一套做法。

全新的 Button Mode API 會新增名為按鈕模式的使用者介面模式。與 小工具模式下，按鈕模式不會在使用者到達 受限方。而是在使用者啟動登入流程時叫用。 例如按下「使用 IdP 登入」按鈕。

當使用者按下按鈕，FedCM 就會檢查使用者是否登入 透過擷取至帳戶的方式進行 IdP 端點 儲存在 Google 帳戶的登入狀態 瀏覽器。如果 使用者尚未登入，FedCM 會要求使用者使用 login_url敬上 系統會透過彈出式視窗顯示 IdP 服務。如果瀏覽器知道使用者 已登入 IdP，或是使用者透過 FedCM 開啟了強制回應對話方塊，讓使用者選擇 IdP 登入帳戶。選取帳戶後，使用者就能繼續登入 登入 RP 帳戶

在按鈕模式 UI 中，顯示的登入對話方塊會比 小工具模式，若要維持視覺一致性，就應該使用品牌宣傳圖示。 小工具模式的圖示大小下限為 25x25px， 按鈕模式中的圖示為 40x40pxIdP 的已知資訊 檔案 請指定多個圖示網址，如下所示：

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}

現在就親自體驗 Chrome 125 吧： https://fedcm-rp-demo.glitch.me/button_flow.

如何使用 Button Mode API：

• 在 chrome://flags 中啟用實驗性功能 FedCmButtonMode。
• 請務必叫用使用者暫時啟用背後的 API 例如點選按鈕
• 使用 mode 參數叫用 API，如下所示：

  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: "https://idp.example/config.json",
        clientId: "123",
        nonce:"456",
      }],
      mode: "button"
    }
  });

瀏覽器會將新參數傳送至 ID 斷言 端點 加入 mode=button 來表示要求類型：

POST /fedcm_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
account_id=123&client_id=client1234&nonce=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button

特徵偵測

如要判斷瀏覽器是否符合使用按鈕模式的資格，您可以 請使用下列程式碼檢查：

let supportsFedCmMode = false;
try {
  navigator.credentials.get({
    identity: Object.defineProperty(
      {}, 'mode', {
        get: function () { supportsFedCmMode = true; }
      }
    )
  });
} catch(e) {}

if (supportsFedCmMode) {
  // The button mode is supported.
}

使用其他帳戶選項

受限方可以允許使用者「使用其他帳戶」帳戶選擇工具中的名稱 例如 IdP 支援多個帳戶或取代現有帳戶時。

如要啟用其他帳戶的選項：

• 在 chrome://flags 中啟用實驗性功能 FedCmUseOtherAccount 或註冊 Button Mode API 來源試用。
• IdP 會在 IdP 設定中指定下列項目 檔案：

{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

參與來源試用

如要在本機試用 Button Mode API，請開啟 標記 Chrome 125 以上版本：chrome://flags#fedcm-button-mode。

IdP 也可以註冊來源試用來啟用按鈕模式：

• 註冊第三方來源試用 受限方。

你可以透過來源試用試用新功能，並對下列項目提供意見 可用性、實用性和有效性。適用對象 如需詳細資訊，請參閱網頁版來源試用指南 開發人員。

Button Mode API 來源試用是從 Chrome 第 125 版透過 Chrome 開始試用。 130.

1. 前往來源試用註冊頁面 頁面。
2. 按一下「Register」按鈕，並填寫表單以要求權杖。
3. 將 IdP 的來源輸入為「Web Origin」。
4. 檢查第三方比對，以在其他電腦上使用 JavaScript 插入權杖
5. 按一下 [提交]。
6. 將核發的權杖嵌入第三方網站。

如要將權杖嵌入第三方網站，請將下列程式碼新增至 IdP 的 從 IdP 來源提供的 JavaScript 程式庫或 SDK。

const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);

將 TOKEN_GOES_HERE 替換成您自己的權杖。

Chrome 125 將支援 CORS 和 SameSite=None

CORS

Chrome 就會強制執行 在 CORS 上進行 CORS 斷言 端點 開始使用 Chrome 125

CORS (跨源資源分享) 是包括傳輸資料的系統 HTTP 標頭，可判斷瀏覽器是否要封鎖前端 JavaScript 程式碼 防止存取跨來源要求的回應。當中的 ID 斷言端點 IdP 伺服器必須透過額外的標頭回應要求。 下列範例為對 https://fedcm-rp-demo.glitch.me：

Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true

SameSite=無

Cookie 的 SameSite 參數會宣告 Cookie 只能用於第一方或相同網站。只要指定 設定為 None，表示該 Cookie 可以傳送至第三方網域。

在 FedCM 中，Chrome 會將 Cookie 傳送至這些帳戶 端點 ID 斷言 端點 關節 端點。開始日期 Chrome 125，Chrome 只會使用 Cookie 傳送經過認證的要求 明確標示為 SameSite=None。