繁體中文（台灣）
使用 Cursor 和 Logto 快速 vibe code 建立你的應用程式並處理登入流程
學習如何用 Cursor vibe code 建立一個相簿應用，並在幾分鐘內透過 Logto 加上登入功能。從 UI 到驗證，一切快速、簡單，而且由 AI 驅動。
Guamian
Product & Design
Product & Design
學習如何用 Cursor vibe code 建立一個相簿應用，並在幾分鐘內透過 Logto 加上登入功能。從 UI 到驗證，一切快速、簡單，而且由 AI 驅動。
Vibe coding（氛圍編程）因為有強大的工具如 Cursor 和 Windsurf 而漸漸流行起來。即使你經驗有限，也可以很快建立自己的應用程式。
對許多開發者和創作者來說，設定登入流程常常很麻煩。但有了 MCP 以及現代 IDE 內建的情境感知功能，即使你不是開發者，為你的應用程式加入驗證也不再是複雜的工作。
在這份教學中，我會示範：
首先，我只要在 Cursor 開啟一個聊天視窗並輸入指令：
「請用 Next.js Page Router 建一個單頁應用程式。」 Cursor 會幫我處理剩下的事並自動產生程式。
接下來我們把它變成一個相簿應用程式。它幫我從 Unsplash 抓幾張照片並自動整理。
傳統上你得手動查文件和 SDK，才能完成整合。 但在 Cursor 裡，你可以充分利用 AI，讓流程更流暢更快。
你可以為應用加入登入流程保護。Cursor 支援情境感知指令，所以你可以把 Logto 文件加進來做參考。這讓你可以輕鬆整合 Logto SDK for Next.js (Page Router) 來進行驗證。
你會看到它參考了 Quick Start 指南告訴你下一步。第二步它要我設定 appId、endpoint 等參數。這些資訊要去 Logto Cloud 註冊一個新應用才能拿到。
它也要我輸入 http://localhost:3000/api/auth/callback/logto 當作 redirect URI。
在 Logto Cloud 控制台輸入 Redirect URI
把這些值取得後存到你的設定檔。
所以我只要給 Cursor App ID、App Secret、Logto endpoint，它就會自動幫我更新程式碼。
現在，我跑 server 得到了簡單的 Sign in 首頁。當我點 Sign In，它會幫我轉址到 Logto 登入頁面。
太好了！它順利轉跳到 Logto 登入頁！
原本的介面太陽春，所以我請 Cursor 改善設計。
這是 Cursor 給我的成果。
現在要來測試完整流程。
順帶一提，Logto 內建 Email 服務，所以你可以直接進行完整的 Email 驗證流程。
完成整個流程後，你就已成功登入，並且可以看到你的用戶 ID 顯示在畫面上。
來看看這個用戶是不是已經新增到 Logto Console… 耶耶！在那邊了！🎉
靠著 Logto 的文件、最佳實踐，以及 Copilot 風格的程式輔助，連新手都能輕鬆整合登入功能。設定登入流程再也不是一個重而繁瑣的任務。
這只是個小小的實作練習。Logto 正積極打造 MCP 伺服器，這樣可以直接在你的 IDE 裡運作，讓你可以直接跟 Logto Console 和 Management API 互動，而不用離開開發環境。 有了這些，你可以：
敬請期待，憑藉 AI 的力量和 Logto 強大基礎設計，驗證整合已不再是難題！