跳到主要内容

设置 Facebook 社交登录

Logto 官方的 Facebook 社交登录连接器。

提示:

本指南假设你对 Logto 连接器 (Connectors) 有基本的了解。对于不熟悉的人，请参考 连接器 (Connectors) 指南以开始了解。

开始使用​

Facebook 连接器为你的应用程序提供了一种简洁的方式来使用 Facebook 的 OAuth 2.0 认证 (Authentication) 系统。

注册 Facebook 开发者账户​

如果你还没有，请注册为 Facebook 开发者

设置 Facebook 应用​

  1. 访问 Apps 页面。
  2. 点击你现有的应用或创建一个新应用（如果需要）。
    • 选择的应用类型由你决定，但它应该包含 Facebook 登录 产品。
  3. 在应用仪表板页面，滚动到“添加产品”部分，并点击“Facebook 登录”卡片上的“设置”按钮。
  4. 跳过 Facebook 登录快速入门页面，点击侧边栏 -> “产品” -> “Facebook 登录” -> “设置”。
  5. 在 Facebook 登录设置页面，在“有效的 OAuth 重定向 URI”字段中填写 ${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 字段中填写以逗号或空格分隔的权限列表字符串。如果你没有指定权限，默认权限是 email,public_profile。

使用 Facebook 的测试用户测试登录​

你可以使用测试、开发者和管理员用户的账户，在开发和实时应用模式下测试相关应用的登录。

你也可以直接将应用上线，以便任何 Facebook 用户都可以使用该应用登录。

  • 在应用仪表板页面，点击侧边栏 -> “角色” -> “测试用户”。
  • 点击“创建测试用户”按钮以创建一个测试用户。
  • 点击现有测试用户的“选项”按钮，你将看到更多操作，例如“更改姓名和密码”。

发布 Facebook 登录设置​

通常，只有测试、管理员和开发者用户可以在开发模式下使用相关应用登录。

为了让普通 Facebook 用户在生产环境中使用该应用登录，你可能需要将你的 Facebook 应用切换到*实时模式，这取决于应用类型。例如，纯商业类型*应用没有“实时”切换按钮，但这不会阻碍你的使用。

  1. 在 Facebook 应用仪表板页面，点击侧边栏 -> “设置” -> “基本”。
  2. 如果需要，在面板上填写“隐私政策 URL”和“用户数据删除”字段。
  3. 点击右下角的“保存更改”按钮。
  4. 点击应用顶部栏的“实时”切换按钮。

配置类型​

名称类型
clientIdstring
clientSecretstring
scopestring

参考资料​