本指南可協助您瞭解網頁應用程式的變更 導入 Federated Credentials Management API (FedCM)。
啟用 FedCM 後,瀏覽器會顯示使用者提示,但沒有任何第三方 Cookie 的用途。
總覽
FedCM 支援更私密的登入流程,不必使用 第三方 Cookie瀏覽器會控制使用者設定、顯示使用者提示 且只有在明確使用者後,才與識別資訊提供者 (例如 Google) 聯絡 同意聲明狀態。
大多數網站會透過回溯相容的方式,順暢執行遷移作業 Google Identity Services JavaScript 程式庫的更新內容。
自動登入功能最新消息
Google Identity 服務的聯合憑證管理 (FedCM) Beta 版 已於 2023 年 8 月推出許多開發人員測試 API 後已提供 寶貴意見。
Google 向開發人員表示 FedCM 的自動登入問題 使用者手勢需求為進一步保護隱私權,Chrome 會要求使用者執行下列操作: 再次確認他們想用 Google 帳戶登入網站 Chrome 的情況 (即使使用者在 FedCM 之前已核准網站) 只要按一下滑鼠, 輕觸一下提示,展現使用者登入意圖。這項變更可能會導致 一些網站的自動登入轉換率最初中斷。
最近在 M121 中,Chrome 對 FedCM 自動登入功能進行了變更 以及流程使用者體驗只有在第三方 Cookie 處於停用狀態時,您才需要重新確認 受到限制。因此:
使用 FedCM 自動登入功能時,回訪者不需重新確認。 如果使用者透過 FedCM UI 再次確認,這項重新確認行為會計入 3PCD 時代至今的使用者手勢需求。
FedCM 自動登入功能會在 第三方 Cookie 目前則是由使用者手動限制,或是在 未來推出的 Chrome 瀏覽器。
為因應這項異動,我們建議所有自動登入開發人員改用 FedCM ,以減少自動登入轉換率造成的干擾。
針對自動登入流程,GIS JavaScript 不會在較舊的 Android 裝置上觸發 FedCM Chrome (M121 以下版本),即使您的網站選擇啟用 FedCM。
使用者歷程差異
採用 FedCM 和無 FedCM 的 One Tap 體驗, 有些微差異
單一工作階段新使用者
One Tap 採用 FedCM 時會顯示網域名稱,而非應用程式名稱。
使用 FedCM | 不使用 FedCM |
---|---|
|
|
單一工作階段回訪者 (已停用自動登入)
One Tap 採用 FedCM 時會顯示網域名稱,而非應用程式名稱。
使用 FedCM | 不使用 FedCM |
---|---|
|
|
單一工作階段回訪者 (已啟用自動登入功能)
透過 FedCM,使用者可以點選「X」,在 5 天內取消自動登入程序 而不是按一下「Cancel」按鈕。
使用 FedCM | 不使用 FedCM |
---|---|
|
|
多工作階段
One Tap 採用 FedCM 時會顯示網域名稱,而非應用程式名稱。
使用 FedCM | 不使用 FedCM |
---|---|
|
|
事前準備
檢查瀏覽器設定和版本是否支援 FedCM API。 建議更新至最新版本
FedCM API 適用於 Chrome 117 以上版本。
Chrome 已啟用第三方登入設定。
如果 Chrome 瀏覽器為 119 以下版本,請開啟
chrome://flags
並 啟用實驗性FedCmWithoutThirdPartyCookies
功能。這個步驟 則不需要使用 Chrome 瀏覽器 120 以上版本。
遷移網頁應用程式
請按照下列步驟啟用 FedCM、評估可能的遷移影響,並 如果需要對現有網頁應用程式進行變更:
1. 新增布林值標記,使用以下項目進行初始化時啟用 FedCM:
HTML 方法:將
data-use_fedcm_for_prompt
屬性設為true
。JavaScript,請將
use_fedcm_for_prompt
設為true
IdConfiguration
物件。
2. 移除在程式碼中使用 isDisplayMoment()
、isDisplayed()
、isNotDisplayed()
和 getNotDisplayedReason()
方法的方式。
為了進一步保護使用者隱私,google.accounts.id.prompt
回呼否
時間上限,則會傳回
PromptMomentNotication
物件。移除任何相依於
顯示時刻相關方法。包括 isDisplayMoment()
、isDisplayed()
、
isNotDisplayed()
和 getNotDisplayedReason()
方法
3. 移除在程式碼中使用 getSkippedReason()
方法的情況。
雖然略過時刻 isSkippedMoment()
,但系統還是會從
PromptMomentNotication
中的 google.accounts.id.prompt
回呼
系統就不會提供詳細的理由移除任何相依的程式碼
從程式碼中導入 getSkippedReason()
方法。
請注意,已關閉時刻通知、isDismissedMoment()
和
相關的詳細原因方法 getDismissedReason()
維持不變
已啟用 FedCM 時
4. 從 data-prompt_parent_id
和 intermediate_iframes
移除 position
樣式屬性。
瀏覽器可控制使用者提示的大小和位置、自訂位置 不支援電腦版 One Tap。
5. 視需要更新網頁版面配置。
瀏覽器會控制使用者提示的大小和位置。取決於
也就是個別網頁的版面配置,某些內容可能會疊加為自訂內容
皆不支援透過任何方式,例如電腦版的 One Tap 應用程式
樣式屬性、data-prompt_parent_id
、
intermediate_iframes
、自訂 iframe 和其他創意功能。
變更網頁版面配置,改善使用者接收重要資訊時的體驗 圖片就會模糊不清不要以 One Tap 提示打造使用者體驗 就會採用預設位置由於 FedCM API 採用瀏覽器中介 不同的瀏覽器供應商可能會稍微將提示位置 有差異。
6. 如果網頁應用程式從跨來源 iframe 呼叫 One Tap API,請新增 allow="identity-credentials-get"
屬性至上層頁框。
如果 iframe 包含 origin 不同於 父項來源。例如:
- 不同的網域:
https://example1.com
和https://example2.com
- 不同的頂層網域:
https://example.uk
和https://example.jp
子網域:
https://example.com
和https://login.example.com
為了加強使用者隱私,如果跨來源 iframe 呼叫 One Tap API, 必須新增
allow="identity-credentials-get"
敬上 屬性。iframe
<iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>
如果您的應用程式使用含有其他 iframe 的 iframe,您就必須 請確認所有 iframe 均已新增該屬性,包括所有子 iframe。
我們舉以下情境為例:
頂端文件 (
https://www.example.uk
) 含有名為「iframe」的 iframe A」,嵌入網頁 (https://logins.example.com
)。這個嵌入網頁 (
https://logins.example.com
) 也包含 iframe 「iframe B」進一步嵌入了網頁 (https://onetap.example2.com
) 。為確保 One Tap 能正常顯示,請務必新增這項屬性 新增至 iframe A 和 iframe B 代碼
對於未顯示 One Tap 提示的問題,請做好準備。 來源不同的其他網站可能會嵌入代管 One Tap 的網頁 放在 iframe 中您可能會收到更多支援單 使用者或其他網站擁有者並未看到有關 One Tap 的顯示訊息。雖然 只有網站擁有者能夠在自己的網頁上更新, 以減少影響:
更新開發人員說明文件,包括設定 iframe 呼叫您的網站。您可以在說明文件中提供這個頁面的連結。
視情況更新開發人員常見問題頁面。
通知支援團隊這項即將生效的異動,並為回應做好準備 以便預先釐清問題
主動聯絡受影響的合作夥伴、客戶或網站擁有者 順利進行 FedCM 轉換。
7. 將這些指令新增至內容安全政策 (CSP)。
此為選用步驟,因為並非所有網站都會選擇定義 CSP。
如果網站未使用 CSP,則無須進行任何變更。
如果您的 CSP 支援目前的 One Tap 功能,但未使用
connect-src
,frame-src
、script-src
、style-src
或default-src
沒有變更 。否則,請按照這份指南設定 CSP。沒有適當的 CSP 設定,FedCM One Tap 不會顯示在網站上。
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
是 不受影響。
測試並驗證遷移作業
根據上述步驟完成必要變更後,您可以驗證 遷移成功。
確認瀏覽器支援 FedCM,且您已擁有 Google 帳戶工作階段。
前往應用程式中的 One Tap 頁面。
確認畫面上顯示 One Tap 提示並安全地疊加基礎 內容。
確認是否已將正確的憑證傳回端點或回呼方法 。
如果已啟用自動登入功能,請確認取消作業是否正常運作且正確無誤 正確的憑證會傳回您的端點或回呼方法。
One Tap 等待期
按一下「One Tap」圖示
即可關閉提示並進入等待期 讓 One Tap 提示暫時不顯示。使用 Chrome 時 如果希望在等待期結束前再次顯示 One Tap 提示, 可以重設等待期狀態,方法是按一下網址列中的鎖頭圖示,然後 按一下「重設權限」按鈕。自動登入安靜期
使用 FedCM 測試自動登入 One Tap 功能時,系統會進行 10 分鐘的測試 。安靜期無法 重設。你必須等待 10 分鐘,或改用其他 Google 帳戶 以便再次觸發自動登入程序。
實用資源
Privacy Sandbox Analysis Tool (PSAT) 是 Chrome 開發人員工具擴充功能 ,協助您採用 FedCM 等替代 API。運作方式如下: 掃描您的網站是否有受到影響的功能,並提供 並輸入變更內容