繁體中文（台灣）
  • cursor
  • integration
  • ai

使用 Cursor 和 Logto 快速 vibe code 建立你的應用程式並處理登入流程

學習如何用 Cursor vibe code 建立一個相簿應用，並在幾分鐘內透過 Logto 加上登入功能。從 UI 到驗證，一切快速、簡單，而且由 AI 驅動。

Guamian
Guamian
Product & Design

不要在使用者認證上浪費數週時間
使用 Logto 更快地發布安全應用程式。幾分鐘內整合使用者認證，專注於您的核心產品。
立即開始
Product screenshot

Vibe coding（氛圍編程）因為有強大的工具如 Cursor 和 Windsurf 而漸漸流行起來。即使你經驗有限，也可以很快建立自己的應用程式。

對許多開發者和創作者來說，設定登入流程常常很麻煩。但有了 MCP 以及現代 IDE 內建的情境感知功能，即使你不是開發者，為你的應用程式加入驗證也不再是複雜的工作。

在這份教學中，我會示範：

  1. 如何在 Cursor 用 vibe coding 建立網頁應用程式。
  2. 如何用 Logto 加入驗證（登入流程）來保護你的內容。

在 Cursor 建立相簿應用程式

首先，我只要在 Cursor 開啟一個聊天視窗並輸入指令：

「請用 Next.js Page Router 建一個單頁應用程式。」 Cursor 會幫我處理剩下的事並自動產生程式。

cursor_1.png

接下來我們把它變成一個相簿應用程式。它幫我從 Unsplash 抓幾張照片並自動整理。

cursor_2.png

cursor_3.png

為你的相簿應用程式加入驗證

傳統上你得手動查文件和 SDK，才能完成整合。 但在 Cursor 裡，你可以充分利用 AI，讓流程更流暢更快。

新增 Logto 文件作為情境參考

你可以為應用加入登入流程保護。Cursor 支援情境感知指令，所以你可以把 Logto 文件加進來做參考。這讓你可以輕鬆整合 Logto SDK for Next.js (Page Router) 來進行驗證。

cursor_4.png

完成整合

你會看到它參考了 Quick Start 指南告訴你下一步。第二步它要我設定 appId、endpoint 等參數。這些資訊要去 Logto Cloud 註冊一個新應用才能拿到。

cursor_5.png

cursor_6.png

它也要我輸入 http://localhost:3000/api/auth/callback/logto 當作 redirect URI。

cursor_7.png 在 Logto Cloud 控制台輸入 Redirect URI

cursor_8.png 把這些值取得後存到你的設定檔。

所以我只要給 Cursor App ID、App Secret、Logto endpoint，它就會自動幫我更新程式碼。

現在，我跑 server 得到了簡單的 Sign in 首頁。當我點 Sign In，它會幫我轉址到 Logto 登入頁面。

cursor_9.png

cursor_10.png

太好了！它順利轉跳到 Logto 登入頁！

微調介面並測試全流程

原本的介面太陽春，所以我請 Cursor 改善設計。

cursor_11.png

這是 Cursor 給我的成果。

cursor_12.png

現在要來測試完整流程。

順帶一提，Logto 內建 Email 服務，所以你可以直接進行完整的 Email 驗證流程。

cursor_13.png

cursor_14.png

完成整個流程後，你就已成功登入，並且可以看到你的用戶 ID 顯示在畫面上。

cursor_15.png

來看看這個用戶是不是已經新增到 Logto Console… 耶耶！在那邊了！🎉

cursor_16.png

靠著 Logto 的文件、最佳實踐，以及 Copilot 風格的程式輔助，連新手都能輕鬆整合登入功能。設定登入流程再也不是一個重而繁瑣的任務。

未來進化

這只是個小小的實作練習。Logto 正積極打造 MCP 伺服器，這樣可以直接在你的 IDE 裡運作，讓你可以直接跟 Logto Console 和 Management API 互動，而不用離開開發環境。 有了這些，你可以：

  1. 建立和管理用戶
  2. 查詢紀錄
  3. 設定和管理你的登入流程
  4. 設計和管理授權（例如 API 資源、權限和角色）
  5. 管理應用與資源
  6. 還有更多

敬請期待，憑藉 AI 的力量和 Logto 強大基礎設計，驗證整合已不再是難題！

免費試用 Logto Cloud