Supabase 接入 Google 一键登录完整配置指南

# Supabase 接入 Google 一键登录完整配置指南

这篇文章记录一下在 `Supabase Auth` 中接入 `Google 一键登录` 的完整流程，适合 `Nuxt`、`Next.js`、`React`、`Vue` 等前端项目使用。

如果你的目标是：

- 用户可以点击 `Continue with Google`
- 跳转到 Google 授权页
- 授权完成后回到你的网站
- 最终由 `Supabase Auth` 帮你管理登录态

那么按下面这套配置就可以跑通。

---

## 一、整体原理

Google 登录并不是你的网站直接和 Google 完成全部交互，而是通过 `Supabase` 作为中间层来完成。

流程大概是：

1. 用户点击你网站上的 `Continue with Google`
2. 前端调用 `supabase.auth.signInWithOAuth({ provider: 'google' })`
3. Supabase 把用户带到 Google 授权页
4. Google 授权完成后，回调到 `Supabase` 提供的 callback 地址
5. Supabase 再把用户带回你的网站
6. 你的网站从 Supabase 中拿到用户会话

所以关键不是只配你自己的网站地址，而是要同时配置：

- Google Cloud Console
- Supabase Authentication Provider
- Supabase URL Configuration
- 你的前端环境变量

---

## 二、准备工作

在开始之前，你需要准备好：

- 一个 `Supabase` 项目
- 一个 `Google Cloud` 项目
- 你的网站域名，比如 `https://imvz.com`
- 本地开发地址，比如 `http://localhost:3000`

如果你用的是 Vercel 之类的平台，建议正式域名、测试域名、本地地址都提前规划好。

---

## 三、从 Supabase 获取项目参数

进入 `Supabase` 项目后台后，先找到下面两个参数。

路径：

`Settings -> API`

你会看到：

### 1. Project URL

例如：

```txt
https://your-project-ref.supabase.co
```

这个值在前端环境变量里通常写成：

```env
NUXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
```

### 2. Publishable / anon key

例如：

```txt
sb_publishable_xxx
```

这个值在前端环境变量里通常写成：

```env
NUXT_PUBLIC_SUPABASE_ANON_KEY=sb_publishable_xxx
```

注意：

- 前端只能用 `anon / publishable key`
- 不要把 `service_role` 暴露到前端

---

## 四、在 Supabase 中开启 Google Provider

进入：

`Authentication -> Providers -> Google`

然后：

1. 打开 Google Provider 开关
2. 稍后把 Google Cloud 生成的 `Client ID` 和 `Client Secret` 填到这里

在这个页面里，Supabase 通常还会给你一个固定的 callback 地址。

一般格式是：

```txt
https://your-project-ref.supabase.co/auth/v1/callback
```

这个地址非常重要，后面要填到 `Google Cloud Console` 的回调地址里。

---

## 五、配置 Supabase 的站点 URL 和回调 URL

进入：

`Authentication -> URL Configuration`

你至少要配置下面这些。

### 1. Site URL

正式站地址，例如：

```txt
https://imvz.com
```

如果你当前还没上正式域名，也可以先填：

```txt
https://imvz.vercel.app
```

### 2. Redirect URLs

建议加入：

```txt
https://imvz.com
https://www.imvz.com
http://localhost:3000
```

如果你有预览环境，也可以补上 Vercel preview 域名。

注意：

- 这里填的是“允许回跳到哪些地址”
- 不填的话，Google 登录成功后可能回不到你的网站

---

## 六、去 Google Cloud Console 创建 OAuth 凭据

打开：

`Google Cloud Console -> APIs & Services -> Credentials`

### 1. 如果还没配 OAuth consent screen

先去：

`APIs & Services -> OAuth consent screen`

建议配置：

- User Type: `External`
- App name: 你的产品名，比如 `IMVZ`
- Support email: 你的邮箱
- Developer contact information: 你的邮箱

如果当前只是自己测试，测试用户范围先小一点也可以。

### 2. 创建 OAuth Client ID

进入：

`Credentials -> Create Credentials -> OAuth client ID`

类型选择：

`Web application`

---

## 七、Google Cloud 里应该怎么填写回调信息

这是最关键的一步。

### 1. Authorized JavaScript origins

建议加入：

```txt
https://your-project-ref.supabase.co
https://imvz.com
http://localhost:3000
```

如果你只在正式站和本地开发，可以先填这几个。

