Skip to main content

Instagram 提供商的用户和权限设置

¥Instagram provider setup for Users & Permissions

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

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

Prerequisites

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

¥You have read the Users & Permissions providers documentation.

Instagram 配置​

¥Instagram configuration

注意

Facebook 不接受 localhost 网址。
使用 ngrok 为后端应用提供服务。

¥Facebook doesn't accept localhost urls.
Use ngrok to serve the backend app.

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. 设置 Instagram 产品

    ¥Setup an Instagram product

  5. 单击左侧菜单中的产品 > Instagram > 基本显示链接

    ¥Click on the PRODUCTS > Instagram > Basic Display link in the left menu

  6. 然后单击“创建新应用”按钮（并使模式生效）

    ¥Then click on the Create new application button (and valid the modal)

  7. 填写信息（替换为你自己的 ngrok url）：

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

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

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

    • 取消授权：https://65e60559.ngrok.io

      ¥Deauthorize: https://65e60559.ngrok.io

    • 数据删除请求：https://65e60559.ngrok.io

      ¥Data Deletion Requests: https://65e60559.ngrok.io

  8. 在 Instagram 基本显示的应用审核中，单击“添加到 instagram_graph_user_profile 的提交”。

    ¥On the App Review for Instagram Basic Display click on Add to submission for instagram_graph_user_profile.

  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. 单击 Instagram 提供商

    ¥Click on the Instagram provider

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

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

    • 使能够：ON

      ¥Enable: ON

    • 客户编号：563883201184965

      ¥Client ID: 563883201184965

    • 客户秘密：f5ba10a7dd78c2410ab6b8a35ab28226

      ¥Client Secret: f5ba10a7dd78c2410ab6b8a35ab28226

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

      ¥The redirect URL to your front-end app: http://localhost:3000/connect/instagram/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.