跳到主要内容

设置 Google 社交登录

Google 连接器为你的应用程序提供了一种简洁的方式来使用 Google 的 OAuth 2.0 认证 (Authentication) 系统。

提示:

本指南假设你对 Logto 连接器 (Connectors) 有基本的了解。对于不熟悉的人,请参考 连接器 (Connectors) 指南以开始了解。

在 Google API Console 中设置项目

  • 访问 Google API Console 并使用你的 Google 账户登录。
  • 点击顶部菜单栏的 选择项目 按钮,然后点击 新建项目 按钮创建一个项目。
  • 在你新创建的项目中,点击 API 和服务 进入 API 和服务 菜单。

配置并注册你的应用程序

  • 在左侧 API 和服务 菜单中,点击 OAuth 用户授权页面 按钮。
  • 选择你想要的 用户类型,然后点击 创建 按钮。(注意:如果你选择 外部 作为你的 用户类型,你将需要稍后添加测试用户。)

现在你将进入 编辑应用注册 页面。

编辑应用注册

  • 按照说明填写 OAuth 用户授权页面 表单。
  • 点击 保存并继续 以继续。

配置权限

  • 点击 添加或移除权限 并在弹出抽屉中选择 ../auth/userinfo.email../auth/userinfo.profileopenid,然后点击 更新 完成。建议你考虑添加所有可能使用的权限,否则某些你在配置中添加的权限可能无法正常工作。
  • 根据需要填写表单。
  • 点击 保存并继续 以继续。

添加测试用户(仅限外部用户类型)

  • 点击 添加用户 并添加测试用户,以允许这些用户在测试时访问你的应用程序。
  • 点击 保存并继续 以继续。

现在你应该已经配置好了 Google OAuth 2.0 用户授权页面。

获取 OAuth 2.0 凭据

  • 在左侧 API 和服务 菜单中,点击 凭据 按钮。
  • 凭据 页面,点击顶部菜单栏的 + 创建凭据 按钮,并选择 OAuth 客户端 ID
  • 创建 OAuth 客户端 ID 页面,选择 Web 应用程序 作为应用程序类型。
  • 填写你的应用程序的基本信息。
  • 点击 + 添加 URI 以在 授权的 JavaScript 来源 部分添加一个授权域名。这是你的 Logto 授权页面将从中提供服务的域名。在我们的例子中,这将是 ${your_logto_origin}。例如 https://logto.dev
  • 点击 + 添加 URI 在 **授权重定向 URI** 部分设置 **授权重定向 URI**,它将在用户登录后将其重定向到应用程序。在我们的例子中,这将是 ${your_logto_endpoint}/callback/${connector_id}。例如 https://logto.dev/callback/${connector_id}connector_id 可以在 Logto 管理控制台连接器详情页面的顶部栏找到。
  • 点击 创建 完成,然后你将获得 客户端 ID客户端密钥

配置你的连接器

使用你在前一节中从 OAuth 应用详情页面获得的 客户端 ID客户端密钥 填写 clientIdclientSecret 字段。

scope 是一个以空格分隔的 权限 列表。如果未提供,权限默认为 openid profile email

prompts 是一个字符串数组,指定所需的用户交互类型。字符串可以是以下值之一:

  • none:授权服务器不显示任何认证或用户授权页面;如果用户尚未认证并且未预先配置请求权限的授权,它将返回错误。你可以使用 none 来检查现有的认证和/或授权。
  • consent:授权服务器在向客户端返回信息之前提示用户进行授权。
  • select_account:授权服务器提示用户选择一个用户账户。这允许拥有多个账户的用户在授权服务器上选择他们可能有当前会话的多个账户之一。

配置类型

名称类型
clientIdstring
clientSecretstring
scopestring
promptsstring[]

启用 Google One Tap

Google One Tap 是一种安全且简单的方法,让用户使用他们的 Google 账户登录到你的网站或应用程序。

一旦你设置好了 Google 连接器,你将在连接器详情页面看到一个 Google One Tap 卡片。你可以通过切换开关在注册和登录页面启用 Google One Tap。

启用 Google One Tap 后,你可以配置以下选项:

  • 如果可能,自动选择凭据:如果满足 某些条件,自动使用 Google 账户登录用户。
  • 如果用户点击/点击外部,取消提示:如果用户点击或点击提示外部,关闭 Google One Tap 提示。如果禁用,用户必须点击关闭按钮以关闭提示。
  • 在 ITP 浏览器上启用升级的 One Tap UX:在智能跟踪预防 (ITP) 浏览器上启用升级的 Google One Tap 用户体验。请参考 此页面 了解更多信息。
备注:

要在你的网站上启用 Google One Tap(超出 Logto 登录体验),此功能正在开发中。请关注更新。

参考资料

Google 身份:设置 OAuth 2.0