Login ด้วย Google — ให้สมัครง่ายขึ้น

ตอนนี้แอปของคุณสมัครด้วยอีเมลได้ ล็อกอินได้ แยกข้อมูลได้ และกันหน้าที่ต้องล็อกอินได้แล้ว

แต่ถึงทุกอย่างจะทำงานครบ ก็ยังมีแรงเสียดทานอยู่จุดหนึ่ง คนใหม่ต้องคิดรหัสผ่านใหม่ จำรหัสผ่านใหม่ แล้วบางคนก็หยุดตั้งแต่ตรงนั้น

บางครั้งคนไม่ได้ไม่อยากใช้ แค่ไม่อยากสมัครอะไรเพิ่ม

ถ้าคุณเคยเจอแอปที่มีปุ่ม Login with Google แล้วเผลอกดทันที นั่นไม่ใช่เพราะคุณขี้เกียจอย่างเดียว

มันเป็นเพราะการใช้บัญชีที่มีอยู่แล้ว ทำให้การเริ่มต้นเบาลงมาก ไม่ต้องคิดชื่อผู้ใช้ใหม่ ไม่ต้องจำรหัสผ่านอีกชุด และไม่ต้องลังเลว่าคุ้มไหมกับการสมัคร

บทนี้เราจะเพิ่มทางเข้าอีกแบบหนึ่งให้แอปของคุณ โดยยังเก็บระบบอีเมลกับรหัสผ่านแบบเดิมไว้เหมือนเดิม

ถ้าคิดแบบ รปภ.หน้าตึก ตอนนี้เขาไม่ได้เช็กบัตรเองอย่างเดียวแล้ว

ถ้าใช้ภาพเดิมต่อ ตอนนี้รปภ.หน้าตึกมีอีกวิธีหนึ่งในการเช็กตัวคนเข้าอาคาร

แทนที่จะให้คุณกรอกอีเมลกับรหัสผ่านทุกครั้ง เขาสามารถเช็กผ่านคนที่ยืนยันตัวตนคุณอยู่แล้ว เช่น Google

คุณยังเข้าอาคารเดิมและเข้าพื้นที่ของตัวเองเหมือนเดิม แต่ขั้นตอนการยืนยันง่ายขึ้น

นี่คือความหมายของ Social login (ล็อกอินด้วยบัญชีที่มีอยู่แล้ว เช่น Google)

บทนี้มีสองส่วน และส่วนแรกจะยาวกว่าปกติหน่อย

การเพิ่ม Google login มี 2 ก้อน

ก้อนแรกคือไปเปิด Google provider ในระบบ Auth ของ Supabase

ก้อนที่สองคือบอก Lovable ให้เพิ่มปุ่มและ flow การล็อกอินด้วย Google ในหน้าแอป

นี่เป็นบทที่มีขั้นตอนเยอะที่สุดในทั้งคอร์ส ไม่ได้แปลว่าคุณทำไม่ได้ มันแค่เป็นงานตั้งค่าครั้งเดียวที่ละเอียดกว่าบทอื่น

ขั้นตอนที่ 1 — เปิด Google provider ใน Supabase

1. เข้า Supabase dashboard ของโปรเจกต์นี้
2. มองหาเมนู Authentication
3. มองหาส่วน Providers หรือรายการวิธีล็อกอิน
4. เปิดใช้งาน Google

หลังจากเปิดใช้งานแล้ว Supabase จะขอข้อมูลจากฝั่ง Google เพิ่ม

ตรงนี้คือเหตุผลที่บทนี้ยาวกว่าปกติ เพราะคุณต้องไปตั้งค่าฝั่ง Google เพิ่มอีกเล็กน้อย

ขั้นตอนที่ 2 — เตรียม Google Cloud project

1. เข้า Google Cloud Console
2. สร้าง project ใหม่ หรือเลือก project ที่จะใช้
3. มองหาส่วนที่เกี่ยวกับการตั้งค่า OAuth หรือ Google Auth
4. เตรียมหน้าจอ consent screen หรือหน้าที่ Google ใช้ถามผู้ใช้ว่าจะอนุญาตให้แอปนี้ล็อกอินด้วยบัญชี Google หรือไม่

