本頁說明「使用 Google 帳戶登入」按鈕的使用者體驗 (UX)。
按鈕顯示
個人化按鈕會顯示首個 Google 工作階段的個人資料資訊，該工作階段會核准你的網站。已核准的 Google 工作階段會在您的網站上找到對應的帳戶，且該帳戶曾使用「使用 Google 帳戶登入」功能登入。
如果系統顯示個人化按鈕，使用者會知道以下資訊：
- 至少有一個有效的 Google 工作階段。
- 你的網站上有對應的帳戶。
使用者在點選按鈕前，個人化按鈕會快速顯示 Google 和網站端的工作階段狀態。這對偶爾造訪網站的使用者特別有幫助。他們可能會忘記是否已建立帳戶，以及建立帳戶的方式。系統會顯示個人化按鈕，提醒使用者曾使用「使用 Google 帳戶登入」功能。因此，這有助於避免在網站上不必要地建立重複帳戶。
為了顯示工作階段狀態，系統會以以下方式顯示個人化按鈕：
單一工作階段：Google 端只有一個工作階段。該工作階段會核准客戶，且您的網站上會有對應的帳戶。
多個工作階段：Google 端有多個工作階段。這些工作階段會核准用戶端。核准狀態會以清單箭頭表示，並顯示在所選帳戶旁邊。至少有一個工作階段在網站上有對應的帳戶。
沒有工作階段：Google 端沒有工作階段，或是所有工作階段都尚未核准用戶端。
系統會在工作階段狀態適當時自動顯示個人化按鈕，除非按鈕設定不允許顯示個人化按鈕。系統不會顯示個人化按鈕，如果：
data-type屬性為icon。data-size屬性設為medium或small。data-width屬性已設為小於 200 像素的數字。- 第三方 Cookie 遭到封鎖，且未啟用「FedCM 版本」按鈕。
如果名稱或電子郵件地址過長，無法顯示在按鈕中，系統會以省略號顯示。
Federated Credential Manager (FedCM)
網頁版 Privacy Sandbox 對 Google 身分識別服務和使用者登入功能進行重大異動。這會影響「使用 Google 帳戶登入」的個人化按鈕。雖然按鈕不會影響登入流程，但如果第三方 Cookie 遭到封鎖，回訪使用者就不會看到個人化按鈕。
透過 聯合憑證管理 API (FedCM) 按鈕流程，使用者就能在您的網站上看到個人化的「使用 Google 帳戶登入」按鈕。根據預設，FedCM 會停用，但您可以變更一個屬性 (HTML/JavaScript) 來啟用 FedCM。FedCM 按鈕的優點包括：
改善回訪使用者體驗：回訪使用者可辨識現有帳戶，因此登入程序更加簡化。經過證實，這種改善後的辨識功能可提高點閱率 (CTR)。此外，與未啟用 FedCM 的按鈕流程不同，FedCM 按鈕流程支援自動選取功能，也就是說，如果使用者有有效的 Google 工作階段，點選按鈕後就會自動登入，而不會顯示帳戶選擇器提示。
強化功能整合：我們已整合 One Tap 和自動登入功能，讓所有聯合身分驗證管理 (FedCM) 登入功能與單一信賴方 (RP) 的 Google 功能協同運作。Chrome 會記錄並採用 FedCM 按鈕流程中的使用者手勢，以便在 One Tap 自動登入流程中執行一次性重新確認程序。這樣可確保所有功能都能提供流暢的使用體驗。
主要使用者歷程
使用者歷程會因下列狀態而異。
Google 網站上的工作階段狀態。下列術語用於指示使用者歷程開始時的不同 Google 工作階段狀態。
- Has-Google-session：Google 網站上至少有一個有效的工作階段。
- No-Google-session：Google 網站上沒有任何有效的工作階段。
在使用者旅程開始時，所選 Google 帳戶是否已核准您的網站。我們會使用下列字詞來表示不同的核准狀態。
- 新使用者：所選帳戶尚未核准你的網站。
- 回訪者：所選帳戶曾核准你的網站。
Has-Google-session 新使用者歷程
「使用 Google 帳戶登入」按鈕。
帳戶選擇器頁面。
新的使用者同意聲明頁面。
使用者確認後，系統就會將 ID 權杖分享給您的網站。
使用者可以按一下「Use another account」按鈕來新增 Google 工作階段，請參閱「No-Google-session 使用者歷程」一節。
流程中倒數第二個畫面是載入畫面，會自動將使用者重新導向至登入端點，無須使用者採取任何動作。
Has-Google-session returning user journey
「使用 Google 帳戶登入」按鈕。
帳戶選擇器頁面。
使用者選擇回復帳戶後，系統會將 ID 權杖分享給您的網站。
使用者可以按一下「使用其他帳戶」按鈕，新增 Google 工作階段，請參閱「無 Google 工作階段」使用者歷程一節。
流程中倒數第二個畫面是載入畫面，會自動將使用者重新導向至登入端點，無須使用者採取任何動作。
Has-Google-session 搭配自動選取回訪者歷程
未使用 FedCM 的「使用 Google 帳戶登入」按鈕不具備自動選取功能。
點選按鈕後，系統會自動選取有有效 Google 工作階段的回訪使用者，而不會顯示帳戶選擇器提示。將 auto select 屬性設為 true (HTML/JavaScript)。
無 Google 工作階段的新使用者歷程
「使用 Google 帳戶登入」按鈕。
新增 Google 工作階段的第一個頁面。
新增 Google 工作階段的第二個頁面。
新的使用者同意聲明頁面。
使用者確認後，系統就會將 ID 權杖分享給您的網站。
流程中倒數第二個畫面是載入畫面，會自動將使用者重新導向至登入端點，無須使用者採取任何動作。
無 Google 工作階段的回訪者歷程
「使用 Google 帳戶登入」按鈕。
新增 Google 工作階段的第一個頁面。
新增 Google 工作階段的第二個頁面。
使用者點選「Next」按鈕後，系統就會將 ID 權杖分享給您的網站。
Family Link 帳戶主要使用者歷程
您仍可沿用上一節中介紹的一般重要使用者歷程。以下是登入時，系統會針對孩子的 Google 帳戶顯示的額外流程。
No-Google-session
「使用 Google 帳戶登入」按鈕。
新增孩童 Google 工作階段 (孩童 Google 帳戶電子郵件地址) 的第一個頁面。
新增孩子的 Google 工作階段 (孩子的 Google 帳戶密碼) 的第二個頁面。
第一頁：向家長申請核准，以便新增 Google 子帳戶。
請家長核准新增孩子的 Google 工作階段。
第三頁：取得家長核准，可為孩子新增 Google 工作階段。
第一頁：取得家長核准，讓孩子登入應用程式的 Google 帳戶。
第二頁：取得家長核准，讓孩子登入應用程式的 Google 帳戶。
第三頁：取得家長核准，讓孩子登入應用程式的 Google 帳戶。
最後一個畫面，家長必須核准孩子登入應用程式的 Google 帳戶。
家長按一下「繼續」按鈕後，系統就會將 ID 權杖提供給您的網站。
Has-Google-session
「使用 Google 帳戶登入」按鈕。
帳戶選擇器頁面。
第一頁：取得家長核准，讓孩子登入應用程式的 Google 帳戶。
第二頁：取得家長核准，讓孩子登入應用程式的 Google 帳戶。
第三頁：取得家長核准，讓孩子登入應用程式的 Google 帳戶。
最後一個畫面，家長必須核准孩子登入應用程式的 Google 帳戶。
家長按一下「繼續」按鈕後，系統就會將 ID 權杖提供給您的網站。
啟用 FedCM 的「使用 Google 帳戶登入」按鈕目前不支援 Family Link 帳戶。
