当前位置：首页 > news >正文

谷歌开通第三方平台OAuth登录及Java对接步骤

news 2025/7/14 22:55:14

调研起因：
当然还是因为手头的海外项目，用户注册通常要用邮箱，正常流程需要给用户邮箱发送验证码，再让用户输入密码进行注册。
为了简化流程，让用户使用谷歌邮箱一键完成注册或登录，
我们直接获取谷歌邮箱、谷歌注册里的头像、姓名等信息，所以要进行谷歌对接。

本教程基于Web H5界面进行对接，同时也提供了spring-boot版本的对接Demo在：
https://github.com/youbl/study/tree/master/study-codes/google-oauth-login-demo

废话不多说，直接开始步骤说明吧：
注意：要注册和对接，必要的科学上网还是需要的，这个自己想办法吧。

1、谷歌OAuth功能申请

1.1、谷歌账号注册

首先肯定是要有一个有效的谷歌账号，去这里注册去吧：https://accounts.google.com/
题外话：谷歌注册机器人太多了，导致正常的人工注册有时也老出问题，比如IP归属地、系统语言、浏览器语言要一致等等。

1.2、创建Project

接着，要去谷歌新建一个Project项目，谷歌要求要有这个项目，才能申请后续的Oauth能力。

进入Google Cloud首页：https://console.cloud.google.com/welcome
注意：首次进入，会让你选择一个国家/地区，并同意服务条款，确认即可
在这里插入图片描述
确认后，点击页面的“创建或选择项目”，在弹窗里点击“新建项目”：

在“新建项目”页面，输入“项目名称”，位置保持默认的“无组织”即可，点击创建：

点击创建后，页面右上角会有个小窗，在创建中，请保持等待，等它变成成功：
在这里插入图片描述

1.3、选择Project

在上面的Project项目创建成功后，再点击“创建或选择项目”, 选择我们刚刚创建的项目：
在这里插入图片描述
点击创建的项目“beinet”后，界面上会显示“您目前位于 beinet”：

1.4、开通OAuth

1.4.1、选择User Type

选择好Project后，点击“快速访问”里的“API和服务”，再点左边的“OAuth 权限请求页面”，右边的“User Type”选择“外部”，再点“创建”
注：下面截图显示说会有变化，我暂时还是用旧界面填写；另外我也体验了一下新页面，内容字段都差不多，只是菜单有点变化而已。
在这里插入图片描述

1.4.2、填写应用信息

接下来的页面里，把必填项补充完整，其它项可以后面再填写：

应用名：随意，按需填写即可
用户支持电子邮件：下拉选择，正常只能选择你注册的那个谷歌邮箱
开发者联系信息：输入一个邮箱，可以跟用户支持电子邮件相同

1.4.3、选择可访问的数据范围

点击了上面页面的“保存并继续”，在新页面，点击“添加或移除范围”，可以在弹窗里把每页行数改成100，可以看全部的api，进行查看和数据范围选择，选好后，点弹窗下面的“更新”：
注意：这一步是选择OAuth能访问的用户数据范围，你也可以根据页面说明选择必要的范围，如果选择的数据特别敏感，后面是需要提交书面报告和视频找谷歌审核的，参考步骤1.4.6.2：
如果只是想用谷歌账号进行OAuth登录，只需要选择右边3项，可以不需要审核：.../auth/userinfo.email 和 .../auth/userinfo.profile 再加openid
在这里插入图片描述
点击上面的更新后，页面的“您的非敏感范围”和“您的敏感范围”都会变化，可以随时再点“添加或移除范围”进行修改：

1.4.4、选择测试用户

拉到页面最下方，点击“保存并继续”，进入测试用户配置界面，当你要先测试时，可以先指定哪些用户可以使用你的这个OAuth进行测试，我是直接下一步，去发布，这边不选择测试用户：
在这里插入图片描述

1.4.5、请求信息预览

点击“保存并继续”，进入摘要信息页面，这里会显示你前面填写的所有信息，拉到页面最下方，点“返回信息中心”，即可：
在这里插入图片描述

1.4.6、发布应用

上面信息填写完毕后，OAuth能力还是测试状态，仅测试用户可以使用，需要在这个信息中心页面，发布应用：
在这里插入图片描述

如果未“发布应用”，那么在对接测试时，会出现“禁止访问：“beinet.cn”尚未完成 Google 验证流程”：

