Facebook 提供方在 Users & Permissions 中的设置

页面摘要： Facebook 提供方设置可在 Strapi 的 Users & Permissions 功能中启用社交登录身份验证。配置一个带有 OAuth 凭据的 Facebook 应用，并更新 Strapi 设置，使用你的 Client ID、Client Secret 和前端重定向 URL 启用该提供方。

本页介绍如何为 Users & Permissions 功能 设置 Facebook 提供方。

WARNING

你已阅读 Users & Permissions 提供方文档。

Facebook 配置

Facebook 不接受 localhost URL。

使用 ngrok 来提供后端应用（ngrok http 1337），它会在其生成的 URL 与你的 localhost URL 之间建立代理隧道（例如：url: env('', 'https://5299e8514242.ngrok.io'),）。

ngrok http 1337

别忘了使用生成的 ngrok URL 更新后端配置文件 config/server.js 中的服务器 URL，以及你的前端应用中的服务器 URL（如果你使用 react 登录示例应用，则为环境变量 REACT_APP_BACKEND_URL）。

  1. 访问开发者应用列表页面，地址为 https://developers.facebook.com/apps/
  2. 点击 Add a New App（添加新应用）按钮
  3. 在弹窗中填写 Display Name（显示名称）并创建应用
  4. 设置一个 Facebook Login（Facebook 登录）产品
  5. 在左侧菜单中点击 PRODUCTS > Facebook login > Settings（产品 > Facebook 登录 > 设置）链接
  6. 填写信息并保存（替换为你自己的 ngrok URL）：
    • Valid OAuth Redirect URIs（有效的 OAuth 重定向 URI）：https://65e60559.ngrok.io/api/connect/facebook/callback
  7. 然后，在左侧菜单中点击 Settings（设置）
  8. 然后点击 Basic（基本）链接
  9. 你应该能看到自己的 Application ID 和 secret，请将它们保存以备后用

Strapi 配置

  1. 访问 User & Permissions 提供方设置页面，地址为 http://localhost:1337/admin/settings/users-permissions/providers
  2. 点击 Facebook 提供方
  3. 填写以下信息（替换为你自己的客户端 ID 和密钥）：
    • Enable：ON
    • Client ID：2408954435875229
    • Client Secret：4fe04b740b69f31ea410b9391ff3b5b0
    • 指向你前端应用的重定向 URL：http://localhost:3000/connect/facebook/redirect

你的配置已完成。启动后端和 react 登录示例应用，访问 http://localhost:3000 并尝试连接到你所配置的提供方。