跳至主要內容

設定 Facebook 社交登入 (Set up social login with Facebook)

整合 Facebook OAuth 2.0 驗證 (Authentication) 系統，啟用「以 Facebook 登入」、帳號連結，以及安全存取 Facebook API。

提示:

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

開始使用​

Facebook 連接器 (Connector) 支援 OAuth 2.0 整合，讓你的應用程式可以：

  • 新增「以 Facebook 登入」驗證 (Authentication)
  • 將使用者帳號與 Facebook 身分連結
  • 從 Facebook 同步使用者個人資料資訊
  • 透過 Logto Secret Vault 安全儲存權杖，自動化存取 Facebook API（例如：回覆討論串、在你的應用程式中發佈內容與影片）

要設定這些驗證 (Authentication) 功能，請先在 Logto 建立 Facebook 連接器 (Connector)：

  1. 前往 Logto > Connector > Social connector。
  2. 點擊 新增社交連接器 (Add social connector)，選擇 Facebook，點擊 下一步 (Next)，並依照分步教學完成整合。

步驟 1：在 Facebook App Dashboard 建立應用程式​

在你能將 Facebook 作為驗證 (Authentication) 提供者前，必須先在 Facebook 開發者平台建立應用程式，以取得 OAuth 2.0 憑證。

  1. 如果你尚未擁有帳號，請先註冊成為 Facebook 開發者。
  2. 前往 Apps 頁面。
  3. 點選你現有的應用程式，或建立新應用程式。
提示:

用例（Use case）是你應用程式與 Meta 互動的主要方式，決定可用的 API、功能、權限與產品。如果你只需社交驗證 (Authentication)（取得 email 與 public_profile），請選擇「Authentication and request data from users with Facebook Login」。若你想存取 Facebook API，請選擇你偏好的用例——大多數用例在建立應用程式後也支援整合「Facebook Login for business」。

  1. 建立應用程式後，於應用程式儀表板頁面，前往 Use cases > Facebook Login > Settings 或 Facebook Login for business > Settings。
  2. 在 Valid OAuth Redirect URIs 欄位填入 Logto 的 Callback URI（可從你的 Logto Facebook 連接器複製）。使用者以 Facebook 登入後，將被導向此處，Logto 會利用授權碼完成驗證 (Authentication)。
  3. 前往 Use cases，點選你的用例下的 Customize，新增權限範圍（Scopes）。建議新增 email 與 public_profile，這是 Logto 實作 Facebook 登入所需的基本權限。

步驟 2：以用戶端憑證設定 Logto 連接器​

  1. 在 Facebook App Dashboard，點選側邊欄的 App settings > Basic。
  2. 你會在面板上看到 App ID 與 App secret。
  3. 點選 App secret 輸入框旁的 Show 按鈕以顯示並複製內容。
  4. 設定你的 Logto Facebook 連接器：
    • 將 App ID 填入 clientId 欄位。
    • 將 App secret 填入 clientSecret 欄位。
    • 在 Logto 點選 Save and Done，即可將你的身分系統與 Facebook 連接。

步驟 3：設定權限範圍（Scopes）​

權限範圍（Scopes）定義你的應用程式向使用者請求哪些權限，並控制你的專案能從他們的 Facebook 帳號存取哪些私人資料。

在 Facebook App Dashboard 設定權限範圍​

  1. 前往 Facebook App Dashboard > Use cases，點選 Customize 按鈕。
  2. 僅新增應用程式所需的權限範圍。使用者會在 Facebook 使用者授權頁面 (Consent screen) 審核並授權這些權限：
    • 驗證 (Authentication)（必要）：email 與 public_profile。
    • API 存取（選用）：應用程式所需的其他權限範圍（例如存取 Threads API 需 threads_content_publish、threads_read_replies）。可參考 Meta 開發者文件 了解可用服務。

在 Logto 設定權限範圍​

根據需求選擇以下其中一種方式：

選項 1：不需額外 API 權限範圍

  • 將 Logto Facebook 連接器的 Scopes 欄位留空。
  • 預設會請求 email public_profile 權限，確保 Logto 能正確取得基本使用者資訊。

選項 2：登入時請求額外權限範圍

  • 在 Scopes 欄位輸入所有需要的權限範圍，以空格分隔。
  • 此處填寫的權限範圍會覆蓋預設值，因此請務必包含驗證 (Authentication) 權限：email public_profile。

選項 3：後續漸進式請求權限範圍

  • 使用者登入後，可透過再次啟動聯邦社交授權流程（federated social authorization flow）並更新使用者儲存的權杖集，按需請求額外權限範圍。
  • 這些額外權限範圍無需填寫在 Logto Facebook 連接器的 Scopes 欄位，可透過 Logto 的 Social Verification API 實現。

