前言

这段时间对接了下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适配大小的方式完全不同,

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

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

后端处理

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

总结

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

分类: vue 项目实战 标签: web谷歌登录

评论

暂无评论数据

暂无评论数据

目录