跳至主要內容

設定 Facebook 社交登入

Logto 的官方 Facebook 社交登入連接器。

提示:

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

開始使用​

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

註冊 Facebook 開發者帳戶​

如果你還沒有 Facebook 開發者帳戶，請註冊為 Facebook 開發者

設定 Facebook 應用程式​

  1. 訪問 Apps 頁面。
  2. 點擊你現有的應用程式，或創建一個新的（如有需要）。
  3. 在應用程式儀表板頁面，滾動到「新增產品」部分，然後點擊「Facebook Login」卡片上的「設定」按鈕。
  4. 略過 Facebook Login 快速入門頁面，點擊側邊欄 ->「產品」->「Facebook Login」->「設定」。
  5. 在 Facebook Login 設定頁面，於「Valid OAuth Redirect URIs」欄位中填入 ${your_logto_origin}/callback/${connector_id}。connector_id 可以在 Logto 管理控制台連接器詳細資訊頁面的頂部欄位找到。例如：
    • https://logto.dev/callback/${connector_id} 用於生產環境
    • https://localhost:3001/callback/${connector_id} 用於本地環境測試
  6. 點擊右下角的「儲存變更」按鈕。

編寫連接器 JSON​

  1. 在 Facebook 應用程式儀表板頁面，點擊側邊欄 ->「設定」->「基本」。
  2. 你將在面板上看到「App ID」和「App secret」。
  3. 點擊 App secret 輸入框後的「顯示」按鈕以複製其內容。
  4. 填寫 Logto 連接器設定：
    • 在 clientId 欄位中填入 App ID 的字串。
    • 在 clientSecret 欄位中填入 App secret 的字串。
    • 在 scope 欄位中填入以逗號或空格分隔的權限字串列表。如果未指定 scope，預設 scope 為 email,public_profile。

使用 Facebook 的測試使用者測試登入​

你可以使用測試、開發者和管理員使用者的帳戶，在開發和實時應用程式模式下測試相關應用程式的登入。

你也可以直接將應用程式上線，以便任何 Facebook 使用者都可以使用該應用程式登入。

  • 在應用程式儀表板頁面，點擊側邊欄 ->「角色」->「測試使用者」。
  • 點擊「創建測試使用者」按鈕以創建測試使用者。
  • 點擊現有測試使用者的「選項」按鈕，你將看到更多操作，例如「更改名稱和密碼」。

發佈 Facebook 登入設定​

通常，只有測試、管理員和開發者使用者可以在開發模式下使用相關應用程式登入。

為了讓普通 Facebook 使用者在生產環境中使用應用程式登入，你可能需要將 Facebook 應用程式切換到 live mode，具體取決於應用程式類型。 例如，純 business type 應用程式沒有「live」切換按鈕，但這不會阻礙你的使用。

  1. 在 Facebook 應用程式儀表板頁面，點擊側邊欄 ->「設定」->「基本」。
  2. 如有需要，填寫面板上的「隱私政策 URL」和「使用者資料刪除」欄位。
  3. 點擊右下角的「儲存變更」按鈕。
  4. 點擊應用程式頂部欄位的「Live」切換按鈕。

配置類型​

名稱類型
clientIdstring
clientSecretstring
scopestring

參考資料​