繁體中文（台灣）
  • ai
  • auth
  • IDE

使用 Lovable AI 和 Logto 快速打造你的 app 並處理登入流程的 Vibe 寫程式方式

Lovable 是一個以 AI 為核心的程式開發代理，協助你用自然語言打造全端應用程式：前端、後端、資料庫與部署，全部都在同一個平台完成。現在有了對 Logto 的支援，你也能輕鬆加入安全登入、使用者管理與驗證流程。

Guamian
Guamian
Product & Design

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

從通用代理到專為任務設計的 copilots，開發者正親身經歷軟體創作方式的根本變革。但在各類型代理中，有一個領域特別吸睛又發展飛快：程式寫作代理。

像是 Lovable、Cursor、Windsurf 和 Replit 等工具，都以即時將自然語言轉化為真正可運作的軟體而成為話題焦點。免設定、零樣板，直接產生純粹成果。

今天，一個新詞悄然登場：Vibe Coding（氛圍寫程式）。

由 Lovable 首創，vibe coding 是一種透過與 AI 對話來打造 app 的全新方式。本文將帶你深入剖析 vibe coding 的真義，探索 Lovable 作為頂尖程式代理的運作方式，並實際演示如何在幾分鐘內搭建一個全端 app——包含註冊、登入、使用者與身分管理。

什麼是 Lovable AI？

Lovable 是一個以聊天為主的開發平台，你的點子會直接變成可運作的程式碼、版型，甚至受託運作的 app。你不用寫傳統程式碼，只要描述你的需求：

「我需要一個簡單的儀表板，有兩個圖表和一個側邊欄。」

然後 AI 通常只需數秒就能產生即時預覽和可編輯的原始碼。

lovable_0.png

在背後，Lovable 採用現代框架像是 React 和 Tailwind，並允許你匯出專案、自行託管或立刻發布。

Lovable AI 的核心功能

下表為 Lovable 平台 9 大核心功能的詳細說明：

#功能描述價值
1自然語言全端 app 產生用簡單英文描述想法，立刻產生前端、後端、資料庫與驗證流程的可用 app。大幅降低開發時間，消除樣板設定的門檻。
2AI 智能寫碼與除錯內建助手自動補全、修復 bug，並透過對話協助導覽檔案、紀錄和 API。提升生產力，讓非專業開發者也能快速上手。
3程式碼真正所有權與 GitHub 同步輸出上線等級程式碼（React、Node 等），並雙向同步 GitHub。保障你真正擁有程式碼，避免平台綁定風險。
4後端服務整合原生支援 Supabase、Stripe 等後端服務。連結資料庫、儲存、金流、驗證都不用寫樣板碼。
5視覺化編輯與草稿稿碼轉換上傳手繪、螢幕截圖或 Figma 輸出檔，即可產生真正的 UI 程式碼，並支援視覺化編輯模式。讓設計師及非工程師能直接打造 UI。
6部署與自訂網域內建部署管線，支援主機託管與自訂網域設定。釋出 app 無縫，無需切換多個服務。
7協作與即時同步團隊成員可即時協作、馬上看到修改，並管理版本歷史。支援雙人程式設計、審核流程和團隊友善作業環境。
8安全性掃描發布時自動進行安全性檢查（特別是使用 Supabase 時）。上線前揪出漏洞，提升用戶信任。
9學習生態系與範本提供教學、提示庫、預建範本及學習資源。降低學習曲線，提升開發者引導。

使用 Lovable 開發 app 的關鍵好處

Lovable 挑戰了多數開發流程中根深柢固的假設：

  • 你必須從一個空白 VS Code 視窗開始。
  • 你得先有 Figma 樣板才能做排版。
  • 你要有任務卡才能寫邏輯。

反之，Lovable 提供一個自然語言做為主要 UX 的工作環境，不僅用於寫程式，更能打造完整產品。

它對以下方面帶來巨大改變：

  • 原型設計：不再只是靜態 mockup，數小時測試真實 UX。
  • 新手導入：新成員可對話式探索程式與功能。
  • 無障礙協作：設計師和 PM 無需寫程式碼亦可貢獻。

對沒有專業軟體開發背景的人，Lovable 開啟了創意自由的全新境界。只要你知道要做什麼，你就能用 vibe coding 將想法化成實體 app，不再卡關於傳統障礙。

從 Lovable 學到什麼

介面就是新一代 IDE

Lovable 正在證明「寫程式」不一定要打字，可以靠 prompt、對話編輯，以及意圖循環迭代。

這讓小團隊或個人專案能有更包容、彈性的協作空間。

快速迴圈勝過完整規格

當你可不切換工具、不寫樣板碼就能建構、測試與調整，你就能加速創意試驗和快速修正。

即使是有經驗的開發者，也受惠於降低的情境切換和更快的回饋循環。

AI 原生 app 需配合 AI 原生工具

就像 GitHub Copilot 融入 VS Code 那樣，Lovable 之於新世代的 agent 驅動、prompt 原生 app 極其合理——邏輯架構、流程不再硬寫死，而是動態定義。

用 Logto 做認證系統，快速打造相簿 app

首先，只要用「建立一個相簿 app」當作 prompt 就能立刻產生設計良好、簡潔的網站。

在 Lovable 整合 Logto Auth

lovable_1.png

接著我請 Lovable 加入 Logto 做為認證。雖然 Lovable 似乎和 Supabase 有深度整合，但 Supabase 並非專業 CIAM 解決方案，因此我選擇了 Logto——一款開源且專業的 CIAM 產品。

依照教學指示，我只需提供：

  1. Logto endpoint
  2. App ID

由於這是 React 單頁應用，不會需要 app secret。AI 全自動完成所有程序——自動安裝最新版 Logto React SDK 並建立驗證元件。

lovable_2.png

lovable_3.png

要取得 endpoint，只要前往 Logto Cloud，建立新的 React app，app 資訊頁上就會顯示需要的 endpoint，把這些資訊填回 Lovable 即可。Lovable 會自動幫你更新程式碼與 config 檔案。

lovable_4.png

你還需要輸入 app 的 Redirect URI 和 Post-Sign-out URL。

這裡有個重點：由於 Lovable 的開發環境託管在雲端，你不能使用像 http://localhost:3000/callback 這種 redirect URI。請使用你的 Lovable 專案 live URL，並到 Logto Cloud 主控台修改。

步驟：

  1. 前往你的 Logto Cloud 租戶
  2. 找到你的應用程式
  3. 將網址替換為：

  • Redirect URIs：

    https://preview--snap-show-gallery-time.lovable.app/callback

  • Post Sign-out Redirect URIs：

    https://preview--snap-show-gallery-time.lovable.app/

幾輪對話提問與反覆調整後，你現在會得到一個受保護的網站——只有登入用戶才能夠檢視內容。

lovable_5.png

請注意，這類程式碼代理的預覽模式裡會用到 iframe，所以點擊預覽時無法觸發登入頁。

測試登入流程

點選「Sign in」後，會開啟 Logto 登入頁。你可以完整測試驗證流程，預設是用電子郵件 + 密碼登入。通過郵件認證後，回到 Logto Console 就能查到用戶資料。

lovable_6.png lovable_7.png

如你所見，在 Logto Cloud Console 已經出現你的使用者——代表整個驗證流程順利完成，用戶安全地被你 app 註冊。

現在你已經擁有一套完整功能且整合登入流程的 app，並能透過 Logto Cloud Console 直接管理用戶。

Logto 即將釋出 AI 驅動認證整合新功能

這只是一個基礎示例。Logto 正在開發MCP 伺服器，將直接運行於你本地 IDE，讓你能與 Logto Console 以及 管理 API 互動——完全不必離開開發環境！藉由這套新工具，你將能：

  1. 建立並管理用戶
  2. 存取日誌
  3. 設定與管理登入流程
  4. 設計與維護授權（如 API 資源、權限、角色）
  5. 管理應用與資源
  6. 以及更多

當 AI 力量與 Logto 經驗豐厚的基礎建設結合，驗證整合將不再複雜。

免費試用 Logto Cloud