本頁說明「使用 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 帳戶。