前言
近期，我投身于 Web 版谷歌登录的对接工作。然而，这个过程充满了坑，令我深感应急处理方案的不完美。让我们一探其中的曲折经历，看看这个教程的种种局限：
- 缺乏详尽文档，官方提供的教程自由度极低。
- UI 不受控，前端无法自定义触发按钮。
不再啰嗦，让我们开启这段奇妙的旅程！
探索之路
官方文档与流程
首先，我们需要向谷歌申请一个客户端 ID，以便处理 Web 登录。
- 打开开发者后台，选择 OAuth 客户端 ID，应用类型选择 Web 应用，并填写名称。
- 在已获授权的 JavaScript 来源中添加你允许使用该客户端 ID 的网站域名。已获授权的重定向 URI 是用户完成登录后返回的地方。
填写完毕后，点击创建，你现在就可以获取到客户端 ID 了。
引入谷歌脚本
为了简便，我们去掉了官方脚本中的 async 属性，以确保在调用 SDK 时它是有值的。
<script src="https://accounts.google.com/gsi/client" async></script>然后，通过 JavaScript 初始化谷歌登录：
// 初始化
google.accounts.id.initialize({
client_id: "xxx",
callback: (loginData) => {
// 此时loginData里面包含了用户的一些信息，可以发送给后端交换我们自己的用户信息数据
}
});
// 渲染登录按钮
const container = document.documentById("#xxx");
google.accounts.id.renderButton(container, {
theme: "outline",
type: "standard",
size: "large",
width: container.offsetWidth,
locale: "en_US",
text: "signup_with",
logo_alignment: "center"
});我使用了初始化和渲染登录按钮两个方法。官方还提供了 google.accounts.id.prompt() 方法，它会在首次弹出一个弹窗，但个人测试表明它只触发一次。因此，最终我选择了渲染登录按钮的方式。
详细的 JS API 可以在这里查看。
探索中的痛苦
- 客户端 ID 只能对应真实域名，导致在测试开发阶段需要不断上传到测试服务器测试，本地无法调试。
prompt()方法不能重复调用，且只有一次机会，目前没找到重置的方式。- 使用
renderButton方法创建的登录按钮，样式无法自定义。
由于官方在开发模式下创建一个 div 插入到容器元素中，让你以为可以通过 CSS 控制，但上到测试环境后，你会发现它变成了 div 和 iframe 组合的形式。
最令人困扰的是，宽度最大只能是 400，高度却无法控制。在大设备上，按钮显得特别小，与当前的 REM 适配方式完全不同。
后端处理
后端只需参照后端对接文档即可。
总结
总的来说，这个方案勉强可用，但应该还有更好的方法。等以后有机会再深入研究吧。
📮评论