繁體中文（台灣）
  • Bolt
  • AI
  • 直接登入

使用 Bolt.New 和 Logto 快速打造你的自訂登入流程

學習如何用 Bolt.new 建立一個結合 Logto 驗證的全端應用。從配置登入流程、創建浮動登入面板到開啟社群快速登入，本指南涵蓋了設置和自訂兩大步驟。

Guamian
Guamian
Product & Design

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

什麼是 Bolt.New

Bolt.new 是一款基於瀏覽器的工具，可即時生成和運行全端網頁應用。它基於 StackBlitz 的 WebContainer 技術，為開發者提供一套乾淨、預先配置好的環境，內建 Next.js（App Router）、Tailwind CSS、Supabase、Prisma 和 ShadCN UI。整個開發環境都在瀏覽器本地運行，不需安裝、不需雲端建置流程，甚至不需要註冊帳號。

與那些著重 AI 輔助編碼、適用於現有專案的工具不同，Bolt.new 專注在開發流程的起點。它省略了建立專案結構、安裝依賴與啟動本地伺服器的繁瑣，幫你從想法到能運作的原型只需幾秒。

Bolt.new 和 Cursor、Lovable 有何不同？

像 Cursor 和 Lovable 這類工具是你程式編輯器內的 AI 助手，而 Bolt.new 的理念和用途完全不同：即時產生全端專案並可直接運行。

  • Cursor 透過 AI 強化 VS Code 的開發工作流，協助你在現有環境中編輯或生成程式碼。
  • Bolt.new 則是從零開始，根據提示語或範本生成可運作的應用，並以 WebContainers 讓它直接於瀏覽器內跑起來。

整個過程不需要依賴本地工具或遠端雲端 VM，完全在瀏覽器中本地執行，自帶 Node.js、套件管理與全端開發支持。這讓它特別適合用於 AI、SaaS 等專案類型的快速原型設計與本地優先的實驗。

Bolt.new 適合哪些人？

Bolt.new 是為經常「從零開始」的開發者打造，例如：

  • 驗證產品點子的獨立駭客
  • 測試工作流或嵌入模型的 AI 創作者
  • 打造 MVP 原型的創業者
  • 開發內部工具或 Demo 的工程師

這類使用者通常熟悉現代網頁技術棧，並傾向於速度快、分明且不添加過度主張的開發工具。Bolt.new 不是一個視覺化網站建構器，也不是教程式平台。它預設你會 React 和全端基礎，但替你大幅減少設置麻煩。

Bolt.new 的歷史與演進

Bolt.new 來自 StackBlitz 團隊，這家公司由 Eric Simons 和 Albert Pai 於 2017 年創立。StackBlitz 首創了 WebContainers，這是一種原生於瀏覽器、基於 WebAssembly 的執行環境，能讓 Node.js 應用直接在瀏覽器運行。這根本顛覆了開發現代 JavaScript 應用需仰賴雲端伺服器或本地安裝的傳統。

到 2023 年，StackBlitz 面臨增長瓶頸，團隊開始往更激進方向嘗試：結合 WebContainers 與 AI，從自然語言提示中自動產生功能完整的應用。

這個實驗後來就是 Bolt.new，在 2024 年 10 月公開發表。短短數週之間，它憑著簡單與極速設計，迅速在開發圈爆紅。Bolt.new 將 StackBlitz 多年來累積的成果，包含執行期隔離、超快相依安裝、可分享的環境，再加上一套理解常見開發任務的 AI 介面。

Bolt.new 象徵開發工具的分水嶺：開發者不止能寫程式更快，而是直接從已能運作的程式碼開始，更加貼合你的意圖。

教學：用 Logto 和 Bolt.New 打造自訂登入體驗

在 Logto 控制台註冊 App

這個示範中，我使用 Bolt.new 創建一個 CMS 應用。省略掉提示環節，直接告訴代理要用 Logto 來做身份驗證，生成一套 CMS。

根據指示，需要提供兩個關鍵資訊：

  1. Logto 端點
  2. App ID

由於應用是單頁 React 應用，無需 app secret。代理會處理剩下的事：安裝最新版 Logto React SDK、設置驗證元件，並完成對接。

之後，我到 Logto Cloud Console，新建一個 SPA，然後將 Logto 端點跟 App ID 貼回 Bolt.new。

接著要配置 重定向 URI 和 登出後重定向 URI。

一個重要細節：因為 Bolt.new 是在瀏覽器運行（不是本地 IDE），所以不可用 http://localhost:3000/ 做重定向 URI。請記得一定要用 Bolt.new 預覽頁籤的網址當作你的 Redirect URI。

bolt_auth_1.png

自訂 Logto 預設登入體驗

Logto 提供可調整的預設登入流程，可在控制台自訂。進入 登入體驗 > 登入與註冊，選擇你喜歡的登入方式（例如 email，用戶名，手機號碼或社群登入）。

設定好後，啟動登入流程會將使用者導去你挑選的選項、由 Logto 托管的登入頁。整個身份驗證過程都交給 Logto，你的用戶登入完就會被導回 App。

bolt_auth_2.png

bolt_auth_3.png

bolt_auth_4.png

讓登入面板「浮動」在產品介面上方

現在我想更進一步，做類似 Perplexity 那種更有彈性的登入體驗。不是跳轉到獨立頁面，而是直接在產品 UI 上方顯示一個浮動登入面板。這樣用戶始終待在原本場景下，但登入流程還是透過 Logto 驗證。

bolt_auth_5.png

只要下這個 prompt：

我想讓登入頁更美觀，只要簡單背景、兩顆按鈕：一顆「登入」，一顆「創建帳號」。每個按鈕請導向 Logto 處理的不同畫面。用 Logto 文件裡的 first-screen 做。 https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

bolt_auth_6.png

最棒的地方在於，點「登入」就直接進登入頁，點「創建帳號」立刻打開帳號創建畫面。

bolt_auth_7.png

bolt_auth_8.png

加入社群第三方登入

你可以把 Logto 的直接登入文件 丟給代理，再加一句像「加上社群登入流程」這種 prompt。如此，你可以跳過預設的 Logto 首頁。例如點 Google 登入 按鈕，就會直接啟動 Google 驗證流程，給用戶更快且友善的登入體驗。

bolt_auth_9.png

Logto 即將支援 AI 驅動的驗證整合新功能

以上只是基本範例。Logto 正在開發 MCP server，可以直接在你的 IDE 裡跑，讓你不必離開開發環境，就能對接 Logto Console 和 管理 API。

有了這套架構，你將能：

  1. 建立與管理用戶
  2. 檢視與篩選日誌
  3. 配置登入與註冊流程
  4. 定義 API 資源、權限與角色
  5. 管理應用及登入權限
  6. 以及更多 ...

結合本地工具、AI 與 Logto 能力，驗證整合將不再痛苦，而成為你開發流程裡自然的一環。

免費試用 Logto Cloud