Google Cloud Console 配置 OAuth2.0 客户端

奔跑路上的Me
1 阅读4分钟

一、访问 Google Cloud Console

打开浏览器，输入网址进入 Google Cloud Console 页面，使用谷歌账号完成登录，这是所有操作的起点。

二、创建新项目或选择现有项目

谷歌登录依赖该 API，必须先启用：

  1. 在左侧菜单栏找到「API 和服务」→「库」。
  2. 在搜索框输入「Google Identity Services API」，找到后点击进入。
  3. 点击「启用」，等待 API 启用完成（约 1 分钟）。 如果是首次使用，可以点击页面上的新建项目按钮，输入项目名称完成创建；也可以直接选择已经创建好的项目进行后续操作。前端测试也可以跳过此步

三、启用 Google+ API

在 API 库中搜索 Google+ API，找到后点击启用按钮，等待片刻，API 就会成功启用，为后续客户端创建提供支持。 这一步是为了让谷歌认可你的应用，测试阶段选择「外部」即可：

  1. 在左侧菜单栏点击「API 和服务」→「OAuth 同意」。

  2. 选择用户类型：

    • 外部：适合测试 / 公开应用（个人账号默认选这个）。
    • 内部：仅适用于 Google Workspace 域内用户（企业账号用）。点击「创建」。

  3. 填写基本信息（测试版只需填必填项）：

    • 应用名称：自定义（如「测试谷歌登录应用」）。
    • 支持邮箱：填写你的谷歌账号邮箱（自动填充）。
    • 开发者联系信息：填写你的邮箱（必填）。点击「保存并继续」。

  4. 「范围」步骤（测试版无需配置）：直接点击「保存并继续」。

  5. 「测试用户」步骤（关键！测试版必须添加）：

    • 点击「添加用户」，输入你用于测试的谷歌账号邮箱（多个可换行）。
    • 只有添加的测试用户能使用该 Client ID 登录，避免应用未审核被限制。点击「保存并继续」。

  6. 查看摘要，确认无误后点击「返回仪表盘」。 image.png

四、在凭据页面创建 OAuth2.0 客户端 ID

  • 在左侧菜单栏点击「API 和服务」→「凭据」。

  • 点击顶部「创建凭据」→ 选择「OAuth 客户端 ID」。

  • 配置客户端类型（重点！）：

    • 应用类型：选择「Web 应用」（因为是网页端谷歌登录）。

    • 名称：自定义（如「测试网页登录客户端」）。

    • 配置授权来源 / 重定向 URI（测试环境）：

      • 「已授权的 JavaScript 来源」：添加你的测试前端地址，如 http://localhost:5173。

      • 「已授权的重定向 URI」：

        • 如果用「弹窗模式」（ux_mode: popup）：测试阶段可留空（或填前端地址）。
        • 如果用「重定向模式」（ux_mode: redirect）：填后端回调地址，如 http://localhost:3000/callback。

  • 点击「创建」，此时会弹出一个窗口，显示：

    • 客户端 ID（Client ID） ：这就是你需要的核心参数（形如 1234567890-abc123def456.apps.googleusercontent.com）。
    • 客户端密钥（Client Secret）：后端 OAuth 授权码模式会用到，谷歌登录（ID Token 模式）暂时用不到。

  • 点击「下载 JSON」（可选），保存包含 Client ID 的配置文件，方便后续使用。 进入左侧菜单栏的凭据页面，点击创建凭据，选择 OAuth2.0 客户端 ID，按照页面提示依次填写相关信息。

image.png image.png

image.png

image.png

五、测试版 Client ID 的使用限制与注意事项

  1. 测试用户限制：未提交审核的应用，仅「OAuth 同意屏幕」中添加的测试用户能使用该 Client ID 登录，其他账号登录会提示 “应用未验证”。

  2. 有效期：测试版 Client ID 无过期时间，只要项目不删除就可用；若要上线，需提交应用审核，移除测试用户限制。

  3. 本地测试：确保授权来源配置了 localhost/127.0.0.1，否则会提示「来源未授权」。

  4. 常见错误：

    • 提示「invalid client」：检查 Client ID 是否复制正确，或授权来源是否匹配。
    • 提示「unauthorized_client」：检查测试用户是否添加到 OAuth 同意屏幕的测试列表。

六、快速验证 Client ID 是否有效

获取 Client ID 后，可在之前的 Vue3 谷歌登录组件中替换 clientId，启动前端项目：

  • 点击谷歌登录按钮，能正常弹出谷歌账号选择窗口 → 说明 Client ID 配置有效。
  • 选择测试用户后，能返回 ID Token → 说明配置完全正确。

总结

  1. 谷歌测试版 Client ID 注册核心流程：创建云项目 → 启用 Identity Services API → 配置 OAuth 同意屏幕（添加测试用户）→ 创建 Web 类型 OAuth 客户端 ID。
  2. 测试阶段关键配置：授权来源填 localhost:5173（前端），测试用户必须添加到 OAuth 同意屏幕。
  3. 验证标准：能弹出谷歌登录窗口并返回 ID Token，即表示 Client ID 可用。

如果操作中遇到「应用未验证」「invalid client」等错误，优先检查：① 测试用户是否添加 ② 授权来源是否匹配 ③ Client ID 是否复制正确。

avatar
文章
阅读
粉丝