遷移至 FedCM

本指南可協助您瞭解 Federated Credentials Management API (FedCM) 導入的網頁應用程式變更。

FedCM 啟用後,瀏覽器會顯示使用者提示,且不會使用第三方 Cookie。

總覽

網頁版 Privacy SandboxChrome 移除網路上的第三方 Cookie,Google Identity 服務和使用者登入程序將有重大異動。

FedCM 可讓您進行更私密的登入流程,而不必使用第三方 Cookie。瀏覽器會控制使用者設定、顯示使用者提示,並在取得使用者明確同意後,才與識別資訊提供者 (例如 Google) 聯絡。

大多數網站都能透過 Google Identity 服務 JavaScript 程式庫的回溯相容性更新,流暢地進行遷移作業。

事前準備

請確認您的瀏覽器和瀏覽器版本支援 FedCM API,並在必要時更新至最新版本。

在封鎖第三方 Cookie 的登入流程之前,請開啟 chrome://flags 並啟用實驗性 FedCmWithoutThirdPartyCookies 功能。只有在其成為預設為止,才需要執行這個步驟。此外,你必須在 Chrome 中啟用第三方登入設定。

遷移網頁應用程式

請按照下列步驟啟用 FedCM、評估遷移可能的影響,以及視需要變更現有網頁應用程式:

  1. 新增布林值標記,以便在初始化時啟用 FedCM:

  2. 移除 PromptMomentNotication 物件中傳回的 opt_out_or_no_session 值。

    為進一步保護使用者隱私,google.accounts.id.prompt 回呼不再傳回與使用者設定或工作階段狀態相關的結果。

  3. 更新使用者流程和網站程式碼,以處理 isDisplayMoment() 事件的延遲通知。

    為了進一步保護使用者隱私,顯示時刻通知會在 FedCM 啟用時刻意延遲一段時間。通知在實際事件發生後最多 1 分鐘內即可收到通知。使用 isDisplayMoment 有條件地顯示提示或觸發使用者互動時,請仔細考量使用者體驗設計中的可變時間長度。

  4. data-prompt_parent_idintermediate_iframes移除 position 樣式屬性。

    瀏覽器會控制使用者提示的大小和位置,但不支援 One Tap 的自訂位置。

  5. 視需要更新網頁版面配置。

    瀏覽器可控制使用者提示的大小和位置。視個別頁面的版面配置而定,某些內容可能會重疊顯示。

    在重要資訊遭到遮蓋時,變更頁面版面配置,改善使用者體驗。

  6. 如果網頁應用程式從跨來源 iframe 呼叫 One Tap API,請新增 allow="identity-credentials-get" 屬性至上層頁框。

    如果 iframe 的來源與上層來源不同,系統會將 iframe 視為跨來源。例如:

    • 不同網域:https://example1.comhttps://example2.com
    • 不同的頂層網域:https://example.ukhttps://example.jp
    • 子網域:https://example.comhttps://login.example.com

    為進一步保護使用者隱私,當從跨來源 iframe 呼叫 One Tap API 時,您必須在每個上層頁框 iframe 標記中加入 allow="identity-credentials-get" 屬性:

    <iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>
    

    如果您的應用程式使用包含其他 iframe 的 iframe,您必須確保該屬性已新增至每個 iframe,包括所有子 iframe。

    我們舉以下情境為例:

    • 上方文件 (https://www.example.uk) 包含名為「iframe A」的 iframe,用於嵌入網頁 (https://logins.example.com)。

    • 這個嵌入頁面 (https://logins.example.com) 也包含名為「iframe B」的 iframe,可進一步嵌入代管 One Tap 的網頁 (https://onetap.example2.com)。

    為確保 One Tap 可正確顯示,您必須將屬性同時加入 iframe A 和 iframe B 代碼。

  7. 將這些指令新增至內容安全政策 (CSP)。

    由於並非所有網站都選擇定義 CSP,因此這是選用步驟。

  8. 移除 Accelerated Mobile Pages (AMP) 登入支援功能。

    AMP 的使用者登入支援是網頁應用程式已實作的 GIS 選用功能。出現這種情況時

    刪除所有參照下列項目:

    • amp-onetap-google 自訂元素,以及

    • <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>

    考慮將登入要求從 AMP 重新導向至網站的 HTML 登入流程。請注意,相關的 Intermediate Iframe Support API 則不受影響。