「代码分享」探索与挑战 | 简单搞定 Web 版谷歌登录

智能摘要 AI

作者描述了Web版谷歌登录对接过程中遇到的问题与解决方案。官方文档简略，未提供充分的自定义选项，UI不可控，无法在本地调试。通过`google.accounts.id.renderButton`实现了登录按钮的渲染。尽管如此，仍存在一些局限：客户端ID需对应真实域名；`prompt()`方法仅可触发一次；`renderButton`生成的按钮样式不可控，宽度受限（最大400）。总体上，此方案可用，但仍有改进空间。

前言

近期，我投身于 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 适配方式完全不同。

后端处理

后端只需参照后端对接文档即可。

总结

总的来说，这个方案勉强可用，但应该还有更好的方法。等以后有机会再深入研究吧。

「代码分享」探索与挑战 | 简单搞定 Web 版谷歌登录

前言