### 2. Authorized redirect URIs

这里必须填 Supabase 给你的 callback 地址，例如：

```txt
https://your-project-ref.supabase.co/auth/v1/callback
```

注意这一点非常重要：

- 不是填你前端页面地址
- 是填 Supabase 的 callback 地址

很多人 Google 登录失败，就是因为把回调地址写成了自己前端页面路径。

---

## 八、把 Google 的 Client ID 和 Client Secret 填回 Supabase

当你在 Google Cloud 里创建完 OAuth Client 后，会拿到：

- `Client ID`
- `Client Secret`

然后回到：

`Supabase -> Authentication -> Providers -> Google`

填入：

- Client ID
- Client Secret

保存即可。

到这里为止，后台配置就基本完成了。

---

## 九、前端代码怎么调用 Google 登录

以 Nuxt / Vue 为例，前端调用通常是这样的：

```ts
const { error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: window.location.origin
  }
})
```

如果你不显式传 `redirectTo`，也可以依赖 Supabase 的默认 URL 配置。

如果你想更明确控制回跳地址，可以写成：

```ts
const { error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: 'https://imvz.com'
  }
})
```

---

## 十、Nuxt 项目里的环境变量示例

```env
NUXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
NUXT_PUBLIC_SUPABASE_ANON_KEY=sb_publishable_xxx
```

如果你本地和线上分环境，建议：

### 本地 `.env.local`

```env
NUXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
NUXT_PUBLIC_SUPABASE_ANON_KEY=sb_publishable_xxx
```

### Vercel 环境变量

在 `Settings -> Environment Variables` 里填同样的两个值。

---

## 十一、常见报错排查

### 1. Unsupported provider: provider is not enabled

原因：

- Supabase 后台没有打开 Google Provider

解决：

- 到 `Authentication -> Providers -> Google` 打开开关

### 2. redirect_uri_mismatch

原因：

- Google Cloud 里的 `Authorized redirect URIs` 没填对

解决：

- 确认填的是：

```txt
https://your-project-ref.supabase.co/auth/v1/callback
```

### 3. 登录后回不到你的网站

原因：

- Supabase 的 `Site URL` 或 `Redirect URLs` 没填
- 或者 `redirectTo` 写错

解决：

- 检查 `Authentication -> URL Configuration`
- 检查前端 `signInWithOAuth` 的 `redirectTo`

### 4. 本地能登录，线上不行

原因：

- 线上域名没有加入允许列表

解决：

- 在 Supabase 和 Google Cloud 两边都补上正式域名

### 5. 线上能登录，本地不行

原因：

- `http://localhost:3000` 没加入允许列表

解决：

- 在 `Redirect URLs` 和 `Authorized JavaScript origins` 里都补上本地地址

---

## 十二、推荐的正式配置清单

假设你的正式域名是 `https://imvz.com`，Supabase 项目是 `https://abcxyz.supabase.co`。

### Supabase URL Configuration

**Site URL**

```txt
https://imvz.com
```

**Redirect URLs**

```txt
https://imvz.com
https://www.imvz.com
http://localhost:3000
```

### Google Cloud

**Authorized JavaScript origins**

```txt
https://abcxyz.supabase.co
https://imvz.com
http://localhost:3000
```

**Authorized redirect URIs**

```txt
https://abcxyz.supabase.co/auth/v1/callback
```

---

## 十三、上线建议

如果你准备把产品正式对外，建议再补这几件事：

- Google OAuth consent screen 的品牌信息完善
- 隐私政策与服务条款页面补全
- 登录成功后把用户同步进你自己的业务表
- 对未完成邮箱验证/异常账户做保护
- 为后台管理员登录单独做权限校验，不要只依赖前端状态

---

## 十四、总结

如果你要用 Supabase 接入 Google 一键登录，核心就记住 4 个点：

1. 在 `Supabase` 里打开 `Google Provider`
2. 在 `Google Cloud` 里创建 `OAuth Client`
3. `Google redirect URI` 填 `Supabase callback`
4. `Supabase URL Configuration` 里把正式域名和本地地址补齐

把这 4 步配正确，Google 登录基本就能一次跑通。

如果你后面还要继续做：

- 邮箱密码登录
- 管理员后台登录
- 用户资料同步
- 订阅套餐和积分系统

也建议都统一围绕 Supabase Auth 来做，这样整体会更省心。