Google Cloud OAuth

บทนี้จะแนะนำวิธีตั้งค่า Google OAuth สำหรับระบบ Login ด้วย Google Account ซึ่งเป็นส่วนสำคัญของ Vibe Coding Boilerplate

Google Cloud Project สามารถสร้างทีเดียว (Project เดียว, App เดียว)และใช้ซ้ำกันในหลาย ๆ Project Vibe Coding ของเราได้

ทำความเข้าใจโครงสร้าง Google Cloud Project

Google Cloud Project 1 อัน มีได้แค่ 1 Application เช่น Quotation Project = Quotation App

แต่ 1 Application อาจจะมีได้หลาย Client / Platform เช่น Quotation App มีทั้ง Platfrom: Mobile App, Web, TV เป็นต้น

OAuth Consent Screen = “Application” คือสิ่งที่ผู้ใช้ มองเห็น ตอนหน้า popup ขอ permission เช่น ชื่อแอป โลโก้ โดเมน scope ที่ขอ หนึ่ง project มีได้แค่ 1 consent screen คือแอปในสายตาผู้ใช้มีได้ “1 ชื่อ” ต่อ project

OAuth Client คือ credential จริง ๆ ที่ใช้ในโค้ด ได้แก่ client_id และ client_secret หนึ่ง project สร้างได้หลาย client แต่ทุก client แชร์ consent screen เดียวกัน แยกตาม platform type เช่น Web App, Android, iOS, Desktop

ขั้นตอนที่ 1: สร้าง Google Cloud Project

  1. เข้าไปที่ Google Cloud Console
  2. คลิกที่ Select a project (1) แล้วคลิก New project (2)
หน้า Select a project
  1. กรอกชื่อ Project (เช่น vibe-coding-project) แล้วคลิก Create
หน้า New Project

ขั้นตอนที่ 2: เข้าสู่ OAuth Consent Screen

หลังจากสร้าง project แล้ว:

  1. คลิกเมนู ☰ ด้านซ้าย
  2. ไปที่ APIs & Services (1) > OAuth consent screen (2)
เมนู OAuth consent screen
  1. หน้าจอจะแสดง OAuth Overview ให้คลิก Get started (กรณีที่เคยสร้างมาแล้วให้เข้าไปที่ เมนูย่อยที่ชื่อ Clients แทนและคลิก Create client)
หน้า Get started

ขั้นตอนที่ 3: ตั้งค่า Project Configuration

3.1 App Information

กรอกข้อมูลแอปพลิเคชัน:

  • App name — ชื่อที่จะแสดงตอน login (เช่น “Vibe Coding”)
  • User support email — เลือก email ของคุณ
App Information

3.2 Audience

เลือก External เพื่อให้ทุกคนที่มี Google Account สามารถ login ได้

เลือก External

3.3 Contact Information

กรอก email ที่ Google จะใช้แจ้งเตือนเกี่ยวกับ project

Contact Information

3.4 Finish

ติ๊กยอมรับ Google API Services: User Data Policy แล้วคลิก Continue > Create

Finish

ขั้นตอนที่ 4: Publish to Production ⚠️ สำคัญ!

หลังจากสร้าง OAuth consent screen แล้ว ไปที่เมนู Audience (1) คุณจะเห็น Publishing status เป็น “Testing”

ให้คลิก “Publish app” (2) เพื่อเปลี่ยนเป็น Production

Publish app

⚠️ ทำไมต้อง Publish to Production?

Testing ModeProduction Mode
จำกัด 100 users ตลอดอายุ appไม่จำกัดจำนวน users
ต้องเพิ่ม test users ด้วยมือทุกคนสามารถ login ได้

สำหรับ app ที่ใช้เฉพาะ scope พื้นฐาน (email, profile) ไม่ต้องผ่านการ verify จาก Google

ขั้นตอนที่ 5: สร้าง OAuth Client ID

  1. ไปที่เมนู Clients (1) แล้วคลิก Create client (2)
หน้า Clients
  1. เลือก Application type เป็น Web application
  2. ตั้งชื่อ (เช่น “Web client 1”)
  3. ในส่วน Authorized redirect URIs — ใส่ callback URL ตามวิธีที่คุณทำงาน
