หลายคนที่เขียนเว็บแอปพลิเคชัน ไม่ว่าจะเป็นระบบหลังบ้านด้วย PHP หรือระบบอัตโนมัติผ่าน Google Apps Script แล้วอยากเพิ่มปุ่ม “เข้าสู่ระบบด้วย Google” เพื่อความสะดวกและปลอดภัย สิ่งแรกที่ต้องมีเลยคือ Client ID และ Client Secret ค่ะ
วันนี้สรุปขั้นตอนการเข้าไปสร้าง Google OAuth Client แบบละเอียดจับมือทำมาฝากกันค่ะ ทำตามนี้ทีละสเต็ปได้เลย 👇
1️⃣ สร้างโปรเจกต์ใน Google Cloud Console
- ไปที่เว็บไซต์ Google Cloud Console
- กดที่เมนู Dropdown มุมซ้ายบน (ข้างโลโก้)
- เลือก New Project ตั้งชื่อโปรเจกต์ให้สอดคล้องกับเว็บแอปของเรา แล้วกด Create
2️⃣ ตั้งค่าหน้าจอขอสิทธิ์ (OAuth Consent Screen)
- ไปที่เมนูด้านซ้าย เลือก APIs & Services > OAuth consent screen
- เลือกประเภทผู้ใช้งาน (User Type): 👉 Internal: สำหรับให้คนในองค์กรใช้ (เช่น ใช้อีเมล @โรงเรียน เข้าใช้งานเท่านั้น) 👉 External: สำหรับผู้ใช้บัญชี Google ทั่วไป (@gmail.com)
- กด Create แล้วกรอกข้อมูลที่จำเป็น เช่น App name, User support email และ Developer contact information
- กด Save and Continue ไปเรื่อยๆ จนจบขั้นตอน (หน้า Scopes ข้ามไปก่อนได้ค่ะ)
3️⃣ สร้าง OAuth Client ID
- ไปที่เมนู Credentials ด้านซ้ายมือ
- คลิก + CREATE CREDENTIALS (ด้านบน) แล้วเลือก OAuth client ID
- ตรง Application type ให้เลือกเป็น Web application
- ตั้งชื่อ Client ตามต้องการ
4️⃣ กำหนด URL สำหรับเชื่อมต่อ (จุดนี้สำคัญมาก! ⭐) ต้องใส่ URL ให้ตรงกับที่เราใช้พัฒนาเว็บอยู่ ไม่งั้นระบบจะแจ้ง Error 400 (redirect_uri_mismatch) ค่ะ:
- Authorized JavaScript origins (โดเมนของเว็บเรา): 👉 ตอนรันทดสอบบนเครื่อง (เช่น ใช้ MAMP): ใส่
http://localhost👉 ตอนเอาขึ้นเว็บจริง: ใส่โดเมนจริง เช่น[https://krudevtech.com] - Authorized redirect URIs (ลิงก์ที่ Google จะส่งข้อมูลกลับมาให้หลังล็อกอินสำเร็จ): 👉 งาน PHP:
http://localhost/callback.php👉 งาน Google Apps Script:[https://script.google.com/macros/d/YOUR_SCRIPT_ID/usercallback] - เสร็จแล้วคลิก Create
5️⃣ เก็บคีย์ไว้ใช้งาน
- ระบบจะเด้งหน้าต่าง Pop-up สรุปข้อมูลมาให้
- ให้เราคัดลอก Client ID และ Client Secret เก็บไว้ให้ดี เพื่อนำไปใส่ในโค้ดฝั่ง Backend ต่อไป (ห้ามเอาไปแปะให้เห็นโต้งๆ ในไฟล์ HTML เด็ดขาดนะคะ!)
