logto/packages/connector-google

Google connector

The Google connector provides a succinct way for your application to use Google’s OAuth 2.0 authentication system.

Google 连接器为你的应用程序提供了一种接入 Google OAuth 2.0 身份验证系统的简单方式。

Table of contents

• Google connector
  • Set up a project in the Google API Console
  • Configure your consent screen
    • Configure and register your application
    • Edit app registration
      • Config OAuth consent screen
      • Config scopes
      • Add test users (External user type only)
  • Obtain OAuth 2.0 credentials
    • Config types
  • References
• Google 连接器
  • 在 Google API 控制台中创建一个项目
  • 配置 OAuth 同意屏幕
    • 注册和配置应用
    • 修改应用注册
      • 设置「OAuth 同意屏幕」
      • 配置权限「范围」
      • 添加「测试用户」（仅「User Type」（用户类型）设置为「外部」时需要）
  • 获取 OAuth 2.0 凭据
    • 配置类型
  • 参考

Set up a project in the Google API Console

• Visit the Google API Console and sign in with your Google account.
• Click the Select a project button on the top menu bar, and click the New Project button to create a project.
• In your newly created project, click the APIs & Services to enter the APIs & Services menu.

Configure your consent screen

Configure and register your application

• On the left APIs & Services menu, click the OAuth consent screen button.
• Choose the User Type you want, and click the Create button. (Note: If you select External as your User Type, you will need to add test users later.)

Now you will be on the Edit app registration page.

Edit app registration

Config OAuth consent screen

• Follow the instructions to fill out the OAuth consent screen form.
• Click SAVE AND CONTINUE to continue.

Config scopes

• Click ADD OR REMOVE SCOPES and select ../auth/userinfo.email, ../auth/userinfo.profile and openid in the popup drawer, and click UPDATE to finish.
• Fill out the form as you need.
• Click SAVE AND CONTINUE to continue.

Add test users (External user type only)

• Click ADD USERS and add test users to allow these users to access your application while testing.
• Click SAVE AND CONTINUE to continue.

Now you should have the Google OAuth 2.0 consent screen configured.

Obtain OAuth 2.0 credentials

• On the left APIs & Services menu, click the Credentials button.
• On the Credentials page, click the + CREATE CREDENTIALS button on the top menu bar, and select OAuth client ID.
• On the Create OAuth client ID page, select Web application as the application type.
• Fill out the basic information for your application.
• Click + Add URI to add an authorized domain to the Authorized JavaScript origins section. This is the domain that your logto authorization page will be served from. In our case, this will be ${your_logto_origin}. e.g.https://logto.dev.
• Click + Add URI in the Authorized redirect URIs section to set up the Authorized redirect URIs, which redirect the user to the application after logging in. In our case, this will be ${your_logto_origin}/callback/google-universal. e.g. https://logto.dev/callback/google-universal.
• Click Create to finish and then you will get the Client ID and Client Secret.

Config types

Name	Type
clientId	string
clientSecret	string

References

• Google Identity: Setting up OAuth 2.0

Google 连接器

在 Google API 控制台中创建一个项目

• 用你的 Google 帐号登录 Google 云端平台。
• 点按顶部菜单栏上的「选择项目」，然后点击「新建项目」按钮，新建一个项目。
• 在新创建的项目中，点击「API 和服务」进入「API 和服务」的页面中。

配置 OAuth 同意屏幕

注册和配置应用

• 在左侧的「API 和服务」的菜单栏中, 点按「OAuth 同意屏幕」。
• 选择你所需要的「User Type」（用户类型），之后点击「创建」。（注意: 如果你将「User Type」（用户类型）设置为「外部」，在后续的步骤中你需要设置测试用户。）

现在你将位于「修改应用注册」页面。

修改应用注册

设置「OAuth 同意屏幕」

• 根据页面提示，填写「OAuth 同意屏幕」相关表单。
• 点按「保存并继续」以进行后续操作。

配置权限「范围」

• 点击「添加或移除范围」按钮，然后在弹出的抽屉页面中选择 ../auth/userinfo.email、 ../auth/userinfo.profile 和 openid，然后点击「更新」以完成配置。
• 根据你的需求填写页面上的相关的表单。
• 点按「保存并继续」以进行后续操作。

添加「测试用户」（仅「User Type」（用户类型）设置为「外部」时需要）

• 点击 「+ ADD USERS」（添加用户）添加测试用户，以便这些用户能在应用的发布状态为”测试时“能访问该应用。
• 点按「保存并继续」以进行后续操作。

现在你已经配置好了 Google 的「OAuth 同意屏幕」。

获取 OAuth 2.0 凭据

• 在左侧「API 和服务」的菜单中，点按「凭据」选项。
• 在「凭据」页面内的上部菜单栏中，点击「+ 创建凭据」，然后选择「OAuth 客户端 ID」。
• 在「创建 OAuth 客户端 ID」页面内，将「应用类型」设置为「Web 应用」。
• 填写相关的应用基本信息。
• 在「已获授权的 JavaScript 来源」中，点击「+ 添加URI」，该 URI 值为你所部署的 Logto 服务的地址。此处这个值应为 ${your_logto_origin}。例如：https://logto.dev。
• 在「已获授权的重定向 URI」中，点击「+ 添加URI」以添加「已获授权的重定向 URI」。「已获授权的重定向 URI」将在用户使用 Google 帐号成功登录 Logto 后将用户重定向回你的应用。此处这个值应为 ${your_logto_origin}/callback/google-universal。例如：https://logto.dev/callback/google-universal。
• 点击「创建」后，你将获得「客户端 ID」（Client ID）和「客户端密钥」（Client Secret）。

配置类型

名称	类型
clientId	string
clientSecret	string

参考

• Google Identity: 设置 OAuth 2.0