自動登入及登出

本頁面說明如何實作有關使用者登入或登出 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 提示。使用者必須明確點選 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 自動登入彈出式視窗

使用者只要按一下「X」X按鈕,即可關閉 One Tap 提示。為了考量無障礙設計,即使使用者點選「X」X按鈕,系統仍會將 ID 權杖提供給您的網站。

為了改善使用者體驗,每次嘗試自動登入會需要 10 分鐘的靜止期。在此期間,系統會改為顯示 One Tap 提示。使用者必須明確點選 One Tap 才能登入。

不使用 FedCM

自動登入彈出式視窗。

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

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

  • 多個 Google 工作階段

帳戶選擇工具頁面

  • 單一 Google 工作階段

One Tap 回訪者頁面