跳至主要內容

設定 Google 社交登入

Google 連接器為你的應用程式提供了一種簡潔的方式來使用 Google 的 OAuth 2.0 驗證系統。

提示:

本指南假設你已對 Logto 連接器 (Connectors) 有基本了解。若不熟悉,請參閱 連接器 (Connectors) 指南以開始使用。

在 Google API Console 中設定專案

  • 訪問 Google API Console 並使用你的 Google 帳戶登入。
  • 點擊頂部選單欄的 Select a project 按鈕,然後點擊 New Project 按鈕來建立專案。
  • 在新建立的專案中,點擊 APIs & Services 進入 APIs & Services 選單。

配置並註冊你的應用程式

  • 在左側 APIs & Services 選單中,點擊 OAuth consent screen 按鈕。
  • 選擇你想要的 User Type,然後點擊 Create 按鈕。(注意:如果選擇 External 作為 User Type,你將需要稍後新增測試使用者。)

現在你將進入 Edit app registration 頁面。

編輯應用程式註冊

  • 按照指示填寫 OAuth consent screen 表單。
  • 點擊 SAVE AND CONTINUE 繼續。

配置權限範圍 (Scopes)

  • 點擊 ADD OR REMOVE SCOPES 並在彈出抽屜中選擇 ../auth/userinfo.email../auth/userinfo.profileopenid,然後點擊 UPDATE 完成。建議考慮新增所有可能使用的權限範圍,否則某些配置中新增的權限範圍可能無法運作。
  • 根據需要填寫表單。
  • 點擊 SAVE AND CONTINUE 繼續。

新增測試使用者(僅限 External 使用者類型)

  • 點擊 ADD USERS 並新增測試使用者,以允許這些使用者在測試時存取你的應用程式。
  • 點擊 SAVE AND CONTINUE 繼續。

現在你應該已經配置好 Google OAuth 2.0 使用者授權頁面。

獲取 OAuth 2.0 憑證

  • 在左側 APIs & Services 選單中,點擊 Credentials 按鈕。
  • Credentials 頁面,點擊頂部選單欄的 + CREATE CREDENTIALS 按鈕,然後選擇 OAuth client ID
  • Create OAuth client ID 頁面,選擇 Web application 作為應用程式類型。
  • 填寫應用程式的基本資訊。
  • 點擊 + Add URI 以在 Authorized JavaScript origins 部分新增授權域名。這是你的 Logto 授權頁面將提供服務的域名。在我們的例子中,這將是 ${your_logto_origin},例如 https://logto.dev
  • 在 **Authorized redirect URIs** 部分點擊 + Add URI 來設置 **Authorized redirect URIs**,這將在使用者登入後將其重定向到應用程式。在我們的例子中,這將是 ${your_logto_endpoint}/callback/${connector_id},例如 https://logto.dev/callback/${connector_id}connector_id 可以在 Logto Admin Console 連接器詳細資訊頁面的頂部欄找到。
  • 點擊 Create 完成,然後你將獲得 Client IDClient Secret

配置你的連接器

使用前一節中提到的 OAuth 應用程式詳細資訊頁面獲得的 Client IDClient Secret 填寫 clientIdclientSecret 欄位。

scope 是一個以空格分隔的 權限範圍 (Scopes) 列表。如果未提供,預設權限範圍為 openid profile email

prompts 是一個字串數組,指定所需的使用者互動類型。字串可以是以下值之一:

  • none:授權伺服器不顯示任何驗證或使用者授權頁面;如果使用者尚未驗證且未預先配置請求權限範圍的授權,將返回錯誤。你可以使用 none 來檢查現有的驗證和/或授權。
  • consent:授權伺服器在向客戶端返回資訊之前提示使用者授權。
  • select_account:授權伺服器提示使用者選擇一個使用者帳戶。這允許擁有多個帳戶的使用者在授權伺服器中選擇他們可能有當前會話的多個帳戶之一。

配置類型

名稱類型
clientIdstring
clientSecretstring
scopestring
promptsstring[]

啟用 Google One Tap

Google One Tap 是一種安全且簡單的方式,讓使用者使用其 Google 帳戶登入你的網站或應用程式。

一旦你設置好 Google 連接器,你將在連接器詳細資訊頁面看到 Google One Tap 的卡片。你可以通過切換開關在註冊和登入頁面中啟用 Google One Tap。

啟用 Google One Tap 後,你可以配置以下選項:

  • 如果可能,自動選擇憑證:如果滿足 某些條件,自動使用 Google 帳戶登入使用者。
  • 如果使用者點擊/點擊外部,取消提示:如果使用者點擊或點擊提示外部,關閉 Google One Tap 提示。如果禁用,使用者必須點擊關閉按鈕以關閉提示。
  • 在 ITP 瀏覽器上啟用升級的 One Tap UX:在智能追蹤防護 (ITP) 瀏覽器上啟用升級的 Google One Tap 使用者體驗。請參閱 此頁面 以獲取更多資訊。
備註:

要在你的網站中啟用 Google One Tap(超出 Logto 登入體驗),此功能正在開發中。請關注更新。

參考資料

Google Identity: 設定 OAuth 2.0