遷移至 FedCM

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

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

總覽

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

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

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

事前準備

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

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

遷移網頁應用程式

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

新增布林值標記，以便在初始化時啟用 FedCM：
- HTML，將 data-use_fedcm_for_prompt 屬性設為 true。
- JavaScript，請在 IdConfiguration 物件中將 use_fedcm_for_prompt 設為 true。
移除 PromptMomentNotication 物件中傳回的 opt_out_or_no_session 值。

為進一步保護使用者隱私，google.accounts.id.prompt 回呼不再傳回與使用者設定或工作階段狀態相關的結果。
更新使用者流程和網站程式碼，以處理 isDisplayMoment() 事件的延遲通知。

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

瀏覽器會控制使用者提示的大小和位置，但不支援 One Tap 的自訂位置。
視需要更新網頁版面配置。

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

在重要資訊遭到遮蓋時，變更頁面版面配置，改善使用者體驗。
如果網頁應用程式從跨來源 iframe 呼叫 One Tap API，請新增 allow="identity-credentials-get" 屬性至上層頁框。

如果 iframe 的來源與上層來源不同，系統會將 iframe 視為跨來源。例如：
- 不同網域：https://example1.com 和 https://example2.com
- 不同的頂層網域：https://example.uk 和 https://example.jp
- 子網域：https://example.com 和 https://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 代碼。
將這些指令新增至內容安全政策 (CSP)。

由於並非所有網站都選擇定義 CSP，因此這是選用步驟。
移除 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 則不受影響。