快速上手！2024 新版 Google 登录 OAuth 权限验证教程

铁铁汁

已于 2024-12-07 15:19:35 修改

阅读量2.4k

点赞数 26

CC 4.0 BY-SA版权

文章标签：服务器网络 android

于 2024-12-07 12:10:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50651882/article/details/144308099

快速上手！2024 新版 Google 登录 OAuth 权限验证教程

开始准备)

迎使用前准备

谷歌账号
Google 开发者平台账号

注意：所有在项目中的修改都可能需要等待一段时间，通常不是立即生效。

步骤一：注册项目

打开 Google Cloud Console
- 访问 Google Cloud Console。
创建或选择项目
- 点击 创建项目 或 选择已有项目。

在这里插入图片描述

创建新项目
- 选择 新建项目。

在这里插入图片描述

输入项目名称
- 填写项目名称，然后点击创建。

在这里插入图片描述

等待项目创建完成
- 系统需要一些时间来创建新项目。

在这里插入图片描述

进入项目设置
- 在创建完成后，点击进入新创建的项目。

在这里插入图片描述

搜索并选择 Google Auth Platform
- 在左侧栏中搜索 Google Auth Platform，并选择进入。

在这里插入图片描述

开始配置身份验证
- 点击 开始配置身份信息。

在这里插入图片描述

填写表单信息
- 填写相关信息，选择外部并继续。

在这里插入图片描述

同意协议并创建
- 输入相关的电子邮件信息，点击 同意协议 并创建。

在这里插入图片描述

品牌塑造信息填写
- 在侧边栏点击 品牌塑造，填写相关信息后点击保存。

在这里插入图片描述

选择创建 Web 应用
- 点击 创建 Web 应用 来生成 OAuth2 Web 客户端 ID。
生成 Web 授权客户端 ID
- 在此步骤中，系统会生成一个 Web 客户端 ID，用于应用验证。
获取客户端 ID
- 生成的 客户端 ID 便是你的应用标识符，复制下来以便后续使用。

在这里插入图片描述

获取客户端 ID 完成
- 完成后，你会看到获取到的客户端 ID。

在这里插入图片描述

完成并保存
- 至此，你已经获得了 Google 登录的客户端 ID（例如：Client_id）。

在这里插入图片描述

步骤二：实际使用

注意：两种方式只能选择其中一种

1. HTML 方式

使用 Google 提供的官方 SDK，在 HTML 页面上创建登录按钮，用户点击按钮后，Google 会进行身份验证，并返回登录后的信息。

步骤：

引入 Google SDK：在页面的 <head> 部分引入 Google 的登录 SDK：
```
<script src="https://accounts.google.com/gsi/client"></script>
```

创建 Google 登录按钮：在需要使用 Google 登录的地方添加以下 HTML 代码，使用 客户端 ID 来设置你的 Google 应用：

<div
  id="g_id_onload"
  data-client_id="YOUR_CLIENT_ID"
  data-login_uri="http://localhost:5173"
  data-auto_prompt="true" />

<div class="g_id_signin" data-type="standard"></div>

参数解释：

data-client_id: 设置你的 Google 应用的客户端 ID（即上面获取的 Client_id）。
data-login_uri: 用户登录成功后重定向的 URI，通常是你的 Web 应用地址。
data-auto_prompt: 是否自动弹出登录提示，设置为 true 时，登录窗口会自动弹出。

用户点击 标准登录按钮 后，Google 会通过自动弹窗或跳转进行身份验证，验证成功后返回身份信息令牌。

2. JavaScript 登录方式

通过 API 进行手动实现，控制登录流程，并获取用户信息。

步骤：

生成 OAuth2 登录链接：使用以下 URL 构建身份验证链接：

const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=YOUR_CLIENT_ID&redirect_uri=http://localhost:5173&response_type=code&scope=openid%20email%20profile`;
window.location.href = authUrl;

该链接会引导用户到 Google 登录页面进行身份验证。

参数解释：

client_id: 你的 Google OAuth2 客户端 ID，用于标识你的应用。
redirect_uri: 用户授权后，Google 会将用户重定向到该 URL，通常是你的前端页面地址，用于接收授权码。
response_type: 固定为 code，表示使用授权码流程。
scope: 请求的权限范围，用空格分隔，常见的有：
- openid: 用于身份验证。
- email: 请求用户的电子邮件地址。
- profile: 请求用户的基本信息（如用户名、头像等）。

获取授权码：用户成功登录后，Google 会将用户重定向到你指定的 redirect_uri，并附带一个授权码（code）：
```
http://localhost:5173/moments?code=AUTHORIZATION_CODE&scope=email+profile+openid...
```

使用授权码获取 access_token：通过 POST 请求交换授权码以获取 access_token：

https://oauth2.googleapis.com/token

请求体包含：

{
  "code": "AUTHORIZATION_CODE",
  "client_id": "YOUR_CLIENT_ID",
  "client_secret": "YOUR_CLIENT_SECRET",
  "redirect_uri": "http://localhost:5173",
  "grant_type": "authorization_code"
}

参数解释：

code: 来自 Google 登录页面的授权码。
client_id: 你的 Google OAuth2 客户端 ID。
client_secret: 你的 Google OAuth2 客户端密钥。
redirect_uri: 与 OAuth2 登录时使用的重定向 URI 一致。
grant_type: 固定为 authorization_code，表示使用授权码换取 access token。

获取用户信息：使用获取到的 access_token，你可以查询用户的基本信息：
```
https://www.googleapis.com/oauth2/v1/userinfo?access_token=ACCESS_TOKEN
```

参数解释：

access_token: 使用授权码交换得到的 access_token，它允许你访问用户的个人信息。

返回的用户信息示例：

{
  "id": "USER_ID",
  "name": "John Doe",
  "email": "john.doe@example.com",
  "picture": "https://example.com/profile.jpg"
}

API 及参数解释

1. OAuth2 登录 URL

https://accounts.google.com/o/oauth2/v2/auth

参数说明：

client_id: 应用的 Google OAuth2 客户端 ID。
redirect_uri: 用户授权后 Google 会将用户重定向到该 URL。
response_type: 固定为 code，表示 OAuth2 授权码流程。
scope: 请求的权限范围，用空格分隔，可以是 openid、email、profile 等。

2. Token 请求 API

用于交换授权码获取 access_token：

https://oauth2.googleapis.com/token

参数说明：

code: 从 Google 登录页面获得的授权码。
client_id: Google OAuth2 客户端 ID。
client_secret: Google OAuth2 客户端密钥。
redirect_uri: 与 OAuth2 登录时使用的重定向 URI 一致。
grant_type: 固定为 authorization_code，表示通过授权码交换 access token。

3. 获取用户信息 API

使用 access_token 获取用户信息：

https://www.googleapis.com/oauth2/v1/userinfo

返回数据示例：

id: 用户唯一标识符。