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

Eiji Kitamura

自 Chrome 125 版起，Button Mode API 將於電腦版展開來源試用。透過 Button Mode API，識別資訊提供者可以使用 FedCM API，即使其使用者在 API 呼叫時沒有運作中的 IdP 工作階段也一樣。使用者隨後就能使用聯合帳戶登入網站，而不必前往 IdP 網站。與現有小工具流程中的 FedCM UI 相比，按鈕模式中的 FedCM UI 比現有小工具流程更顯眼，因為它受使用者手勢限制，可以更準確地反映使用者的登入意圖。

按鈕模式 API

FedCM 使用者介面能以小工具形式顯示在電腦右上角或行動版底部，只要使用者到達依賴方 (RP) 即可，就會立即以底部功能表的形式顯示。這就是所謂的小工具模式。如要顯示小工具，使用者必須登入 IdP，才抵達 RP。因此，FedCM 本身並沒有可靠的方式，讓使用者必須先登入 IdP，才能讓他們使用 IdP 上的帳戶登入 RP。FedCM 即將新增一套程序。

透過小工具模式，電腦版 Chrome 的右上角會顯示一個對話方塊，使用者不需啟動即可存取。

新的 Button Mode API 新增了名為「按鈕」模式的 UI 模式。與小工具模式不同的是，按鈕模式不應在使用者抵達 RP 後立即叫用。而是在使用者啟動登入流程 (例如按下「使用 IdP 登入」按鈕) 時叫用。

按下按鈕後，FedCM 就會檢查使用者是否透過擷取至帳戶端點或儲存在瀏覽器的登入狀態來登入 IdP。如果使用者尚未登入，FedCM 會要求使用者透過彈出式視窗，使用 IdP 提供的 login_url 登入 IdP。如果瀏覽器知道使用者已登入 IdP，或是在使用者於彈出式視窗登入 IdP 之後，FedCM 會開啟強制回應對話方塊，讓使用者選擇要用來登入的 IdP 帳戶。選取帳戶之後，使用者就能繼續使用 IdP 帳戶登入 RP。

啟用按鈕模式後，Chrome 電腦版的正上方會顯示強制回應對話方塊。

前往 https://fedcm-rp-demo.glitch.me/button_flow 試用 Chrome 125 體驗。

使用者正透過 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"。Chrome 推出這項功能後，會新增其他屬性 (例如 "widget")。

瀏覽器會藉由加入 mode=button，將新參數傳送到代表要求類型的 ID 斷言端點：

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，如此一來，即使向 RP 顯示使用者的 IdP 登入狀態，也不必擔心。

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

使用其他帳戶選項

RP 可讓使用者在帳戶選擇工具中「使用其他帳戶」，例如 IdP 支援多個帳戶或取代現有帳戶時。

如何啟用使用其他帳戶的選項：

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

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

參與來源試用

您可以在 Chrome 125 以上版本中開啟 Chrome 旗標 chrome://flags#fedcm-button-mode，在本機試用 Button Mode API。

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

• 為 RP 註冊第三方來源試用。

來源試用可讓您試用新功能，並向網路標準社群的可用性、實用性和成效提供意見回饋。詳情請參閱網頁開發人員的來源試用指南。

Button Mode API 來源試用可在 Chrome 125 到 Chrome 127 期間使用。

1. 前往來源試用註冊頁面。
2. 按一下「Register」按鈕，然後填寫表單來申請權杖。
3. 輸入 IdP 的來源做為「Web Origin」。
4. 檢查第三方比對，在其他來源上透過 JavaScript 插入權杖。
5. 點選「提交」。
6. 將核發的權杖嵌入第三方網站。

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

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

將 TOKEN_GOES_HERE 改成您自己的權杖。

注意： 如果 RP 叫用 FedCM API (不是透過從 IdP 載入的指令碼) 叫用，RP 就必須自行註冊來源，並執行第一方來源試用。

Chrome 125 將需要 CORS 和 SameSite=None

CORS

自 Chrome 125 版起，Chrome 將對 ID 斷言端點強制執行 CORS。

CORS (跨源資源共用) 是一個系統，由傳輸 HTTP 標頭組成，可判斷瀏覽器是否要封鎖前端 JavaScript 程式碼，使其無法存取跨來源要求的回應。IdP 伺服器上的 ID 斷言端點，必須使用其他標頭回應要求。以下是 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 是否受第一方或同網站使用的限制。只要將 Cookie 指定為 None，即可將 Cookie 傳送至第三方網域。

在 FedCM 中，Chrome 會將 Cookie 傳送至帳戶端點、ID 斷言端點和中斷連線端點。從 Chrome 125 版開始，Chrome 會傳送這些憑證要求，且只有 Cookie 會明確標示為 SameSite=None。