自動登入及登出

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

自動登入使用者

Google One Tap 支援自動登入功能,能夠移除訪客返回網站時必須採取的手動步驟,因此能提供順暢的使用者體驗 (UX)。使用者無需記得上次造訪時選取的 Google 帳戶,因此在平台上出現不必要的重複帳戶的機率會降低。

自動登入旨在補充「使用 Google 帳戶登入」按鈕和 One Tap 對話方塊。這項工具可在整個網站中使用,以手動方式註冊或切換帳戶,只有在使用者首次登出網站後才執行。

您必須符合下列條件,才能使用自動登入功能:

  • 使用者必須先登入 Google 帳戶
  • 先前已同意與您的應用程式共用帳戶設定檔;且
  • 使用 FedCM 時,在過去 10 分鐘內只會嘗試一次登入。在這個視窗中,如果多次嘗試再次登入,系統就會顯示一鍵輕觸功能。
  • 使用 FedCM 時,Chrome 會要求使用者重新確認要在每個 Chrome 執行個體中使用 Google 帳戶登入網站,即使使用者在 FedCM 推出前已核准網站也一樣。這項變更可能會影響現有網站使用 One Tap 的轉換率。在 Chrome M121 更新中,改善自動登入功能可降低轉換率下降的問題。

如果網頁已啟用自動登入功能,且符合這些條件,系統就會自動傳回訪客 ID 權杖憑證,使用者不需要進行任何互動。如果不符合這些條件,即使網頁已啟用自動登入功能,使用者仍會預設為登入或同意一次 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

FedCM 自動登入彈出式視窗

如果使用者在 5 秒內沒有點選「X」X來取消,系統會將 ID 權杖提供給您的網站。

不使用 FedCM

自動登入彈出式視窗。

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

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

  • 多個 Google 工作階段

    使用 FedCM

    FedCM 帳戶選擇工具頁面

    不使用 FedCM

    帳戶選擇工具頁面

  • 單一 Google 工作階段

    使用 FedCM

    FedCM 帳戶選擇工具頁面

    不使用 FedCM

    One Tap 回訪者頁面