Supabase Guide

01/03
Lesson 01

Google OAuth Integration

串接 Google 登入

本章將帶你從零開始設定 Google Cloud Console 與 Supabase Authentication,完成 Google 第三方登入串接。

1 Google Cloud Console 設定

首先需要建立 Google 專案並取得 OAuth 憑證:

1. 建立專案

前往 Google Cloud Console,建立一個新專案。

2. 啟用 API

搜尋並啟用 Google+ API (或是 Google People API)。這是取得用戶資訊所必須的。

3. 設定 OAuth 同意畫面

前往 API 和服務 > OAuth 同意畫面

  • User Type 選擇:外部 (External)
  • 填寫應用程式名稱與聯絡人資訊
  • 儲存並繼續

4. 建立憑證

前往 憑證 > 建立憑證 > OAuth 用戶端 ID

  • 應用程式類型:網頁應用程式
  • 名稱:自訂 (例如 My Supabase App)
注意:「已授權的重新導向 URI」先留空,等一下從 Supabase 取得後再回來填寫。

2 Supabase Dashboard 設定

現在回到 Supabase 進行設定:

取得 Callback URL

進入 Supabase 專案,前往 Authentication > Providers > Google

複製最上方的 Callback URL (for OAuth)

回填 Google Console

回到 Google Cloud Console 的憑證設定頁面,將此 URL 貼入「已授權的重新導向 URI (Authorized redirect URIs)」,並儲存。

3 完成串接

最後一步,將 Google 的憑證資訊填入 Supabase:

從 Google Console 取得:

  • 用戶端編號 (Client ID)
  • 用戶端密鑰 (Client Secret)

回到 Supabase > Authentication > Providers > Google:

  • 貼上 Client ID
  • 貼上 Client Secret
  • 啟用 (Enable Google) switch
  • 按下 Save

🎉 恭喜!你已經成功啟用了 Google 登入功能。

1