本頁說明如何實作與使用 Google One Tap 登入或登出功能相關的功能。
自動登入使用者
Google One Tap 支援自動登入功能,使用者只需手動返回網站時採取的手動步驟,即可提供順暢的使用者體驗 (UX)。使用者無須記住上次造訪時選取的 Google 帳戶,因此會降低平台建立非必要重複帳戶的機率。
自動登入旨在與「使用 Google 帳戶登入」按鈕和 One Tap 對話方塊相輔相成。這類機制可在整個網站使用,只有在使用者首次登出網站後才發生,您可以手動註冊或切換帳戶。
要讓自動登入的情況發生,必須符合下列條件:
- 使用者必須先登入自己的 Google 帳戶
- 先前已同意與您的應用程式共用帳戶個人資料。
- 。如果在這段期間重複嘗試登入,系統會顯示一次輕觸畫面。
- 使用 FedCM 時,Chrome 會要求使用者再次確認他們想要以 Google 帳戶登入網站,即使他們在 FedCM 推出前已核准網站也一樣。這項變更可能會影響現有網站的 One Tap 轉換率。在 Chrome M121 更新中,改善自動登入功能可減少轉換率下降的問題。
對於已啟用自動登入功能的網頁,只要符合這些條件,就會自動傳回,不會讓使用者產生任何互動。如果不符合這些條件,且即使頁面已啟用自動登入功能,使用者仍會預設採用 One Tap 流程來登入或同意。如果使用者擁有多個 Google 帳戶,並造訪您的網站,他們必須先登入單一 Google 帳戶,並授予該帳戶的同意聲明。
您可以在所傳回憑證物件的 select_by 欄位中使用 auto
值,測量自動登入成功率。
如要啟用自動登入功能,請在程式碼中新增 data-auto_select="true"
,如以下程式碼片段所示:
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_select="true">
</div>
登出
使用者登出您的網站後,系統會將他們導向自動顯示 Google One Tap 提示的頁面。如要進行這項設定,必須禁止自動選取。否則,使用者會自動重新登入,導致遇到無效迴圈的使用者體驗。
使用 FedCM
為提升使用者體驗,每次自動登入嘗試之間會有 10 分鐘的安靜期。在這段期間,系統會改為顯示 One Tap 提示。使用者必須明確點選「輕觸一下」才能登入。
不使用 FedCM
如要禁止在使用者登出後自動選取,請在所有登出連結和按鈕中新增類別名稱 g_id_signout
。請參閱下列程式碼片段:
<div class="g_id_signout">Sign Out</div>
下列 JavaScript 程式碼片段也可以用來登出:
const button = document.getElementById('signout_button');
button.onclick = () => {
google.accounts.id.disableAutoSelect();
}
因此系統會透過您網域中的 Cookie 記錄登出狀態,避免發生無效迴圈的使用者體驗。
登出狀態會儲存在您網域的 g_state
Cookie 中。如果您的服務會監控網域使用的所有 Cookie,您就必須將這個 Cookie 告知他們。
如果您不希望在登入後的網頁載入用戶端程式庫,請使用這些解決方案,避免在使用者登出後出現無效迴圈使用者體驗:
- 登出時,將使用者重新導向至未顯示 One Tap 或一律停用自動登入的頁面 (例如
https://example.com/logged_out
)。 - 登出時,在網址中加入參數。例如:
logged_out=1
。轉譯 One Tap by JavaScript API 時,請檢查該網址參數,並在有自動登入的情況下停用。
關鍵使用者歷程
自動登入頁面。
使用 FedCM
使用者可以按一下「X」X按鈕,關閉 One Tap 提示。為提高無障礙程度,即使使用者點選「X」X按鈕,系統還是會向您的網站提供 ID 權杖。
為提升使用者體驗,每次自動登入嘗試之間會有 10 分鐘的安靜期。在這段期間,系統會改為顯示 One Tap 提示。使用者必須明確點選「輕觸一下」才能登入。
不使用 FedCM
如果使用者未在 5 秒內點選「Cancel」按鈕,系統就會將 ID 權杖提供給您的網站。
登入取消後,系統會根據運作中的 Google 工作階段數量,顯示帳戶選擇工具頁面或回訪者頁面。
- 多個 Google 工作階段
- 單一 Google 工作階段