使用 Cursor 和 Logto 快速 vibe code 打造你的應用程式並處理登入流程
學習如何使用 Cursor vibe code 一個相片庫應用程式，並在數分鐘內加入 Logto 登入。從 UI 到認證，速度快、簡單而且有 AI 支援。
Product & Design
Vibe coding 變得越來越受歡迎，多得像 Cursor 同 Windsurf 這啲強大工具。即使只係有少少經驗，你都可以好快打造屬於你嘅 app。
對好多開發者同 builder 嚟講，設置登入流程時常都幾麻煩。但有咗 MCP 同現代 IDE 內置嘅情景感知功能，加入認證其實唔再係好複雜嘅事，就算你其實唔係 developer 都得。
喺呢個教學，我會示範：
- 如何用 Cursor 嘅 vibe coding 去製作一個 web app。
- 點樣用 Logto 加入認證（登入流程）去保障你嘅內容。
喺 Cursor 製作相片庫 app
首先，我只係要喺 Cursor 開一個 chat，然後輸入 prompt ：
「Create a single-page app using Next.js Page Router。」 Cursor 會自動搞掂幫我生成 app。
依家一齊整個相片庫 app。Cursor 幫我去 Unsplash 撈幾張相返嚟，仲幫我整理好晒。
為相片庫 app 加入認證
傳統上，你係要自己睇 docs，又要同 SDK 慢慢砌先整到成個整合。 但而家有 Cursor，同 AI 配合，成個過程變得極之流暢同快。
加入 Logto doc 作為 context
你可以加個登入流程嚟保護你嘅 app。Cursor 支援 context-aware prompts，可以將 Logto documentation 加入參考，等你好容易用 Logto SDK for Next.js (Page Router) 整到認證功能。
完成整合
你見到佢會引用 Quick Start guide 教你下一步點做。第二步叫我設定 appId、endpoint等等。要攞齊呢啲資料，我只需要去 Logto Cloud 註冊個新 app。
佢仲要求我填 http://localhost:3000/api/auth/callback/logto 做 redirect URI。
喺 Logto Cloud 控制台輸入 Redirect URI
取得呢啲資料之後，記住要儲落你個 configuration file。
咁我就直接提供 App ID、App Secret 同 Logto endpoint 畀 Cursor，佢會自動更新 code。
依家，只要開 server，就會有個簡單嘅 Sign in 主頁。當我 click Sign In，佢就會導去 Logto login page。
搞掂啦！成功導去咗 Logto 嘅登入頁面！
美化介面並測試完整流程
初版畫面太簡陋，所以我再叫 Cursor 優化個設計。
呢個就係 Cursor 畀我嘅結果。
依家可以測試晒完整登入流程。
講多一句，Logto 內建 email service，你可以直接完成 email 驗證流程，完全唔使自己再整。
搞完流程，好順利就登入到，可以見到你個 user ID 會顯示喺畫面上。
最後睇下 Logto Console 係咪真係有你啲 user... Yeah！成個流程都成功啦！🎉
靠住 Logto 嘅文件、最佳實踐同 Copilot-style coding，即使技術經驗唔多都可以輕鬆整合。設置登入流程唔再係一件重複煩瑣嘅事。
未來更新
呢個只係一個細細個例子。Logto 正積極開發 MCP servers，會直接喺你 IDE 內運行，俾你同 Logto Console 及 Management API 互動，唔使離開開發環境。 有咗呢套，你可以：
- 創建及管理用戶
- 檢索日誌
- 設定及管理登入流程
- 設計同管理授權（例如 API 資源、權限同角色）
- 管理應用及資源
- 仲有好多其他功能
記住緊貼，靠 AI 力量加上 Logto 穩健嘅架構設計，認證整合唔再係難關！