Create OAuth client ID

Authorized Redirect URIs ตามวิธีการทำงาน

ใส่ ทุก URL ที่คุณจะใช้งาน (สามารถใส่ได้หลาย URL):

วิธีการทำงานRedirect URI
Local Developmenthttp://localhost:3000/api/auth/callback/google
GitHub Codespaces

การดู Port 3000 และ URL ที่กำลังใช้งานใน GitHub Codespaces		https://<codespace-name>-3000.app.github.dev/api/auth/callback/google
Production (Railway)https://your-app.railway.app/api/auth/callback/google
Custom Domainhttps://your-domain.com/api/auth/callback/google

💡 ความสัมพันธ์กับ NEXTAUTH_URL:

Authorized Redirect URI = NEXTAUTH_URL + /api/auth/callback/google

NEXTAUTH_URLRedirect URI
http://localhost:3000http://localhost:3000/api/auth/callback/google
https://my-codespace-3000.app.github.devhttps://my-codespace-3000.app.github.dev/api/auth/callback/google

ค่า NEXTAUTH_URL จะถูกถามใน npm run setup — ต้องตรงกับ domain ที่ใส่ใน Google Cloud

ขั้นตอนที่ 6: บันทึก Client ID และ Client Secret

หลังจากสร้างเสร็จ จะได้ Client ID และ Client Secret

OAuth client created

⚠️ สำคัญ: Copy ค่าเหล่านี้ไว้ทันที! Client Secret จะไม่สามารถดูได้อีกหลังจากปิด dialog นี้

นำไปใช้ใน npm run setup:

  • GOOGLE_CLIENT_ID — ค่า Client ID
  • GOOGLE_CLIENT_SECRET — ค่า Client Secret

ใช้ Google Cloud Project ให้เหมาะกับลักษณะงาน

กรณีบริษัทเดียวกัน อยากมีหลาย Application ให้สร้างหลาย Project

แต่ละ Application ควรแยก project เพราะ consent screen ผูกกับ project การผสมหลายแอปใน project เดียวทำให้ผู้ใช้เห็นชื่อแอปเดียว แต่ scope ปะปนกัน และ quota ของ API ก็นับรวมกัน สับสนมาก

Project: "mycompany-hr-app"   → consent: "HR Portal"
Project: "mycompany-crm-app"  → consent: "Sales CRM"

กรณี Product เดียวกัน อยากมีหลาย Platform (Web / iOS / Android) ให้ใช้ Project เดียว สร้างหลาย Client

นี่คือ use case หลักของ multiple clients หน้า consent screen ที่ผู้ใช้เห็นจะเป็นชื่อเดียวกัน แต่ credential แต่ละ platform แยกกัน

Project: "myapp"  → consent: "My App"
  ├── Client: Web App     (client_id_web)
  ├── Client: Android     (client_id_android, package: com.myapp)
  └── Client: iOS         (client_id_ios, bundle: com.myapp.ios)

กรณีเป็น Software House มีลูกค้าหลายคนให้แยกตาม Project ไปเลย

ข้อผิดพลาดที่พบบ่อยคือเอาลูกค้าหลายรายมาไว้ใน project เดียวกัน ปัญหาที่ตามมาคือ consent screen มีได้แค่ชื่อเดียว ผู้ใช้ของลูกค้า A จะเห็นว่าแอปชื่อตามลูกค้า B ได้, quota นับรวมกัน, ถ้า project ถูก suspend ลูกค้าทุกคนพังพร้อมกัน

Project: "client-a-prod"  → consent: "Client A App"  (ตั้ง branding ให้ลูกค้า A)
Project: "client-b-prod"  → consent: "Client B App"  (ตั้ง branding ให้ลูกค้า B)

สรุป

ขั้นตอนสิ่งที่ต้องทำ
1. สร้าง Projectตั้งชื่อ project ใน Google Cloud Console
2. OAuth Consent Screenกรอก App name, email, เลือก External
3. Publish to Productionคลิก “Publish app” เพื่อไม่ให้จำกัด users
4. สร้าง Credentialsเลือก Web application, ใส่ redirect URIs
5. บันทึก CredentialsCopy Client ID และ Client Secret