Skip to main content

用户和权限提供商

¥Users & Permissions providers

Strapi 附带一组针对 用户和权限功能 的预定义内置提供程序。本页面解释了登录流程的工作原理、如何设置服务器 URL，并列出了许多常见第三方提供商的示例。

¥Strapi comes with a predefined set of built-in providers for the Users & Permissions feature. The present page explains how the login flow works, how to set up the server URL, and list many examples for common 3rd-party providers.

如果你要创建自己的自定义提供程序，请参阅 专用指南。

¥If you're looking to create your own custom provider, please refer to the dedicated guide.

了解登录流程​

¥Understanding the login flow

授予 和 最纯粹 允许你使用 OAuth 和 OAuth2 提供程序在你的应用中启用身份验证。

¥Grant and Purest allow you to use OAuth and OAuth2 providers to enable authentication in your application.

为了更好地理解，请查看以下登录流程的描述。示例使用 github 作为提供程序，但对于其他提供程序也一样。

¥For a better understanding, review the following description of the login flow. The example uses github as the provider but it works the same for other providers.

这么说吧：

¥Let's say that:

  • Strapi 的后端位于：strapi.website.com，和

    ¥Strapi's backend is located at: strapi.website.com, and

  • 你的应用前端位于：website.com

    ¥Your app frontend is located at: website.com

  1. 用户进入你的前端应用 (https://website.com) 并单击你的按钮 connect with Github。

    ¥The user goes on your frontend app (https://website.com) and clicks on your button connect with Github.

  2. 前端将选项卡重定向到后端 URL：https://strapi.website.com/api/connect/github。

    ¥The frontend redirects the tab to the backend URL: https://strapi.website.com/api/connect/github.

  3. 后端将选项卡重定向到用户登录的 GitHub 登录页面。

    ¥The backend redirects the tab to the GitHub login page where the user logs in.

  4. 完成后，Github 会将选项卡重定向到后端 URL：https://strapi.website.com/api/connect/github/callback?code=abcdef。

    ¥Once done, Github redirects the tab to the backend URL:https://strapi.website.com/api/connect/github/callback?code=abcdef.

  5. 后端使用给定的 code 从 Github 获取 access_token，该 access_token 可用于在一段时间内向 Github 发出授权请求以获取用户信息。

    ¥The backend uses the given code to get an access_token from Github that can be used for a period of time to make authorized requests to Github to get the user info.

  6. 然后，后端使用参数 access_token 将选项卡重定向到你选择的 URL（例如：http://website.com/connect/github/redirect?access_token=eyfvg）。

    ¥Then, the backend redirects the tab to the url of your choice with the param access_token (example: http://website.com/connect/github/redirect?access_token=eyfvg).

  7. 前端 (http://website.com/connect/github/redirect) 使用 https://strapi.website.com/api/auth/github/callback?access_token=eyfvg 调用后端，后端返回 Strapi 用户配置文件及其 jwt。
    （在后台，后端向 Github 请求用户的个人资料，并在 Github 用户的电子邮件地址和 Strapi 用户的电子邮件地址上进行匹配）。

    ¥The frontend (http://website.com/connect/github/redirect) calls the backend with https://strapi.website.com/api/auth/github/callback?access_token=eyfvg that returns the Strapi user profile with its jwt.
    (Under the hood, the backend asks Github for the user's profile and a match is done on Github user's email address and Strapi user's email address).

  8. 前端现在拥有用户的 jwt，这意味着用户已连接，前端可以向后端发出经过身份验证的请求！

    ¥The frontend now possesses the user's jwt, which means the user is connected and the frontend can make authenticated requests to the backend!

可以在此处找到处理此流程的前端应用的示例：react login 示例应用。

¥An example of a frontend app that handles this flow can be found here: react login example application.

设置服务器 URL​

¥Setting up the server URL

在设置提供商之前，你必须在 /config/server 中指定后端的绝对 URL：

¥Before setting up a provider you must specify the absolute URL of your backend in /config/server:

/config/server.js
module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: env('', 'http://localhost:1337'),
});
提示

稍后你将此 URL 提供给你的提供商。
对于开发，一些提供商接受使用 localhost url，但许多提供商不接受。在这种情况下，我们建议使用 ngrok (ngrok http 1337)，它将从它创建的 URL 到你的本地主机 URL（例如 url: env('', 'https://5299e8514242.ngrok.io'),）建立代理隧道。

¥Later you will give this URL to your provider.
For development, some providers accept the use of localhost urls but many don't. In this case we recommend to use ngrok (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'),).

设置提供者 - 示例​

¥Setting up the provider - Examples

我们决定为每个提供者展示一个示例，而不是通用解释。你也可以 创建你自己的自定义提供程序。

¥Instead of a generic explanation we decided to show an example for each provider. You can also create your own custom provider.

在以下示例中，前端应用将是运行在 http://localhost:3000 上的 react login 示例应用，而 Strapi（即后端服务器）将在 http://localhost:1337 上运行。

¥In the following examples, the frontend application will be the react login example application running on http://localhost:3000, while Strapi (i.e., the backend server) will be running on http://localhost:1337.

如果你想创建并添加新的自定义提供程序，请参阅以下指南：

¥If you want to create and add a new custom provider, please refer to the following guide: