Supabase + Google 实现 OAuth 登录

一、启用 supabase 里面的 google  Auth

https://supabase.com，新建项目，记下，api key，数据库地址，数据库密码，这个就不写了，前面详细提到过。

打开项目，Authentication。

providers。

往下走，会看到 google 。

启用，client ID，就是上一步里面保存的，密钥不用改。密钥下面的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 发起登录。

有哪些呢？一个是本地环境方便本地调试，一个是买的域名的生产环境,如果在 Vercel 部署，也想测试，再加一个 Vercel 测试环境。

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

然后点创建，把弹窗里的 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。

来，效果如下。

点注册。