跳到主要内容

设置 Google 社交登录

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

提示:

在本指南中,我们假设你对 Logto 连接器 (Connectors) 有基本的了解。如果没有,请查看 配置连接器 指南以开始了解。

在 Google API Console 中设置项目

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

配置你的用户授权页面

配置并注册你的应用程序

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

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

编辑应用注册

配置 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客户端密钥

配置你的连接器

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

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

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

  • none:授权服务器不显示任何认证 (Authentication) 或用户授权页面;如果用户尚未认证 (Authentication) 并且未预先配置请求权限的授权 (Authorization),则会返回错误。你可以使用 none 来检查现有的认证 (Authentication) 和/或授权 (Authorization)。
  • consent:授权服务器在向客户端返回信息之前提示用户进行授权 (Authorization)。
  • 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 用户体验:在智能跟踪预防 (ITP) 浏览器上启用升级的 Google One Tap 用户体验。请参考 此页面 了解更多信息。
备注:

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

参考资料