Supabase + Google 实现 OAuth 登录

一、启用 supabase 里面的 google Auth

打开项目，Authentication。

providers。

往下走，会看到 google 。

启用，client ID，Client Secret 不用改，再往下的 2 个 checkbox 都不用勾选，不勾比较安全。

然后把这个地址，记录到本地一下，save。

二、启用 Google People API 并创建凭证

https://console.cloud.google.com/，它是一个基于浏览器的‌图形化管理界面‌，用于‌集中管理‌Google Cloud Platform（GCP）上的各种资源和服务，通过这个控制台，用户可以执行多种操作：‌ 比如本次用到的启用 API 的服务。

打开后选择这个。

搜索，Google People API，第一个就是。

点启用。

点管理，点击左侧的凭证。

创建凭证，选择这个。

选择 Web 应用，名称填写英文，写域名地址或者项目名称就行。

下图，这 2 个配置，我需要解释一下。

第一个，已获授权的 JavaScript 来源，是告诉 Google，哪些网站可以在浏览器里使用你的 Client ID 发起登录。

有哪些呢？

• 一个是本地环境方便本地调试。http://localhost:3000、http://localhost:3001、http://localhost:3002，可以多写几个，避免启动多项目冲突再来补。
• 一个是买的域名的生产环境。
• 如果在 Vercel 部署，也想测试，再加一个 Vercel 测试环境。

第二个，已获授权的重定向 URI ，是告诉 Google，用户登录成功后，Google 可以跳转回哪些具体地址，写刚刚我们已经生成的 supabase 回调地址就行了。

然后点底部的create（创建）按钮，把弹窗里的 json 文件下载一下，下一步会用到。

三、回到 Supabase 填写 Google 凭证

回到 Supabase → Authentication → Sign In/Providers → Google。

然后，这 2 个的填写，分别就是刚刚 JSON 文件里面的client_id、client_secret。

四、配置 URL（重要！）

Supabase → Authentication → URL Configuration

Site URL，是默认的主域名，默认只能一个: http://localhost:3000，或者是你的生产环境域名，这个无所谓，因为下一个跳转白名单才是必要的，一定不能忘。

Redirect URLs，是允许的跳转地址白名单（可以多个）， 点击 Add URL，这个和刚刚在google “已获授权的 JavaScript 来源”，配置的地址一样，只不过要在域名后增加/**，类似下面的写法。

http://localhost:3000/**

Redirect URLs:
http://localhost:3000/**           （保留，本地开发用）
https://xxxx.vercel.app//**               （测试环境用）
https://yourdomain.com/**          （生产环境用）

点击 Save。

来，效果如下。

点注册。