สิ่งที่คุณกำลังทำตรงนี้ ไม่ใช่การเขียนโปรแกรม

มันคือการบอก Google ว่า “แอปนี้มีอยู่จริง และฉันต้องการให้คนใช้กดล็อกอินผ่าน Google ได้”

ขั้นตอนที่ 3 — เอาข้อมูลจาก Google กลับมาใส่ใน Supabase

หลังจากตั้งค่า Google ฝั่งนั้นเสร็จ คุณจะได้ข้อมูลสำหรับการเชื่อมต่อกลับมา

Supabase จะบอกด้วยว่าต้องใส่อะไร และมักจะมีจุดที่บอกชัดว่าคุณต้องเอาค่าไหนจาก Google มาใส่ตรงไหนในหน้า Google provider

ให้ทำตาม flow นี้แบบช้าๆ:

1. ดูใน Supabase ว่ามันขอข้อมูลอะไร
2. กลับไปเอาข้อมูลนั้นจาก Google Cloud
3. วางกลับเข้ามาในหน้า Google provider ของ Supabase
4. กดบันทึก

ถ้าคุณงงในขั้นนี้ ไม่ใช่เพราะคุณตามไม่ทัน แต่มันเป็นขั้นที่ละเอียดจริง

สำหรับรายละเอียดที่เปลี่ยนบ่อย ให้ยึดตาม docs ล่าสุดของ Supabase เป็นหลัก:

คู่มือตั้งค่า Google login ของ Supabase

ขั้นตอนที่ 4 — บอก Lovable ให้เพิ่มปุ่ม Google login

เมื่อฝั่ง Supabase พร้อมแล้ว ค่อยกลับมาที่ Lovable

ใช้ prompt นี้ได้เลย:

เพิ่มตัวเลือกเข้าสู่ระบบด้วย Google ในหน้า Login

- เพิ่มปุ่มเข้าสู่ระบบด้วย Google ไว้เหนือ form อีเมลและรหัสผ่าน
- จัดวางให้ชัดว่าเป็นอีกทางเลือกหนึ่งของการล็อกอิน
- เมื่อล็อกอินด้วย Google สำเร็จ ให้เข้าไปหน้าแอปเหมือนการล็อกอินปกติ
- ให้ระบบออกจากระบบได้เหมือนเดิม
- ให้การแยกข้อมูลของผู้ใช้ยังทำงานเหมือนเดิม

ไม่เปลี่ยน design หรือฟังก์ชันที่มีอยู่แล้ว

สิ่งที่ prompt นี้กำลังบอก AI คือ:

1. เพิ่มทางเข้าใหม่
2. อย่าทำลายทางเข้าเดิม
3. เมื่อเข้าได้แล้ว ต้องพาไป flow เดิมทั้งหมด

ลงมือทำ — ทดสอบว่า Google login ใช้ได้จริง

ขั้นตอนที่ 1 — ดูหน้า login ใหม่

1. เปิดหน้า login ของแอป
2. ดูว่าตอนนี้มีปุ่ม Google เพิ่มเข้ามาหรือยัง
3. เช็กว่าฟอร์มอีเมลกับรหัสผ่านเดิมยังอยู่

ขั้นตอนที่ 2 — ลองกด Google login

1. กดปุ่มเข้าสู่ระบบด้วย Google
2. เลือกบัญชี Google ที่ต้องการใช้
3. รอดูว่าระบบพากลับเข้าแอปหรือไม่

ขั้นตอนที่ 3 — เช็กว่าข้อมูลยังเป็นของคนนั้นจริง

1. เมื่อเข้าแอปแล้ว ลองดูข้อมูลของบัญชีนั้น
2. ลองเพิ่มข้อมูล 1 รายการ
3. ออกจากระบบ
4. เข้าด้วยอีกบัญชีหนึ่ง แล้วดูว่าข้อมูลยังแยกกันเหมือนเดิมหรือไม่

ขั้นตอนที่ 4 — เช็กว่าทางเดิมยังใช้ได้

1. ออกจากระบบ
2. ลองเข้าสู่ระบบด้วยอีเมลและรหัสผ่านแบบเดิม
3. ดูว่าระบบยังทำงานได้เหมือนเดิม

