简单的对接web版谷歌登录

前言

这段时间对接了下web版的谷歌登录，总体来说坑非常多，即便到现在，我都感觉这个教程都只能算是一个应急处理方案，并不完美，缺点如下：

1. 文档稀少，官方提供的教程自由度很差
2. ui不可控，前端无法自定义触发按钮

不多说，开搞！

教程

官方文档和流程

官方文档：web谷歌登录

流程：

我们需要先去将需要web登录的域名去向谷歌申请一个客户端id，用于在客户端登录处理。

申请地址：开发者后台

创建凭据 --- 选择OAuth 客户端ID --- 应用类型选择 web应用 --- 自己填写一个名称

已获授权的 JavaScript 来源这个选项意思就是你允许使用这个客户端id对应的网站域名，添加对应的网站地址，个人测试填入 localhost是无效的。

已获授权的重定向 URI意思是，当用户点击了谷歌登录，此时会将网页链接前往到谷歌的登录页面，当用户在登录页面登录完成后会重定向回来，此时会在链接上携带一个token参数，我们这边用什么网页路径去接受来自谷歌参数，这个就看项目了，我个人使用spa开发，发现直接配网站域名就行了，因为我们可以直接从js中监听到回调参数，这个后面再说。

全部都填好后直接点击创建，此时可以获取到客户端id了。

谷歌id有了后，我们就可以引入脚本了。

<script src="https://accounts.google.com/gsi/client" async></script>

官方给这个脚本加了async，导致这个脚本是异步加载的，为了省事，我这边是去除async的，这样我就能保证当我代码调用sdk的时候，它一定是有值的。

然后我们去通过js初始化谷歌问登录：

// 初始化
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()方法，它会在首次弹出一个弹窗让用户点击登录，但是个人测试，他只会触发一次，如果用户不小心点了关闭，再次调用就没有效果了，所以最终我使用的是渲染登录按钮的方式，本来还行通过自定义登录按钮，调用prompt()来触发登录，可惜不行。

具体的js API我们可以查看这个文档：API文档

所有参数文档都有说明，这里就不重复赘述了。

痛苦的地方

1. 由于客户端id只能对应真实域名，导致我们在测试开发阶段需要不断的上传到测试服务器测试，本地无法调试。
2. prompt()方法不能重复调用，且只有一次机会，目前没找到重置的方式。
3. 使用renderButton方法创建的登录按钮，样式无法自定义。

登录按钮无法自定义非常的痛苦，首先官方很坑爹，它在开发模式下会直接创建一个div插入到container容器元素里面，让你以为可以通过css控制，但是你上到测试服环境，也就是域名对应的环境下，你会发现它又变成div和iframe组合的形式。

此时你就会想着，嗐，多个样式而已，又调了一次，但是当你实际用手机去查看的时候，你会发现只剩下iframe元素了，但是我们的css是无法穿透iframe控制里面的样式，这就尴尬了。

而且更坑爹的是什么，就是宽高根本不可控，

宽度最大400，高度还无法控制，这就导致在大设备上，按钮特别小一个，跟目前rem适配大小的方式完全不同，

如图所示，虽然登录没什么问题，但是按钮真让人绝望。

根据测试，多个开发者账号可以对应同一个域名

后端处理

直接把这个文档甩给后端就行了：后端对接

总结

真就凑合用，应该还有更好的办法，等以后有机会搞一下。