Skip to main content

Twitter 提供程序的用户和权限设置

¥Twitter provider setup for Users & Permissions

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

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

Prerequisites

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

¥You have read the Users & Permissions providers documentation.

推特配置​

¥Twitter configuration

注意

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

¥Twitter 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://developer.twitter.com/en/apps](https://developer.twitter.com/en/apps)

    ¥Visit the Apps list page at https://developer.twitter.com/en/apps

  2. 单击创建应用按钮

    ¥Click on Create an app button

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

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

    • 应用名称：Strapi Twitter 授权

      ¥App name: Strapi Twitter auth

    • 应用说明：这是 Strapi 身份验证的演示应用

      ¥Application description: This is a demo app for Strapi auth

    • 告诉我们这个应用将如何使用：* 在这里写一条足够长的消息 -

      ¥Tell us how this app will be used: - here write a message enough long -

  4. 在此过程结束时，你应该会看到你的应用 ID 和密码，保存它们以供以后使用

    ¥At the end of the process you should see your Application ID and secret, save them for later

  5. 转到你的应用设置并单击编辑身份验证设置

    ¥Go to you app setting and click on edit Authentication settings

  6. 启用第 3 方身份验证并请求用户的电子邮件地址

    ¥Enable 3rd party authentication AND Request email address from users

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

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

    • 回调网址：https://65e60559.ngrok.io/api/connect/twitter/callback

      ¥Callback URLs: https://65e60559.ngrok.io/api/connect/twitter/callback

    • 网址：https://65e60559.ngrok.io

      ¥Website URL: https://65e60559.ngrok.io

    • 隐私政策：https://d73e70e88872.ngrok.io

      ¥Privacy policy: https://d73e70e88872.ngrok.io

    • 服务条款：https://d73e70e88872.ngrok.io

      ¥Terms of service: https://d73e70e88872.ngrok.io

表带配置​

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

    ¥Click on the Twitter provider

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

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

    • 使能够：ON

      ¥Enable: ON

    • API 密钥：yfN4ycGGmKXiS1njtIYxuN5IH

      ¥API Key: yfN4ycGGmKXiS1njtIYxuN5IH

    • API 秘密：Nag1en8S4VwqurBvlW5OaFyKlzqrXFeyWhph6CZlpGA2V3VR3T

      ¥Api Secret: Nag1en8S4VwqurBvlW5OaFyKlzqrXFeyWhph6CZlpGA2V3VR3T

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

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