เรียนรู้วิธี vibe code แอปแกลเลอรีภาพถ่ายด้วย Cursor และเพิ่มการเข้าสู่ระบบด้วย Logto ในไม่กี่นาที ตั้งแต่ UI ถึงการยืนยันตัวตน รวดเร็ว ง่าย และขับเคลื่อนด้วย AI
Vibe coding กำลังได้รับความนิยมด้วยเครื่องมืออันทรงพลังอย่าง Cursor และ Windsurf แม้ว่าคุณจะมีประสบการณ์จำกัด ก็สามารถสร้างแอปของตัวเองได้อย่างรวดเร็ว
สำหรับนักพัฒนาและผู้สร้างแอปหลายคน การตั้งค่า flow การเข้าสู่ระบบอาจยุ่งยาก แต่ด้วย MCP และฟีเจอร์ context-aware ที่มาพร้อมกับ IDE สมัยใหม่ การเพิ่มการยืนยันตัวตนให้กับแอปของคุณไม่ใช่งานซับซ้อนอีกต่อไป แม้คุณจะไม่ใช่นักพัฒนาก็ตาม
ในบทแนะนำนี้ ฉันจะแสดงให้คุณเห็นว่า:
อันดับแรก ฉันเพียงแค่เปิดแชทใน Cursor แล้วพิมพ์ prompt ว่า:
“สร้างแอปหน้าเดียวโดยใช้ Next.js Page Router.” Cursor จะดูแลที่เหลือและสร้างโค้ดให้ฉัน
มาทำให้มันเป็นแอปแกลเลอรีภาพถ่ายกันดีกว่า มันจะช่วยดึงภาพถ่ายหลายๆ ภาพจาก Unsplash และจัดระเบียบให้ฉัน
ตามปกติคุณจะต้องอ่านเอกสารคู่มือและแก้ไขโค้ด SDK ด้วยตนเองเพื่อให้การเชื่อมต่อสำเร็จ แต่ด้วย Cursor คุณสามารถใช้ประโยชน์จาก AI ได้อย่างเต็มที่เพื่อให้กระบวนการราบรื่นและรวดเร็วยิ่งขึ้น
คุณสามารถเพิ่ม 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 สำเร็จ!
หน้าจอแรกดูธรรมดาเกินไป ฉันจึงขอให้ Cursor ช่วยปรับดีไซน์ให้ดูดีขึ้น
นี่คือสิ่งที่ Cursor ออกแบบให้ฉัน
ถึงเวลาทดสอบ flow เต็มรูปแบบแล้ว
ขอเสริมว่า Logto มีบริการอีเมลในตัว ทำให้เกิดกระบวนการยืนยันอีเมลได้โดยตรงทันที
หลังจากทำ flow เสร็จ คุณก็เข้าสู่ระบบสำเร็จและเห็น user ID ของคุณแสดงบนหน้าจอ
ลองตรวจสอบว่าผู้ใช้รายนี้ถูกเพิ่มใน Logto Console หรือยัง... เรียบร้อย! อยู่ในนั้นแล้ว! 🎉
ด้วยคู่มือ Logto, แนวปฏิบัติที่ดีที่สุด และการเขียนโค้ดแบบ Copilot-style การเชื่อมต่อระบบทำได้ง่าย แม้สำหรับผู้ที่แทบไม่มีประสบการณ์ทางเทคนิค การตั้งค่า login flow จึงไม่ใช่งานหนักหรือยุ่งยากอีกต่อไป
นี่เป็นเพียงตัวอย่างการฝึกฝนเล็กๆ Logto กำลังพัฒนา MCP servers ที่ทำงานได้โดยตรงใน IDE ของคุณ ช่วยให้คุณใช้งาน Logto Console และ Management API ได้ทันทีในสภาพแวดล้อมที่พัฒนาแอป ด้วยฟีเจอร์นี้ คุณจะสามารถ:
ติดตามเรา ด้วยพลังของ AI และโครงสร้างพื้นฐานที่แข็งแกร่งของ Logto การเชื่อมต่อ auth ไม่ใช่อุปสรรคอีกต่อไป!