← Admin หน้าเว็บ →
SETUP GUIDE

ขั้นตอนตั้งค่า
Google Sign-In

ทำตามขั้นตอนนี้เพื่อรับ Google Client ID แล้วนำมาใส่ใน Admin Panel เพื่อเปิดใช้ระบบ Login

1
เปิด Google Cloud Console
เปิดเบราว์เซอร์แล้วไปที่
https://console.cloud.google.com
(ล็อกอินด้วย Google Account ที่ต้องการใช้เป็นเจ้าของ)
2
สร้าง Project ใหม่
ที่ด้านบนซ้าย คลิก dropdown ชื่อ Project แล้วกด New Project
ตั้งชื่อ Project เช่น "Donate Site" แล้วกด Create

(ถ้ามี Project อยู่แล้วข้ามขั้นตอนนี้ได้)
[ My Project ▼ ] → New Project → ตั้งชื่อ → Create
3
ไปที่ OAuth Consent Screen
เมนูซ้าย: APIs & Services → OAuth consent screen

เลือก User Type: External แล้วกด Create
APIs & Services → OAuth consent screen → External → Create
4
กรอกข้อมูล App
กรอกข้อมูลที่จำเป็น:

App name: ชื่อเว็บของคุณ เช่น "Donate StreamerName"
User support email: อีเมลของคุณ
Developer contact: อีเมลของคุณ

กด Save and Continue ผ่านทุก Step จนถึง Summary แล้วกด Back to Dashboard
⚠ ยังไม่ต้อง Publish App — ในโหมด Testing ใช้ได้กับ Google Account ที่เพิ่มเป็น Test User
5
สร้าง OAuth Credentials
เมนูซ้าย: APIs & Services → Credentials

กด + Create Credentials → OAuth client ID
Credentials → + Create Credentials → OAuth client ID
6
ตั้งค่า Application type
Application type: เลือก Web application
Name: ตั้งชื่ออะไรก็ได้ เช่น "Donate Web"

ที่ Authorized JavaScript origins กด + Add URI แล้วใส่ URL เว็บของคุณ:
# ถ้ารันบน localhost (ทดสอบในเครื่อง) http://localhost http://localhost:5500 http://127.0.0.1:5500 # ถ้าเผยแพร่บน hosting จริง https://yourdomain.com
Authorized redirect URIs: เว้นว่างได้ (ไม่จำเป็น)

กด Create
⚠ สำคัญมาก — ต้องใส่ origin ของ URL ที่เปิดเว็บ ถ้าใส่ไม่ตรง Google จะ block และขึ้น error "Not a valid origin"
7
คัดลอก Client ID
จะมี popup แสดง Client ID และ Client Secret

คัดลอก Client ID (ลงท้ายด้วย .apps.googleusercontent.com)
# ตัวอย่าง Client ID (อย่าใช้ตัวนี้ คัดลอกของคุณเอง) 123456789012-abcdefghijklmnopqrstuvwxyz123456.apps.googleusercontent.com
✓ เก็บ Client ID ไว้ — Client Secret ไม่ต้องใช้สำหรับ frontend-only login
8
เพิ่ม Test Users (ถ้ายังไม่ Publish)
ถ้าไม่ได้ Publish App ต้องเพิ่ม Google Account ที่จะใช้ login เป็น Test User:

OAuth consent screen → Test users → + Add Users
ใส่อีเมลของบัญชีที่จะใช้ล็อกอิน
9
ใส่ Client ID ใน Admin Panel
เปิด admin.html → ส่วน Google Sign-In
วาง Client ID ลงในช่อง แล้วกด บันทึก

หรือแก้ไฟล์ config.js โดยตรง:
googleClientId: 'วาง Client ID ของคุณที่นี่',
FAQ
ขึ้น error "Not a valid origin"
URL ที่เปิดเว็บไม่ตรงกับที่ใส่ไว้ใน Authorized JavaScript origins ให้กลับไปเพิ่ม URL ให้ตรง
ขึ้น "Access blocked: This app's request is invalid"
ตรวจสอบว่า Client ID ถูกต้อง และ OAuth consent screen ตั้งค่าครบ
จะ Publish App เพื่อให้ทุกคน login ได้
ไป OAuth consent screen → Publishing status → Publish App
Google จะ review app ใช้เวลา 1-7 วัน
ข้อมูล User ที่ได้จาก Login
ชื่อ (name), อีเมล (email), รูปโปรไฟล์ (picture) — เก็บไว้ใน localStorage ของเบราว์เซอร์

พร้อมแล้ว!

ใส่ Client ID ใน Admin Panel แล้วระบบ Login จะทำงานได้ทันที

ไปที่ Admin Panel →