自動登入及登出

本頁面說明如何實作與使用者透過 Google One Tap 登入或登出的相關功能。

自動登入使用者

Google One Tap 支援自動登入功能，可省去使用者返回網站時必須採取的手動步驟，提供順暢的使用者體驗 (UX)。使用者不必記得上次造訪時選取的 Google 帳戶，因此可降低在平台上不必要地建立重複帳戶的機率。

自動登入功能旨在補足「使用 Google 帳戶登入」按鈕和 One Tap 對話方塊。這項功能可在整個網站上使用，且只有在使用者先登出網站後，才會手動登入或切換帳戶。

如要啟用自動登入功能，必須符合下列條件：

  • 使用者必須先登入 Google 帳戶，
  • 先前已同意將帳戶個人資料提供給您的應用程式，
  • 使用 FedCM 時，過去 10 分鐘內只嘗試登入一次。如果在這個時間範圍內多次嘗試登入，系統就會顯示 One Tap。
  • 使用 FedCM 時，Chrome 會要求使用者在每個 Chrome 例項中重新確認是否要使用 Google 帳戶登入網站，即使使用者在 FedCM 推出前已核准該網站也一樣。這項變更可能會影響使用 One Tap 的現有網站轉換率。在 Chrome M121 更新中，自動登入功能改善可緩解轉換率下降的問題。

如果網頁已啟用自動登入功能，且符合這些條件，系統會自動傳回使用者的 ID 權杖憑證，無需使用者互動。如果不符合這些條件，即使頁面已啟用自動登入功能，使用者登入或同意的流程預設為「一鍵登入」。如果使用者擁有多個 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();
}

為避免發生死循環使用者體驗，系統會將使用者登出狀態儲存在 Google 身分識別服務程式庫設定的 g_state 名稱 Cookie 中。根據預設，Cookie 網域會設為目前網頁的網域。如果 One Tap 顯示在父網域和子網域上，則狀態 Cookie 必須在所有網域中顯示。使用 data-state_cookie_domain 屬性將 g_state Cookie 網域設為父網域。舉例來說，請將 data-state_cookie_domain="example.com" 新增至 g_id_onload 元素，以便處理 example.com 的父網域和名為 webapp.example.com 的子網域。

如果您有監控網域中所有 Cookie 的服務，就必須通知對方 g_state Cookie。

如果您不想在登入後的網頁上載入用戶端程式庫，請使用下列解決方案，避免登出後發生死循環的使用者體驗：

  • 在登出時，將使用者重新導向至不會顯示 One Tap 或一律停用自動登入功能的頁面 (例如 https://example.com/logged_out)。
  • 在登出時，請在網址中加入參數。例如：logged_out=1。在轉譯 One Tap by JavaScript API 時，請檢查網址參數，並在出現時停用自動登入功能。

主要使用者歷程

自動登入頁面。

使用 FedCM

FedCM 自動登入彈出式視窗

使用者只要按一下「X」X按鈕，即可關閉 One Tap 提示。基於無障礙考量，即使使用者按下「X」X按鈕，系統也會將 ID 權杖分享給您的網站。

為改善使用者體驗，系統會在每次自動登入嘗試之間保留 10 分鐘的靜默期。在這段期間，系統會改為顯示 One Tap 提示。使用者必須明確點選「一鍵登入」才能登入。

未使用 FedCM

自動登入彈出式視窗範例。

如果使用者在 5 秒內未點選「取消」按鈕，系統就會將 ID 權杖分享給您的網站。

取消登入後，系統會根據 Google 現有工作階段數量，顯示帳戶選擇工具頁面或回訪使用者頁面。

  • 多個 Google 工作階段

帳戶選擇工具頁面示例

  • 單一 Google 工作階段

One Tap 回訪者頁面