使用 Google 帳戶登入功能

「使用 Google 帳戶登入」功能的主要功能如下。您可以使用程式碼產生器產生程式碼,將 One Tap、自動登入和「使用 Google 帳戶登入」按鈕嵌入網頁中。

使用者可以在支援 FedCM 的瀏覽器上全面停用第三方登入功能。使用者選擇停用時,系統不會顯示 One Tap 和自動登入功能,也不會顯示相關內容。

One Tap

當使用者造訪您的網站時,如果瀏覽器中有運作中的 Google 工作階段,「使用 Google 帳戶登入」功能就會提示使用者透過 Google 帳戶登入或註冊您的網站。使用者只要輕觸一下 (針對單一 Google 工作階段案例) 或輕觸兩下 (有多個 Google 工作階段),使用者就能完成聯合登入或註冊流程。One Tap UX 提供流暢的使用者進入點,因為所有使用者體驗流程都是在網頁內嵌的 iframe 中執行。

One Tap 彈出式視窗會徵求使用者同意並登入

使用者可以選擇全球性不採用 One Tap。在這種情況下,Google 帳戶不會顯示 One Tap。如果所有有效的 Google 帳戶都已停用,系統就不會顯示 One Tap UI。

建議將 One Tap 同時放在主要登入對話方塊和分葉頁面上。開發人員偏好 One Tap 的原因如下:

  • 提高使用者轉換率如要進一步瞭解我們的合作夥伴如何成功運用 One Tap 改善註冊和登入體驗,請參閱個案研究
  • 讓使用者不必將登入和註冊頁面 重新導向至專屬的登入和註冊頁面
  • 使用者不需要離開目前瀏覽歷程,就能在網站情境中登入及註冊。
  • 在回訪時提供個人化提示和自動登入,藉此減少重複帳戶的問題。

自動登入

透過 One Tap,您也可以啟用可取消的自動登入功能,為回訪者提供簡便的使用者體驗。您不需要使用者手勢,因為回訪者會自動登入網站。如果只有一個有效的 Google 帳戶,而先前已同意將帳戶設定檔與應用程式共用,則系統會自動登入;

使用者可以選擇在短時間內取消自動登入程序,確保使用者掌控權和資訊透明度。如果使用者取消自動登入,「使用 Google 帳戶登入」功能會記住決定的一天,然後才會再次啟用自動登入功能。這項可取消的功能可讓使用者進一步控管自動登入程序。

啟用 FedCM 後,自動登入事件之間會有一個 10 分鐘的等待期。如果在這段期間使用者會觸發自動登入,請遵循 One Tap 登入流程,而非自動登入流程。

「使用 Google 帳戶登入」功能不支援靜音登入,在這種情況下,系統會傳回憑證,而不會顯示任何使用者介面。當 Google 將登入憑證傳回給依賴方時,使用者一律會看到部分 UI、手動或自動登入。這有助於我們保護使用者隱私和提升控制權。

自動登入彈出式視窗

您是否要啟用自動登入功能,並根據自家網站的使用者體驗做決定。

「使用 Google 帳戶登入」按鈕

與 One Tap 相比,「使用 Google 帳戶登入」按鈕流程必須由使用者手勢觸發。為此,「使用 Google 帳戶登入」功能僅提供用來算繪按鈕的 API,不支援透過程式輔助方式啟動按鈕流程的 API。開發人員只需在網頁上顯示「使用 Google 帳戶登入」按鈕,觸發按鈕使用者體驗流程的時機,由程式庫公開處理。

非個人化的登入按鈕

換句話說,「使用 Google 帳戶登入」按鈕目前必須由 Google Identity 服務 JavaScript 程式庫產生。按鈕轉譯 API 可讓您自訂顏色、形狀、文字和大小,以符合網站的品牌宣傳需求,但請務必遵循 Google 的規範。所有網站的按鈕都一致,可讓使用者快速辨識、信任及使用這些按鈕。

使用者設定檔資訊可能也會用來顯示按鈕。只有當至少一個有效的 Google 工作階段已經在您的網站上驗證使用者時,系統才會顯示個人化按鈕。個人化按鈕會提醒使用者曾使用過「使用 Google 帳戶登入」,這樣您的網站就不會重複建立帳戶。這對於只造訪您網站的使用者而言特別實用。因此可能會忘記原先使用的登入方式。

個人化的登入按鈕

「使用 Google 帳戶登入」按鈕流程支援彈出式視窗和重新導向使用者體驗模式。

  • 在彈出式使用者體驗中,只要按一下「使用 Google 帳戶登入」按鈕,網頁頂端就會開啟新的彈出式視窗。彈出式視窗的使用者體驗流程會在彈出式視窗中顯示。
  • 在重新導向使用者體驗中,使用者點選「使用 Google 帳戶登入」按鈕後,系統會將完整的網頁重新導向。在同一個視窗中顯示按鈕的使用者體驗流程。不過,當這類按鈕顯示使用者體驗時,使用者就不會再看到您的網頁。

您可以撤銷使用者同意共用 ID 權杖。「使用 Google 帳戶登入」功能提供 API,可透過程式輔助方式撤銷使用者同意聲明。

與 Google Identity 服務授權 API 中的 revoke() 方法不同,您不需要存取權杖即可撤銷使用者同意聲明。不過,您需要提供目標 Google 工作階段的電子郵件地址Google 使用者 ID,且瀏覽器應具備該帳戶的有效 Google 工作階段。

撤銷 API 會撤銷 ID 權杖共用,以及先前授予的任何其他授權範圍 (如果先前已授予)。無論您使用何種撤銷 API,一律皆是如此。

程式碼產生器

程式碼產生器是一項開發人員工具,可協助您產生用戶端整合程式碼。透過「使用 Google 帳戶登入」HTML API,您可能會不需要任何 JavaScript 程式碼進行用戶端整合。

程式碼產生器步驟 1:設定

如果開發人員選擇使用 JavaScript API,建議您使用程式碼產生器,以互動方式設計按鈕。您也可以先產生 HTML 程式碼,然後將程式碼複製到 JavaScript API 中的對應欄位。