Web Development General Discussion

您的社交登入按鈕依賴第三方 Cookie。FedCM 不需要。

社交登入仰賴逐漸消失的 Cookie。FedCM 是瀏覽器原生替代方案，旨在保護隱私並提升網站轉換率。

The New Stack · Jul 2, 2026

Your social login buttons run on third-party cookies. FedCM doesn’t.

「使用 Google 登入」和「使用 Apple 繼續」已支援聯合登入超過十年。它們消除了註冊流程的摩擦，解決了密碼疲勞問題，並將匿名流量轉換為帳戶，這也是它們幾乎出現在所有消費者註冊頁面的原因。問題出在它們背後的運作機制。

這些按鈕依賴第三方 Cookie。傳統社交登入流程仰賴隱私監管機構多年來試圖封鎖的跨域機制。

「傳統社交登入流程仰賴隱私監管機構多年來試圖封鎖的跨域機制。」

Safari 自 2020 年起預設封鎖第三方 Cookie（智慧追蹤防護），Firefox 自 2019 年起也開始封鎖（增強追蹤保護），這已使約一半的網路處於無 Cookie 狀態。

Chrome 的情況較為複雜：Google 於 2024 年撤回了強制淘汰計畫，改採使用者選擇模式而非直接切換，因此原本大家為之制定路線圖的「Cookie 末日」期限並未如期到來。但這並不代表可以鬆懈。目前已有兩個主要瀏覽器引擎預設封鎖，Chrome 隱身模式也預設封鎖；廣告攔截器與同意疲勞持續攀升；Cookie 正因自然淘汰而逐漸消失。任何建立在 Cookie 上的登入流程都已走到盡頭。

FedCM（Federated Credential Management）是為了在該機制消失後仍能維持聯合登入而設計的標準。W3C 與主要瀏覽器引擎將其開發為瀏覽器原生 API，能在無跨站追蹤的情況下執行聯合身份驗證流程。

實際運作方式

這是一場架構上的轉變。在傳統流程中，點擊社交按鈕會觸發隱藏的 iframe、重新導向或彈出視窗，讓身份提供者讀取自己的 Cookie 並確認使用者身分。同樣的通道也讓 IdP 能夠跨網站追蹤使用者。FedCM 則將瀏覽器置於中間，作為受信任的仲介。

網站透過一次明確的 API 呼叫 navigator.credentials.get() 請求身份權杖，接下來由瀏覽器處理：

網站向瀏覽器請求身份權杖。
瀏覽器從 IdP 託管的設定檔中取得帳戶詳細資料，該檔案與提出請求的網站保持隔離。
瀏覽器顯示原生登入提示，而非彈出視窗。
在使用者明確同意後，瀏覽器將權杖傳回網站後端以建立工作階段。

驗證與被動追蹤因此被解耦。（更多 API 資訊請參閱 FedCM 規格與 MDN 文件。）

它同時解決了 NASCAR 問題。多年來不斷新增所有可用的社交登入，導致註冊頁面堆滿競爭品牌按鈕，這相當於註冊版的貼滿贊助商貼紙的賽車。這會造成認知負擔，而認知負擔會降低轉換率。

「FedCM 跳過一整排按鈕，直接在單一原生提示中顯示正確的帳戶。」

由於瀏覽器已知道您上次使用的提供者，FedCM 會跳過按鈕牆，直接在單一原生提示中顯示正確的帳戶。

傳統流程 vs. FedCM

實際效益在於轉換率。每多一次點擊、每一次被中斷的重新導向，都會讓部分嘗試註冊的使用者流失，而行動瀏覽器經常會封鎖傳統流程依賴的次要視窗。單一原生提示可消除這種流失。

「每多一次點擊、每一次被中斷的重新導向，都會讓部分嘗試註冊的使用者流失，而行動瀏覽器經常會封鎖傳統流程依賴的次要視窗。」

此外還有維護層面的優勢：標準化的瀏覽器 UI 讓團隊不必再自行建置與維護客製化登入元件，而流程可透過瀏覽器更新升級，而非每次都需要重構。

實際應用案例

Axel Springer 在 Ory 上為數億使用者執行 FedCM。該公司產品與營收總監 Thomas Bergemann 直言：「我們看到註冊數量增加了 15 倍以上。」（閱讀案例研究。）

Google 自身對瀏覽器中介登入的測試也顯示相同結果：移除容易被行動裝置封鎖的突兀次要視窗步驟，可降低使用者流失。

Shopify 早在 Cookie 變更之前就已轉向瀏覽器中介身份驗證，並在嚴格的隱私導向行動瀏覽器上維持結帳轉換率穩定——這些正是傳統流程容易悄悄失效的環境。

使用 Ory 開始

步驟 1：將後端置於 CIAM 平台之後。 不要自行開發。Ory Kratos 原生處理 FedCM 的後端部分，將瀏覽器端的身份宣告轉換為安全的用戶工作階段。（請參閱 Ory FedCM 部署文件。）

步驟 2：設定您的社交登入提供者。 在 Ory Console 中開啟「社交登入」面板，選擇您的 IdP 並輸入其 FedCM Config URL。後台信任驗證將由系統自動處理。

步驟 3：嵌入 JavaScript 觸發程式。 在登入頁面加入輕量程式碼片段，以偵測支援情況並在不支援時順利降級：

if ('IdentityCredential' in window) {
  navigator.credentials.get({
    identity: {
      providers: [{
        configURL: 'https://auth.your-business.com/self-service/methods/oidc/fedcm/google',
        clientId: 'YOUR_CLIENT_ID',
      }]
    }
  }).then((credential) => {
    return fetch('/self-service/methods/oidc/fedcm/login', {
      method: 'POST',
      body: JSON.stringify({ token: credential.token })
    });
  }).catch((err) => {
    console.error('FedCM flow interrupted, fallback to traditional OIDC:', err);
  });
}

若瀏覽器不支援 FedCM，流程會自動降級至標準 OpenID Connect 重新導向，確保遷移期間不會有使用者被鎖在外面。若想在連接真實 IdP 之前先行測試，可使用免費 MockFedCM 網站。

對您的影響

聯合登入正移向瀏覽器，隱私模型也隨之改變。Safari 與 Firefox 已預設封鎖；Chrome 則是讓 Cookie 逐漸流失，而非直接終結。無論哪條路，都不會讓您的社交登入維持現狀。

現在正在審核驗證堆疊的團隊，將不會在日後被迫於他人時間表上除錯損壞的登入迴圈。最好是按照自己的時程進行遷移，而不是等瀏覽器強制執行。

YOUTUBE.COM/THENEWSTACK

科技發展迅速，別錯過任何一集。訂閱我們的 YouTube 頻道，即可觀看所有 podcast、訪談、示範等內容。

Group Created with Sketch.

Read the original source

#Frontend