本指南可協助您瞭解 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
則不受影響。