依照這些步驟，Logto Facebook 連接器將只請求應用程式所需的權限——不多也不少。

提示:

若你的應用程式需請求這些權限以存取 Facebook API 並執行操作，請務必在 Logto Facebook 連接器啟用 Store tokens for persistent API access。詳情請見下一節。

步驟 4：一般設定​

以下為一些不會阻礙 Facebook 連線，但可能影響終端使用者驗證 (Authentication) 體驗的一般設定。

同步個人檔案資訊​

在 Facebook 連接器中，你可以設定同步個人檔案資訊（如使用者名稱與頭像）的政策。可選擇：

  • 僅於註冊時同步：僅在使用者首次登入時取得個人資訊。
  • 每次登入時皆同步：每次使用者登入時都會更新個人資訊。

儲存權杖以存取 Facebook API（選用）​

若你希望存取 Facebook API 並以使用者授權執行操作（不論是社交登入或帳號連結），Logto 需取得特定 API 權限範圍並儲存權杖。

  1. 依照上述教學新增所需權限範圍。
  2. 在 Logto Facebook 連接器啟用 Store tokens for persistent API access。Logto 會將 Facebook 存取權杖安全儲存在 Secret Vault。
備註:

Facebook 不提供重新整理權杖 (Refresh tokens)。但啟用權杖儲存後，Logto 會在使用者驗證 (Authentication) 時自動請求長效存取權杖（60 天）。在此期間，使用者可手動撤銷存取權杖，否則無需重新授權即可存取 Facebook API。注意：請勿將 offline_access 加入 Scope 欄位，否則可能導致錯誤。

步驟 5：使用 Facebook 測試用戶測試登入（選用）​

你可以使用測試、開發者與管理員帳號測試應用程式登入，也可直接發佈應用程式，讓任何 Facebook 使用者皆可登入。

  1. 在 Facebook App Dashboard，點選側邊欄 App roles > Test Users。
  2. 點選 Create test users 按鈕建立測試用戶。
  3. 點選現有測試用戶的 Options 按鈕，可進行更多操作，如「更改名稱與密碼」。

步驟 6：發佈 Facebook 登入設定​

通常僅有測試、管理員與開發者用戶能登入應用程式。若要讓一般 Facebook 使用者能在正式環境登入，需將應用程式發佈。

  1. 在 Facebook App Dashboard，點選側邊欄 Publish。
  2. 如有需要，填寫 Privacy Policy URL 與 User data deletion 欄位。
  3. 點選右下角的 Save changes 按鈕。
  4. 點選應用程式頂部的 Live 開關按鈕。

使用 Facebook 連接器 (Connector)​

建立 Facebook 連接器 (Connector) 並與 Facebook 連結後，你可以將其整合進終端使用者流程。請依需求選擇下列選項：

啟用「以 Facebook 登入」​

  1. 在 Logto Console，前往 登入體驗 (Sign-in experience) > 註冊與登入 (Sign-up and sign-in)
  2. 在 社交登入 (Social sign-in) 區塊新增 Facebook 連接器 (Connector)，讓使用者可用 Facebook 驗證 (Authentication)

深入瞭解 社交登入體驗 (social sign-in experience)。

使用 Account API 在你的應用程式中建立自訂帳號中心，讓已登入使用者連結或解除 Facebook 帳號。參考 Account API 教學

提示:

你可以僅啟用 Facebook 連接器 (Connector) 以供帳號連結與 API 存取，而不啟用社交登入。

存取 Facebook API 並執行操作​

你的應用程式可從 Secret Vault 取得儲存的 Facebook 存取權杖 (Access token)，呼叫 Facebook API 並自動化後端任務（例如發佈內容或管理貼文）。請參考相關教學以取得 API 存取所需的權杖。

管理使用者的 Facebook 身分 (Identity)​

使用者連結 Facebook 帳號後，管理員可在 Logto Console 管理該連結：

  1. 前往 使用者管理 (User management) 並開啟該使用者的個人資料。
  2. 在 社交連結 (Social connections) 區塊找到 Facebook 項目並點擊 管理 (Manage)。
  3. 在此頁面，管理員可管理使用者的 Facebook 連結，檢視所有從 Facebook 帳號授權並同步的個人資料資訊，以及檢查存取權杖 (Access token) 狀態。
備註:

Facebook 的存取權杖 (Access token) 回應不包含具體 scope（權限範圍）資訊，因此 Logto 無法直接顯示使用者授權的權限清單。不過，只要使用者在授權時同意所需權限範圍 (Scopes)，你的應用程式在存取 Facebook API 時就會擁有相應權限。建議在 Facebook Developer Console 與 Logto 中正確設定所需權限範圍 (Scopes)，以確保應用程式具備必要存取權。

參考資料​

Facebook for Developers - 文件 Facebook 登入文件