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 即將新增一套做法。

透過小工具模式，使用者無須啟用 Chrome 電腦版後，右上角就會顯示對話方塊。

全新的 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 電腦版的頂端中央會顯示強制回應對話方塊，並加大圖示。

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

使用者透過 Button Mode API 登入 RP。

如何使用 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"
    }
  });

注意： Chrome 目前僅支援新的 mode 資源中的 "button"。其他 "widget" 等屬性會在 Chrome 推出這項功能後新增。

瀏覽器會將新參數傳送至 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

注意： 發生問題時，使用按鈕模式進行 FedCM API 呼叫 會立即回應，而使用小工具模式時，它會延遲回應 。這是因為使用者向 IdP 的登入狀態 並盡快傳送錯誤信號給 RP 使用者的 IdP 登入狀態提示。使用按鈕模式時，系統會提示使用者 登入 IdP 後，系統仍會提供使用者的 IdP 登入，並不會受到影響 狀態變更為 RP。

注意： 使用者可以在 Chrome 中停用 FedCM 小工具模式 設定。這並不 會影響 Button Mode API，因為登入要求是由使用者啟動 手勢和瀏覽器應協助使用者完成登入流程。

特徵偵測

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

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 替換成您自己的權杖。

注意： 如果 RP API 叫用 FedCM API，而不是從 IdP 載入的指令碼， 受限方必須自行登錄來源並執行第一方來源 試用期。

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

注意： 由於 Access-Control-Allow-Credentials 設為 True， Access-Control-Allow-Origin 必須明確傳回網域，且不得使用 萬用字元 (以 * 表示)。

SameSite=無

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

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