เป้าหมายของบทนี้ไม่ใช่แทนที่วิธีเก่า แต่คือเพิ่มอีกทางเลือกที่เบาขึ้น

ถ้ายังติดตรง Google Cloud อย่าเพิ่งสรุปว่าคุณทำไม่ได้

บทนี้เป็นบทที่ตั้งค่าเยอะที่สุดของทั้งคอร์ส

ดังนั้นถ้าคุณติด ไม่ได้แปลว่าคุณไม่เก่ง มันแปลแค่ว่ามีหลายหน้าที่ต้องให้ข้อมูลตรงกัน

เวลางง ให้กลับมาดูทีละก้อน:

1. Supabase เปิด Google provider แล้วหรือยัง
2. ฝั่ง Google Cloud สร้างการตั้งค่าสำหรับแอปนี้แล้วหรือยัง
3. ข้อมูลที่ต้องเอาจาก Google ใส่กลับใน Supabase ใส่ครบหรือยัง
4. หลังจากนั้น Lovable ได้เพิ่มปุ่มและ flow ให้หน้าแอปแล้วหรือยัง

แยกทีละก้อนแบบนี้ จะตามง่ายกว่ามาก

สำหรับแอปของคุณเอง

ถ้าแอปของคุณมีคนใช้ที่ไม่น่าจะอยากจำรหัสผ่านใหม่ social login ช่วยลดแรงเสียดทานได้มาก

โดยเฉพาะแอปที่คนแค่อยากลองใช้เร็วๆ หรือแอปที่คุณอยากให้เพื่อนกดเข้าได้เลย Google login มักช่วยให้คนเริ่มง่ายขึ้นกว่าการสมัครแบบปกติ

คุณเพิ่งทำอะไรสำเร็จไปแล้วบ้าง

• คุณเข้าใจแล้วว่า social login คือการใช้บัญชีที่มีอยู่แล้วมาล็อกอิน
• คุณเปิด Google provider ใน Supabase และเชื่อม flow นี้เข้ากับแอปได้แล้ว
• แอปของคุณมีทั้งอีเมล/รหัสผ่านและ Google เป็นทางเลือกในการเข้าสู่ระบบ
• คุณทำให้การเริ่มใช้แอปง่ายขึ้น โดยไม่ทำลายระบบแยกข้อมูลที่มีอยู่แล้ว

ตลอด 5 คอร์สที่ผ่านมา คุณเดินมาครบเส้นทางใหญ่แล้ว

คอร์สแรก คุณเรียนรู้ว่า AI สร้างแอปได้

คอร์สที่สอง คุณเรียนรู้ว่าจะสร้างอะไรและตัดสินใจยังไง

คอร์สที่สาม คุณเรียนรู้ว่าจะทำให้แอปดูดีและสื่อสารชัดขึ้นยังไง

คอร์สที่สี่ คุณเรียนรู้ว่าจะทำให้แอปจำข้อมูลได้จริงยังไง

คอร์สนี้ คุณเรียนรู้ว่าจะทำให้แต่ละคนมีพื้นที่ข้อมูลของตัวเองยังไง

แอปที่คุณสร้างตอนนี้ ทำหลายอย่างที่แอปจริงส่วนใหญ่ต้องมีแล้ว

มันสมัครสมาชิกได้ ล็อกอินได้ แยกข้อมูลของแต่ละคนได้ ออกจากระบบได้ และมีทางเข้าที่ง่ายขึ้นด้วย Google

สิ่งที่มีค่าที่สุดไม่ใช่แค่แอปนี้ แต่คือทักษะที่คุณมีตอนนี้

คุณไม่จำเป็นต้องเขียนโค้ดเองทุกบรรทัด แต่คุณอธิบายสิ่งที่ต้องการได้ชัดพอ จน AI ช่วยคุณสร้างระบบที่คนจริงใช้ได้

ถ้าคุณมีไอเดียสำหรับแอปถัดไป ตอนนี้คุณมีทุกเครื่องมือที่ต้องใช้แล้ว ไปสร้างมันได้เลย