Spaces:
Running
Running
| # Hướng dẫn setup đăng nhập Google (Supabase Auth) | |
| Dự án dùng **Supabase Auth (GoTrue) + Google provider**. Với Supabase hosted, | |
| callback OAuth do Supabase host sẵn (HTTPS) → **dev trên localhost không cần ngrok**. | |
| Project ref: `<project_name>` | |
| Supabase callback URL: `https://<project_name>.supabase.co/auth/v1/callback` | |
| --- | |
| ## Bước 1 — Tạo OAuth Client trên Google Cloud Console | |
| 1. Vào https://console.cloud.google.com/ → chọn (hoặc tạo) một **Project**. | |
| 2. **APIs & Services → OAuth consent screen** (nếu chưa cấu hình): | |
| - User type: **External** → Create. | |
| - Điền App name, User support email, Developer email → Save. | |
| - Mục **Test users**: thêm `example@mail.com` (và email team) để login được khi app còn ở chế độ _Testing_. | |
| 3. **APIs & Services → Credentials → + Create credentials → OAuth client ID**: | |
| - Application type: **Web application**. | |
| - **Authorized JavaScript origins** → Add: | |
| ``` | |
| http://localhost:8000 | |
| ``` | |
| - **Authorized redirect URIs** → Add (đây là URL của Supabase, KHÔNG phải app của bạn): | |
| ``` | |
| https://vozlvfbdbepnfzlkvong.supabase.co/auth/v1/callback | |
| ``` | |
| - Create → **lưu lại `Client ID` và `Client secret`**. | |
| --- | |
| ## Bước 2 — Bật Google provider trong Supabase | |
| 1. Vào https://supabase.com/dashboard → chọn project → **Authentication → Sign In / Providers → Google**. | |
| 2. Bật **Enable**, dán **Client ID** và **Client Secret** từ Bước 1 → **Save**. | |
| --- | |
| ## Bước 3 — Cấu hình URL redirect trong Supabase | |
| **Authentication → URL Configuration**: | |
| - **Site URL**: `http://localhost:8000` (đổi sang domain production khi deploy). | |
| - **Redirect URLs** → Add: | |
| ``` | |
| http://localhost:8000/app/login.html | |
| http://localhost:8000/app/admin.html | |
| ``` | |
| (Khi deploy production thì thêm `https://<domain>/app/login.html`, v.v.) | |
| --- | |
| ## Bước 4 — Lấy anon/publishable key cho frontend → điền vào `.env` | |
| Frontend cần 1 key public để khởi tạo Supabase client. Vào | |
| **Project Settings → API Keys** (hoặc **API**), copy **một** trong hai: | |
| - **Legacy anon key** — chuỗi JWT dài bắt đầu bằng `eyJ...` (mục _Legacy / JWT keys_). Đơn giản, chắc ăn. | |
| - **Publishable key** — bắt đầu bằng `sb_publishable_...` (định dạng API key mới; cùng hệ với `sb_secret_...` mà service_role đang dùng). | |
| Cả hai đều **an toàn để lộ ra frontend** (chỉ truy cập được dữ liệu qua RLS). | |
| Dán vào `.env`: | |
| ``` | |
| SUPABASE_ANON_KEY=<dán key vừa copy> | |
| ``` | |
| > ⚠️ KHÔNG dùng `service_role` / `sb_secret_...` cho frontend — key đó bypass RLS, lộ là toang. | |
| --- | |
| ## Bước 5 — Chạy & test | |
| ``` | |
| uvicorn backend.main:app --port 8000 | |
| ``` | |
| Mở `http://localhost:8000/app/login.html` → **Sign in with Google**. | |
| - Admin (`example@gmail.com`) sẽ tự được set `role=admin` ngay lần đầu → tự nhảy vào `home.html`. | |
| - Mở thử bằng tài khoản thường → vào `/api/admin/overview` phải bị **403**. | |
| Phải mở qua `http://localhost:8000/app/...` (KHÔNG mở file `.html` trực tiếp bằng `file://` — OAuth không chạy với `file://`). | |
| --- | |
| ## Khi nào cần ngrok? | |
| Chỉ khi muốn 1 URL public HTTPS để test trên máy/thiết bị khác hoặc demo giống production: | |
| ``` | |
| ngrok http 8000 | |
| ``` | |
| Rồi thêm URL ngrok vào **Google → Authorized JavaScript origins** và **Supabase → Redirect URLs**. | |
| Dev localhost hằng ngày thì **không cần**. | |