1.4.6.1、权限太大时的发布审核申请

如果你按步骤1.4.3里说的，只选择了OAuth登录需要的数据：.../auth/userinfo.email 和 .../auth/userinfo.profile和 openid 这3项，
点发布时，会弹出如下界面：
在这里插入图片描述
直接点“确认”即可，发布后会变成：

1.4.6.2、权限太大时的发布审核申请

在前面步骤1.4.3，如果你选择了敏感数据，需要提交视频和书面报告给谷歌，才能发布，如下图：
在这里插入图片描述
我没有验证如何审核的步骤，因为我只需要OAuth登录，哈哈……

1.5、对接凭据创建

OAuth申请完，我们需要找谷歌创建client id来用于程序对接。
点页面左边的“凭据”，再点右边的“创建凭据”，选择“OAuth客户端ID”：
在这里插入图片描述
在新页面的应用类型，选择 “Web应用”：

选择了Web应用后，下面会出来3个填写项：

1.5.1、名称

这个随便填写即可。

1.5.2、已获授权的JavaScript来源

你会在哪些域名下使用当前OAuth能力，需要把域名+端口全部填写到这里：

端口如果不是80，必须明确指定端口
不能有通配符
除了localhost用于调试，其它必须是https协议
如果域名使用了端口，一定也要加上无端口的域名，比如 http://localhost，参考：https://stackoverflow.com/questions/68438293/the-given-origin-is-not-allowed-for-the-given-client-id-gsi

只有在配置了域名+端口的网页里，才允许使用谷歌的OAuth能力：
在这里插入图片描述

1.5.3、已获授权的重定向URI

如果在谷歌OAuth认证成功后，需要谷歌重定向到你的某个url，则需要把这些重定向的url，都配置在这里，否则无法回调：

同样这些url，除localhost调试用之外，必须是https的
不允许使用IP
不能有通配符
要精确匹配，比如缺少斜杠也会报错： redirect_uri_mismatch

1.6、创建和保存客户端ID

填写完步骤1.5的信息，点击“创建”，成功后，会弹出客户端ID和客户端密钥的页面，并支持下载：
把它们保存下来，没保存也没关系，后面也可以再回来复制：
注：在实际的开发中，我只用到了“客户端ID”，没有发现“客户端密钥”在哪里可以使用
在这里插入图片描述

1.7、查看客户端ID和编辑域名

如果忘记保存了，可以点凭据页面的“OAuth2.0客户端ID”下的名称，
进去查看客户端ID，并修改：“已获授权的JavaScript来源”和“已获授权的重定向URI”:
在这里插入图片描述

特别注意：
页面上的“已获授权的JavaScript来源”和“已获授权的重定向URI”
这2个的修改，并不会实时生效，经我实际测试，有时真的要等好几个小时才会生效，
所以，如果你最好提前想好域名和回调地址，提前填写，或者修改了，多等等，
我有一次等了1小时也没生效，第二天上班就生效了。

2、代码对接

上面的步骤操作完成后，有了客户端ID，把它复制下来，开始用于我们的代码对接。
参考Google的登录对接文档：https://developers.google.com/identity/gsi/web/guides/overview?hl=zh-cn

大致流程：

页面弹出Google登录对话框，登录或选择要使用的Google账号
登录后，Google返回credential，这是一个标准的jwt凭证
注：可以选择使用js函数接收jwt，也可以使用服务端回调uri接收这个jwt。
如果使用js函数接收，可以避免去Google配置回调url
使用凭证在服务端获取用户邮箱、姓名等信息

2.1、前端页面对接代码生成

在你的前端页面添加脚本引用： <script src="https://accounts.google.com/gsi/client" async></script>
参考 https://developers.google.com/identity/gsi/web/guides/client-library?hl=zh-cn
在google的代码生成器里，生成集成代码：
https://developers.google.com/identity/gsi/web/tools/configurator?hl=zh-cn
生成代码的页面长这样：
输入客户端ID，并在页面上点击：“交换到JavaScript回调”，回调函数填写你即将编写的js函数名字：
点下一步，提示你选择至少一种登录方法：
- 只开启启用 OneTap时：
  
  生成的代码如下：

<div id="g_id_onload"data-client_id="客户端ID"data-context="signin"data-callback="googleCallback"data-itp_support="true">
</div>

