Cấu hình Google OAuth cho domain mới (Next.js và .NET API)

Khi hệ thống chuyển sang một email quản trị mới và domain mới, bạn phải làm lại thông tin xác thực Google OAuth: khai báo ứng dụng trên Google Cloud Console, lấy Client ID và Client Secret mới, rồi cập nhật biến môi trường cho cả Frontend (Next.js) lẫn Backend (.NET API). Bài này đi lần lượt từng bước.

Trong toàn bài, example.com là domain Frontend và api.example.com là domain Backend - thay bằng domain thật của bạn. <client-id> và <client-secret> là hai giá trị Google cấp ở Bước 2.

Tóm tắt thao tác nhanh

1. Google Cloud: tạo Client ID loại Web application trong mục Credentials.
2. Authorized JavaScript origins: các URL gốc (http://localhost:3000, https://example.com).
3. Authorized redirect URIs: các đường dẫn callback (ví dụ .../api/auth/google/callback).
4. Copy Client ID và Client Secret vừa sinh ra.
5. Frontend: cập nhật NEXT_PUBLIC_API_URL, NEXT_PUBLIC_GOOGLE_CLIENT_ID trong .env.
6. Backend: cập nhật Google__ClientId, Google__ClientSecret, Google__RedirectUri và Frontend__BaseUrl.

Bước 1: Khai báo ứng dụng trên Google Cloud (OAuth consent screen)

Nếu bạn chưa tạo màn hình đồng ý (consent screen) cho email mới:

1. Đăng nhập Google Cloud Console.
2. Tạo dự án mới hoặc chọn dự án hiện tại.
3. Vào APIs & Services -> OAuth consent screen (hoặc nhấn nút Get Started trên giao diện mới).
4. Chọn User Type: External và tiếp tục.
5. Điền thông tin:
   • App name: tên ứng dụng của bạn.
   • User support email và Developer contact email: email của bạn.
   • Authorized domains: tên miền chính (ví dụ example.com).
6. Nhấn Save and Continue cho đến khi hoàn thành (Finish).

Bước 2: Tạo Credentials để lấy Client ID và Client Secret

1. Chuyển sang mục Credentials (menu bên trái).
2. Nhấn nút xanh + CREATE CREDENTIALS (hoặc CREATE CLIENT) -> chọn OAuth client ID.
3. Tại trường Application type, chọn Web application.
4. Đặt Name cho client (ví dụ Project Web Client).
5. Ở Authorized JavaScript origins (nguồn gốc ứng dụng), thêm:
   • http://localhost:3000
   • https://example.com
6. Ở Authorized redirect URIs (đường dẫn chuyển hướng trả về), thêm đủ các link callback:
   • http://localhost:3000/vi/auth/callback
   • http://localhost:3000/en/auth/callback
   • https://example.com/vi/auth/callback
   • https://example.com/en/auth/callback
   • https://api.example.com/api/auth/google/callback (dành cho Backend xử lý)
7. Nhấn Create. Sao chép ngay Client ID và Client Secret vừa được cấp.

Bước 3: Cập nhật biến môi trường cho Frontend

Mở file .env (hoặc cấu hình môi trường deploy) của dự án Frontend (Next.js) và thay đổi:

# Trỏ Backend base URL về domain mới
NEXT_PUBLIC_API_URL=https://api.example.com/api

# Google Client ID vừa lấy ở Bước 2
NEXT_PUBLIC_GOOGLE_CLIENT_ID=<client-id>

Bước 4: Cập nhật biến môi trường cho Backend

Mở file .env (hoặc file cấu hình production) của dự án Backend (.NET API) và sửa:

# Cấu hình Google OAuth
Google__ClientId=<client-id>
Google__ClientSecret=<client-secret>
Google__RedirectUri=https://api.example.com/api/auth/google/callback

# Frontend base URL, dùng để setup CORS và các logic redirect liên quan
Frontend__BaseUrl=https://example.com

Lưu ý