Skip to main content

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

¥Google provider setup for Users & Permissions

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

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

Prerequisites

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

¥You have read the Users & Permissions providers documentation.

谷歌配置​

¥Google configuration

注意

Google 接受 localhost 网址。
不需要使用 ngrok。

¥Google accepts the localhost urls.
The use of ngrok is not needed.

  1. 访问 Google 开发者控制台 [https://console.developers.google.com/](https://console.developers.google.com/) 

    ¥Visit the Google Developer Console at https://console.developers.google.com/ 

  2. 单击顶部菜单中的选择项目下拉菜单

    ¥Click on the Select a project dropdown in the top menu

  3. 然后单击“新建项目”按钮

    ¥Then click NEW PROJECT button

  4. 填写项目名称输入并创建

    ¥Fill the Project name input and create

创建应用时请等待几秒钟。

¥Wait a few seconds while the application is created.

  1. 在项目下拉列表中，选择你的新项目

    ¥On the project dropdown, select your new project

  2. 单击 API 卡下的转到 API 概述

    ¥Click on Go to APIs overview under the APIs card

  3. 然后单击左侧菜单中的凭据链接

    ¥Then click on the Credentials link in the left menu

  4. 单击 OAuth 同意屏幕按钮

    ¥Click on OAuth consent screen button

  5. 选择外部并点击创建

    ¥Choose External and click on create

  6. 填写应用名称并保存

    ¥Fill the Application name and save

  7. 然后单击创建凭据按钮

    ¥Then click on Create credentials button

  8. 选择 OAuth 客户端 ID 选项

    ¥Choose OAuth client ID option

  9. 填写信息：

    ¥Fill the information:

    • 名称：Strapi Auth

      ¥Name: Strapi Auth

    • 授权重定向 URI：http://localhost:1337/api/connect/google/callback

      ¥Authorized redirect URIs: http://localhost:1337/api/connect/google/callback

  10. 单击你刚刚创建的客户端的 OAuth 2.0 客户端 ID 名称

    ¥Click on OAuth 2.0 Client IDs name of the client you just created

  11. 你应该会看到你的应用 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. 点击 Google 提供商

    ¥Click on the Google provider

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

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

    • 使能够：ON

      ¥Enable: ON

    • 客户编号：226437944084-o2mojv5i4lfnng9q8kq3jkf5v03avemk.apps.googleusercontent.com

      ¥Client ID: 226437944084-o2mojv5i4lfnng9q8kq3jkf5v03avemk.apps.googleusercontent.com

    • 客户秘密：aiTbMoiuJQflSBy6uQrfgsni

      ¥Client Secret: aiTbMoiuJQflSBy6uQrfgsni

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

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