自動登入及登出

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

自動登入使用者

Google One Tap 支援自動登入功能,可省去使用者返回網站時必須執行的手動步驟,提供流暢的使用者體驗 (UX)。使用者不必記住上次造訪時選取的 Google 帳戶,可降低在平台上建立不必要重複帳戶的可能性。

自動登入功能旨在與「使用 Google 帳戶登入」按鈕和 One Tap 對話方塊搭配使用。這項功能適用於整個網站,只有在使用者先登出網站後,才會手動註冊或切換帳戶。

必須符合下列條件,系統才會自動登入:

  • 使用者必須先登入 Google 帳戶,
  • 先前已同意與您的應用程式分享帳戶個人資料,且
  • 使用 FedCM 時,過去 10 分鐘內只嘗試登入一次。如果使用者在這段期間內重複嘗試登入,系統就會顯示一鍵登入。
  • 使用 FedCM 時,即使使用者在 FedCM 推出前已核准網站,Chrome 仍會要求使用者在每個 Chrome 執行個體中,重新確認是否要使用 Google 帳戶登入網站。這項異動可能會影響現有網站使用 One Tap 的轉換率。在 Chrome M121 更新中,自動登入功能改善可降低轉換率下降的問題。

如果網頁已啟用自動登入功能,且符合上述條件,系統會自動傳回使用者的 ID 權杖憑證,不需使用者互動。如果不符合這些條件,即使網頁已啟用自動登入功能,使用者仍會預設為使用一鍵登入流程登入或同意。如果使用者有多個 Google 帳戶,並造訪您的網站,則必須先登入單一 Google 帳戶,並提供該帳戶的同意聲明。

在 JavaScript 回呼 (callback 或 data-callback) 中處理回應時,您可以使用傳回的 CredentialResponse 物件中 select_by 欄位的 auto 值,評估自動登入成功率。select_by 不會包含在傳送至 login_uri 或 data-login_uri 的 HTTP POST 要求中。

如要啟用自動登入功能,請在程式碼中加入 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 分鐘的靜止期。在這段期間,系統會改為顯示一鍵登入提示。使用者必須明確點選「一鍵登入」才能登入。

不使用 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();
}

為避免使用者體驗陷入死循環,系統會將使用者登出狀態儲存在名為 g_state 的 Cookie 中,該 Cookie 是由 Google Identity 服務程式庫設定。根據預設,Cookie 網域會設為目前網頁的網域。如果一鍵登入功能顯示在父項網域和子網域上,則所有網域都必須能看到狀態 Cookie。使用 data-state_cookie_domain 屬性,將 g_state Cookie 網域設為上層網域。舉例來說,如果上層網域為 example.com,子網域名稱為 webapp.example.com,請將 data-state_cookie_domain="example.com" 新增至 g_id_onload 元素。

如果您的服務會監控網域中使用的所有 Cookie,請務必通知他們 g_state Cookie。

如果您不想在登入後頁面載入用戶端程式庫,請使用下列解決方案,避免登出後發生死迴圈使用者體驗:

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

主要使用者歷程

自動登入頁面。

使用 FedCM

FedCM 自動登入彈出式視窗

使用者可以點選「X」X按鈕,關閉 One Tap 提示。基於無障礙考量,即使使用者點選「X」X按鈕,系統仍會與網站分享 ID 權杖。

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

不使用 FedCM

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

如果使用者未在 5 秒內點選「Cancel」按鈕,系統就會將 ID 權杖提供給您的網站。

取消登入時,系統會根據有效的 Google 工作階段數量,顯示帳戶選擇工具頁面或回訪者頁面。

  • 多個 Google 工作階段

帳戶選擇工具頁面範例

  • 單一 Google 工作階段

一鍵登入回訪者頁面