【教程】浏览器扩展中实现一键登录 Google（1）

本文分享我最近开发 AutomateGPT 扩展时集成 Google SSO 的经验。除了 Google 外，我还用到 Supabase 提供的用户管理与登录功能。

本来想一篇博客搞定，没想到写着写着就超长了，那就拆成两篇吧，哈哈。

内容简介

开发浏览器扩展的时候，我们有时候需要建立用户体系，以便更好的服务用户。此时我们有多个选择：

1. 让用户使用用户名密码登录，提供完整的注册、登录、验证邮箱、忘记密码等
2. 让用户使用 SSO 登录

很明显，第二种更好，因为我们不需要建立用户注册、校验等一系列功能，只要用第三方提供的用户身份标记就好。这样一来可以减少我们的开发成本，二来可以利用现有的互联网基建，对用户来说也更省事。

作为面向 ChatGPT 用户的辅助应用，AutomateGPT 选择用户体系时，我很自然的选择了 Google。

吐槽

Google 是个让人又爱又恨的公司，一方面他们提供大量免费的互联网基建，给我们开发带来巨大帮助；另一方面，由于摊子铺的太大，各种年久失修或者考虑不周，导致我们经常要自己踩坑自己摸索才能最终完成想要的作品。

这次也是。Google 提供的浏览器扩展开发文档包含一些错误和遗漏；Google Cloud 又是完全的黑盒，导致我折腾了将近两天才把这项功能做好。

行吧，闲言少叙，下面开始正文。

在 Chrome Web Store 里占个坑

因为 Google SSO 要跟 Extension ID 绑定在一起，所以我们要先去 Chrome Web Store 里占个坑，保证以后扩展无论安装在哪里，都是统一的 ID。

创建浏览器扩展项目

我先假定大家都有一些扩展开发经验，可以自行创建浏览器扩展。如果你需要从零学起，我刚好做过一期相关视频，可以方便你快速上手：

肉山小教程-浏览器扩展开发-快速入门_哔哩哔哩_bilibili

创建完毕，在本地调试没问题之后，就打包，上传 Chrome Web Store。此时我们不需要添加太多功能，只要能加载，能看到效果就行，并不是最终发布，所以不用太担心。

CWS 里创建应用

假定各位读者已经拥有 Google 账号，那么就请进入开发者信息中心（Developer Dashboard）。

接着点击“上传新内容“，上传刚才准备好的压缩包，稍等片刻，CWS 会帮我们创建一个应用，此时就能看到应用 ID 了，大约如图所示：

具体的 ID 不重要，点击图中红框的 View public key，将 key 复制下来，粘贴到插件的 manifest.json 里，记得要把换行删掉：

{
  "key": "刚才复制的 key，不能有换行符"
}

但是 manifest.json 加了 key 之后，为生产环境构建发版时可能会出问题（因为本地没有私钥，无法信任公钥）。此时，如果你用了我以前推荐的 CRXJS Vite Plugin，就很简单，判断一下当前环境即可：

export default defineManifest(async function (env) {
  return {
    ...process.env.NODE_ENV === 'development' && {
      key: '刚才复制的 key，不能有换行符',
    },
  };
});

所以，推荐使用 Vite + CRXJS Vite Plugin 构建浏览器扩展开发环境。如果你还不会使用这个插件，建议看我另一个视频：

2024 浏览器扩展开发必备：CRXJS Vite Plugin_哔哩哔哩_bilibili

为了验证效果，可以在浏览器里删除之前导入的测试扩展，然后重新加载改好 key 的版本。如果之后看到的 ID 与你在 CWS 开发者中心看到的一致，那就说明操作成功。

在 Google Cloud 里完成配置

接下来，我们需要在 Google Cloud 里完成配置。如果你已经有项目，那么沿用之前的项目也没问题。如果没有的话，那就新建一个。目前 Google Cloud 还是免费的，新用户更是有 $300 的试用额度，可以放心体验。

同样，我假定各位读者已经拥有 Google 账号，那么打开 Google Cloud Console，并按照向导指引创建即可。

创建完成，点击左上角的菜单按钮，从里面选择“API和服务”，然后，选择“OAuth 同意屏幕”，跟随引导创建 OAuth 同意屏幕。注意，因为新应用默认采用白名单，为了之后普通用户能够正常注册登录，最好把应用设置为“已发布”。

然后，进入“凭据”页面，添加登录凭证。点上面的“创建凭据“，然后选”OAuth 客户端 ID”。注意，虽然 Google 给我们准备了”Chrome 扩展程序“这个选项，但是不能选，要选择”Web 应用“。

然后在”已获授权的重定向 URI”里填入 https://{刚才获得的 Extension ID}.chromiumapp.org，创建凭证。然后你会得到一个形如 xxxx-ooooo.apps.googleusercontent.com 的客户端 ID。

在 Supabase 里注册应用

用户登录免不了用到一些通用功能，比如用户管理、用户信息存储等等。开发这些功能免不了需要很多工作量，我觉得自己做并不合算。所以我建议大家选用一些第三方服务。

我目前比较喜欢使用 Supabase，大概有几点优势：

1. 免费 500MB 数据库和若干存储、带宽
2. 很好的整合了用户授权体系，支持常见平台的 SSO
3. 各种常见框架都有 SDK，包括我最常用的 Nuxt
4. 行级权限管理，方便作为 Serverless 数据库使用
5. PostgreSQL，插件生态丰富，接入 pgvector 就能作为矢量数据库

简而言之，下限有保证，上限有空间，非常推荐。使用 Supabase 集成 Google SSO 非常简单。另外，因为 Supabase 的界面比较友好，不像 Google Cloud 那么反人类，我就不截图了，相信大家很容易找到。

1. 注册账号
2. 创建项目
3. Authentication > Providers
4. Enable Google，然后将上一步获得的客户端 ID 填入 “Authorized Client IDs (for Android, One Tap, and Chrome extensions) ”里面即可

小结

本文主要介绍了开发环境的配置。下篇博客会讲解如何写代码，并解释整个流程的原理，方便大家适配其它 SSO provider。

如果大家对浏览器扩展开发有什么问题和想法，欢迎留言提问、讨论。

---

AutomateGPT 是我们最近开发的 ChatGPT 增强扩展，方便大家更好的使用 ChatGPT，充分利用包月的价值。它能够帮你重复执行多个 prompt；也可以分解大文件，拆成块依次处理（开发中）。可以用在大文本翻译、批量生成内容、网站分析等领域。欢迎大家使用，反馈问题和意见，谢谢。