OneTap是Google提供的一种复用Chrome登录信息的身份验证解决方案。
你用Chrome打开页面时，如果Chrome没有登录Google账号，那么代码没有任何反应。
如果Chrome登录了Google账号，右上角会弹出一个浮层，可以一键进行登录，效果如下：
在这里插入图片描述
注：生成代码那边，如果勾选了尽可能自动选择凭据，则在页面上，会自动完成登录动作，不需要你去点击按钮。

只开启启用“使用 Google 账号登录”按钮时：

生成的代码如下：

<div id="g_id_onload"data-client_id="客户端ID"data-context="signin"data-ux_mode="popup"data-callback="googleCallback"     data-auto_prompt="false">
</div>
<div class="g_id_signin"data-type="standard"data-shape="rectangular"data-theme="outline"data-text="signin_with"data-size="large"data-logo_alignment="left">
</div>

这个代码会在页面上显示一个登录按钮，使用Chrome打开页面时，Chrome已登录与未登录，显示的按钮样式分别如下：
在这里插入图片描述
点击登录按钮会弹出授权页面：

你也可以同时开启启用OneTap 和 启用“使用 Google 账号登录”按钮，
这样上面2种登录效果都会出现。

2.2、js接收jwt结果

上面生成代码里使用的javasript函数 googleCallback 参考代码如下：

function googleCallback(arg) {let jwt = arg.credential;let userInfoUrl = 'google/credential?credential=' + encodeURIComponent(jwt);fetch(userInfoUrl).then(response => {if (!response.ok) {throw new Error('Network response was not ok ' + response.statusText);}return response.json();}).then(data => {document.getElementById('txtUserInfo').value = 'google用户信息:\r\n' +JSON.stringify(data, null, 4);}).catch(error => {console.error('There has been a problem with your fetch operation:', error);});
}

接收一个arg参数，把收到的credential 扔给服务端解析。

2.3、服务端验证和解析credential

js里调用的接口代码逻辑参考如下：

@GetMapping("google/credential")
@SneakyThrows
public GoogleUser credential(@RequestParam String credential) {return getMailFromCredential(credential);
}@SneakyThrows
public static GoogleUser getMailFromCredential(String credential) {// 官方文档没写Builder的2个参数怎么来的，参考这里写的：https://stackoverflow.com/questions/37172082/android-what-is-transport-and-jsonfactory-in-googleidtokenverifier-builderHttpTransport httpTransport = GoogleNetHttpTransport.newTrustedTransport();JsonFactory jsonFactory = GsonFactory.getDefaultInstance();GoogleIdTokenVerifier verifier = new GoogleIdTokenVerifier.Builder(httpTransport, jsonFactory)// Specify the CLIENT_ID of the app that accesses the backend:.setAudience(Collections.singletonList(Google客户端ID))// Or, if multiple clients access the backend://.setAudience(Arrays.asList(CLIENT_ID_1, CLIENT_ID_2, CLIENT_ID_3)).build();GoogleIdToken idToken = verifier.verify(credential);Assert.notNull(idToken, "Google credential is not valid");GoogleIdToken.Payload payload = idToken.getPayload();return convertToGoogleUser(payload);
}private static GoogleUser convertToGoogleUser(GoogleIdToken.Payload payload) {if (payload == null) {return null;}return new GoogleUser().setId(payload.getSubject()).setEmail(payload.getEmail()).setFamilyName(payload.get("family_name") + "").setGivenName(payload.get("given_name") + "").setName(payload.get("name") + "").setPicture(payload.get("picture") + "").setVerifiedEmail((Boolean) payload.get("email_verified"));
}

最终解析出的结果参考：

google用户信息:
{"id": "12345","email": "beinet@gmail.com","verifiedEmail": true,"name": "水边Bl","givenName": "Bl","familyName": "水边","picture": "https://lh3.googleusercontent.com/a/xxx"
}

2.4、交换到登录URI

这种登录方式，不需要用Javascript函数接收，Google登录后，会直接302跳转到你提供的后端API，你需要从Request上下文里解析出credential后继续，这边就不多介绍了。

3、常见问题

新申请的账号，在用户登录时，通常会提示需要验证：
在这里插入图片描述
对用户，要让他点击“高级”，再点显示出来的转至即可。
对于我们开发者，需要参考官方说明处理： https://support.google.com/cloud/answer/7454865