手把手让你的网站接入谷歌登录

108 阅读2分钟

hello,我是 kite。

之前分享过《AI编程实现注册/登录功能,手把手教学了》,实现了 github 登录。

这次接着分享另一种登录方式:#谷歌登录。

特别是做出海的 SaaS 系统,Google 登录是最基本的功能。

前置知识

本篇依旧是基于 supabase 实现登录功能,如果你不了解 supabase,强烈建议看看往期内容《AI编程实现注册/登录功能,手把手教学了》,里面对 supabase 介绍的比较详细。

本篇,我会跳过 supabase 注册等重复步骤,直接写谷歌登录的核心部分。

开启并配置 Google 登录功能

访问 supabase 并注册:supabase.com/

在 supabase 中点击 Google 进入配置界面:

先把功能打开,然后点击保存,client ID 和 秘钥我们待会去 Google Cloud 获取:

这个回调地址留个印象啊,我后面提到回调地址,你就得回来 copy 这个地址。

新建一个项目,项目名称随便写,然后创建:

点击 Google cloud 左侧菜单,进入 OAuth 权限请求页面:

输入应用名称和邮箱,继续下一步:

受众群体选外部,然后输入邮箱,勾选用户数据政策即可创建 OAuth 配置:

点击左侧导航菜单,点击“凭证”:

创建凭证:

我的是 web 应用,就选择 web 应用:

往下滑动,会看到“重定向 URL”,还记得之前提到的“回调地址”吗,copy 过来:

点击“创建”按钮后,一般过几秒就能看到 客户端ID 和 秘钥,先不要点击“确定”,点击确定后你就看不到秘钥了。

复制 客户端ID 和 秘钥,填入 supabase,保存:

vibe coding 实现 Google 登录功能

接下来的操作在《AI编程实现注册/登录功能,手把手教学了》里实现 github 登录时也有介绍,在这里就只写核心过程。

直接将以下提示词发送给 claude code,或是其他 AI 编程工具:

我想为当前项目通过 supabase 实现 Google 登录。
这是 supabase 的文档:http://https//supabase.com/docs/guides/auth/social-login/auth-google

请使用SSR认证方式,参考文档:
https://supabase.com/docs/guides/auth/server-side/creating-a-client

功能并不复杂,AI 一顿操作很快就能实现。

测试Google登录

我这边测试是ok的,放上登录前和登录后的截图。

到此,整个登录功能就实现了,大家快去试试吧。

我是 kite,希望我的内容对你有帮助。

大家加油 : )