โค้ด Vibe โดยใช้ Cursor และ Logto เพื่อสร้างแอปของคุณอย่างรวดเร็วและจัดการ flow การเข้าสู่ระบบ

Vibe coding กำลังได้รับความนิยมด้วยเครื่องมืออันทรงพลังอย่าง Cursor และ Windsurf แม้ว่าคุณจะมีประสบการณ์จำกัด ก็สามารถสร้างแอปของตัวเองได้อย่างรวดเร็ว

สำหรับนักพัฒนาและผู้สร้างแอปหลายคน การตั้งค่า flow การเข้าสู่ระบบอาจยุ่งยาก แต่ด้วย MCP และฟีเจอร์ context-aware ที่มาพร้อมกับ IDE สมัยใหม่ การเพิ่มการยืนยันตัวตนให้กับแอปของคุณไม่ใช่งานซับซ้อนอีกต่อไป แม้คุณจะไม่ใช่นักพัฒนาก็ตาม

ในบทแนะนำนี้ ฉันจะแสดงให้คุณเห็นว่า:

1. จะสร้างเว็บแอปโดยใช้ vibe coding ใน Cursor ได้อย่างไร
2. วิธีเพิ่มการยืนยันตัวตน (login flows) ด้วย Logto เพื่อปกป้องเนื้อหาของคุณ

สร้างแอปแกลเลอรีภาพถ่ายใน Cursor#

อันดับแรก ฉันเพียงแค่เปิดแชทใน Cursor แล้วพิมพ์ prompt ว่า:

“สร้างแอปหน้าเดียวโดยใช้ Next.js Page Router.” Cursor จะดูแลที่เหลือและสร้างโค้ดให้ฉัน

มาทำให้มันเป็นแอปแกลเลอรีภาพถ่ายกันดีกว่า มันจะช่วยดึงภาพถ่ายหลายๆ ภาพจาก Unsplash และจัดระเบียบให้ฉัน

เพิ่มการยืนยันตัวตนให้แอปแกลเลอรีภาพถ่ายของคุณ#

ตามปกติคุณจะต้องอ่านเอกสารคู่มือและแก้ไขโค้ด SDK ด้วยตนเองเพื่อให้การเชื่อมต่อสำเร็จ แต่ด้วย Cursor คุณสามารถใช้ประโยชน์จาก AI ได้อย่างเต็มที่เพื่อให้กระบวนการราบรื่นและรวดเร็วยิ่งขึ้น

เพิ่มเอกสาร Logto เป็น context#

คุณสามารถเพิ่ม flow การเข้าสู่ระบบเพื่อปกป้องแอปของคุณ Cursor รองรับการ prompt แบบ context-aware ดังนั้นคุณสามารถเพิ่ม คู่มือ Logto เป็นแหล่งอ้างอิง ซึ่งช่วยให้คุณรวมการยืนยันตัวตนด้วย Logto SDK สำหรับ Next.js (Page Router) ได้อย่างง่ายดาย

ทำให้การเชื่อมต่อสมบูรณ์#

อย่างที่เห็น มันใช้คู่มือ Quick Start มาช่วยแนะนำขั้นตอนถัดไป ในขั้นตอนที่สอง มันให้ฉันตั้งค่าต่างๆ เช่น appId, endpoint เป็นต้น สำหรับข้อมูลเหล่านี้ ฉันต้องไปที่ Logto Cloud และลงทะเบียนแอปใหม่

มันยังขอให้ฉันกรอก http://localhost:3000/api/auth/callback/logto เป็น redirect URI ด้วย

กรอก Redirect URI ในคอนโซล Logto Cloud

นำค่าต่างๆ เหล่านี้มาเก็บไว้ในไฟล์คอนฟิกของคุณ

ฉันจึงแค่ให้ App ID, App Secret, และ Logto endpoint กับ Cursor แล้วมันจะอัปเดตโค้ดให้ฉัน

ตอนนี้ ฉันรันเซิร์ฟเวอร์แล้วได้หน้าแรกเป็น Sign in แบบเรียบง่าย เมื่อคลิก Sign In มันจะพาไปที่ Logto login page

เยี่ยมเลย! มัน redirect ไปหน้า sign-in ของ Logto สำเร็จ!

ปรับแต่งอินเทอร์เฟซและทดสอบ flow เต็มรูปแบบ#

หน้าจอแรกดูธรรมดาเกินไป ฉันจึงขอให้ Cursor ช่วยปรับดีไซน์ให้ดูดีขึ้น

นี่คือสิ่งที่ Cursor ออกแบบให้ฉัน

ถึงเวลาทดสอบ flow เต็มรูปแบบแล้ว

ขอเสริมว่า Logto มีบริการอีเมลในตัว ทำให้เกิดกระบวนการยืนยันอีเมลได้โดยตรงทันที

หลังจากทำ flow เสร็จ คุณก็เข้าสู่ระบบสำเร็จและเห็น user ID ของคุณแสดงบนหน้าจอ

ลองตรวจสอบว่าผู้ใช้รายนี้ถูกเพิ่มใน Logto Console หรือยัง... เรียบร้อย! อยู่ในนั้นแล้ว! 🎉

ด้วยคู่มือ Logto, แนวปฏิบัติที่ดีที่สุด และการเขียนโค้ดแบบ Copilot-style การเชื่อมต่อระบบทำได้ง่าย แม้สำหรับผู้ที่แทบไม่มีประสบการณ์ทางเทคนิค การตั้งค่า login flow จึงไม่ใช่งานหนักหรือยุ่งยากอีกต่อไป

การพัฒนาในอนาคต#

นี่เป็นเพียงตัวอย่างการฝึกฝนเล็กๆ Logto กำลังพัฒนา MCP servers ที่ทำงานได้โดยตรงใน IDE ของคุณ ช่วยให้คุณใช้งาน Logto Console และ Management API ได้ทันทีในสภาพแวดล้อมที่พัฒนาแอป ด้วยฟีเจอร์นี้ คุณจะสามารถ:

1. สร้างและจัดการผู้ใช้
2. ดึง logs
3. ตั้งค่าและจัดการ login flows
4. ออกแบบและจัดการการอนุญาต (เช่น API resources, permissions, roles)
5. จัดการแอปพลิเคชันและ resources
6. และอีกมากมาย

ติดตามเรา ด้วยพลังของ AI และโครงสร้างพื้นฐานที่แข็งแกร่งของ Logto การเชื่อมต่อ auth ไม่ใช่อุปสรรคอีกต่อไป!