【教程】浏览器扩展中实现一键登录 Google（1）
内容提要
本文分享了在开发浏览器扩展AutomateGPT时集成Google SSO的经验，利用Supabase简化用户登录流程。详细介绍了在Chrome Web Store和Google Cloud中配置应用的步骤，以及如何使用Supabase进行用户管理。下篇将讨论代码编写及流程原理。
延伸解读
为什么选择 SSO 而非自建用户体系
文章指出，开发浏览器扩展时若需用户体系，自建用户名密码登录需处理注册、验证邮箱、忘记密码等复杂功能，而使用 SSO 登录可借助第三方身份标记，减少开发成本，并利用现有互联网基建，对用户也更省事。AutomateGPT 作为面向 ChatGPT 用户的辅助应用，自然选择了 Google SSO。
Chrome Web Store 占坑与 Extension ID 绑定
Google SSO 需要与 Extension ID 绑定，因此文章建议先在 Chrome Web Store 上传一个简单版本以获取固定 ID。具体操作包括：在开发者信息中心上传压缩包，创建应用后查看公钥，将公钥粘贴到 manifest.json 的 key 字段（注意删除换行符）。但生产环境构建时可能因缺少私钥而出错，可借助 CRXJS Vite Plugin 根据环境变量动态添加 key。
Google Cloud 配置中的关键细节
在 Google Cloud 配置 OAuth 时，文章强调两个易错点：一是 OAuth 同意屏幕应设置为“已发布”，否则普通用户无法正常注册登录；二是创建 OAuth 客户端 ID 时，虽然 Google 提供了“Chrome 扩展程序”选项，但必须选择“Web 应用”，并在重定向 URI 中填入 https://{Extension ID}.chromiumapp.org。这些细节是作者踩坑后的经验总结。
Supabase 作为用户管理后端的优势
文章推荐使用 Supabase 处理用户管理，因其免费套餐提供 500MB 数据库和存储带宽，整合了用户授权体系并支持常见 SSO，且有多种框架 SDK 和行级权限管理。集成 Google SSO 只需在 Authentication > Providers 中启用 Google，并填入上一步获得的客户端 ID 到指定字段。作者认为其界面友好，比 Google Cloud 更易操作。
Q&A
如何在浏览器扩展中集成Google SSO？
在开发浏览器扩展时，可以通过在Chrome Web Store创建应用并在Google Cloud中配置OAuth同意屏幕和OAuth客户端ID来集成Google SSO。
使用Supabase有什么优势？
Supabase提供免费的500MB数据库、用户授权体系的整合、丰富的SDK支持以及友好的界面，适合用作用户管理和登录功能。
在Chrome Web Store创建应用时需要注意什么？
创建应用时需要确保扩展的ID统一，并在manifest.json中添加正确的公钥，以避免在生产环境中出现问题。
为什么选择SSO登录而不是传统的用户名密码登录？
选择SSO登录可以减少开发成本，避免建立用户注册和验证功能，同时为用户提供更便捷的登录体验。
如何在Google Cloud中配置OAuth同意屏幕？
在Google Cloud中，进入API和服务，选择OAuth同意屏幕，按照向导创建并设置为已发布，以便普通用户能够正常注册登录。
下篇文章将讨论哪些内容？
下篇文章将讨论代码编写及流程原理，以便适配其他SSO提供者。
