Skip to main content

Facebook 提供商为用户和权限设置

¥Facebook provider setup for Users & Permissions

本页面说明如何为 用户和权限功能 设置 Facebook 提供程序。

¥The present page explains how to setup the Facebook provider for the Users & Permissions feature.

Prerequisites

你已阅读 用户和权限提供商文档。

¥You have read the Users & Permissions providers documentation.

脸书配置​

¥Facebook configuration

Facebook 不接受 localhost 网址。
使用 ngrok  为后端应用 (ngrok http 1337) 提供服务，该应用将从其创建的 URL 到你的本地主机 URL（例如 url: env('', 'https://5299e8514242.ngrok.io'),）建立代理隧道。

¥Facebook doesn't accept localhost urls.
Use ngrok  to serve the backend app (ngrok http 1337) that will make a proxy tunnel from a url it created to your localhost url (e.g., url: env('', 'https://5299e8514242.ngrok.io'),).

ngrok http 1337

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

¥Don't forget to update the server url in the backend config file config/server.js and the server url in your frontend app (environment variable REACT_APP_BACKEND_URL if you use react login example app ) with the generated ngrok url.

  1. 访问开发者应用列表页面 [https://developers.facebook.com/apps/](https://developers.facebook.com/apps/) 

    ¥Visit the Developer Apps list page at https://developers.facebook.com/apps/ 

  2. 单击添加新应用按钮

    ¥Click on Add a New App button

  3. 在模式中填写显示名称并创建应用

    ¥Fill the Display Name in the modal and create the app

  4. 设置 Facebook 登录产品

    ¥Setup a Facebook Login product

  5. 单击左侧菜单中的产品 > Facebook 登录 > 设置链接

    ¥Click on the PRODUCTS > Facebook login > Settings link in the left menu

  6. 填写信息并保存（替换为你自己的 ngrok url）：

    ¥Fill the information and save (replace with your own ngrok url):

    • 有效的 OAuth 重定向 URI：https://65e60559.ngrok.io/api/connect/facebook/callback

      ¥Valid OAuth Redirect URIs: https://65e60559.ngrok.io/api/connect/facebook/callback

  7. 然后，点击左侧菜单中的“设置”

    ¥Then, click on Settings in the left menu

  8. 然后在基本链接上

    ¥Then on Basic link

  9. 你应该会看到你的应用 ID 和密码，保存起来供以后使用

    ¥You should see your Application ID and secret, save them for later

表带配置​

¥Strapi configuration

  1. 访问用户和权限提供商设置页面位于 [http://localhost:1337/admin/settings/users-permissions/providers](http://localhost:1337/admin/settings/users-permissions/providers) 

    ¥Visit the User & Permissions provider settings page at http://localhost:1337/admin/settings/users-permissions/providers 

  2. 单击 Facebook 提供商

    ¥Click on the Facebook provider

  3. 填写信息（替换为你自己的客户端 ID 和密码）：

    ¥Fill the information (replace with your own client ID and secret):

    • 使能够：ON

      ¥Enable: ON

    • 客户编号：2408954435875229

      ¥Client ID: 2408954435875229

    • 客户秘密：4fe04b740b69f31ea410b9391ff3b5b0

      ¥Client Secret: 4fe04b740b69f31ea410b9391ff3b5b0

    • 前端应用的重定向 URL：http://localhost:3000/connect/facebook/redirect

      ¥The redirect URL to your front-end app: http://localhost:3000/connect/facebook/redirect

你的配置已完成。启动后端和 react login 示例应用 ，转到 http://localhost:3000 并尝试连接到你配置的提供商。

¥Your configuration is done. Launch the backend and the react login example application , go to http://localhost:3000 and try to connect to the provider you configured.