繁體中文（台灣）
使用 Bolt.New 與 Logto 快速建立自訂登入流程
學習如何使用 Bolt.new 搭配 Logto 驗證來建立全端應用程式。本指南涵蓋從設定登入流程、建立浮動登入面板到啟用社群登入的所有設置與自訂步驟。
Guamian
Product & Design
Product & Design
學習如何使用 Bolt.new 搭配 Logto 驗證來建立全端應用程式。本指南涵蓋從設定登入流程、建立浮動登入面板到啟用社群登入的所有設置與自訂步驟。
Bolt.new 是一款基於瀏覽器的工具，可即時產生並執行全端網頁應用程式。它建立在 StackBlitz 的 WebContainer 技術之上，為開發者提供一個乾淨、預先配置好的技術棧，包括 Next.js（App Router）、Tailwind CSS、Supabase、Prisma 和 ShadCN UI。完整環境直接在瀏覽器本地運行，無需安裝、無需雲端建置步驟，也不需要註冊帳號。
與那些專注於在既有專案中提供 AI 協作編碼的工具不同，Bolt.new 的重點是開發流程的起點。它移除設定專案架構、依賴與本地伺服器的繁瑣，讓你從想法到可運行原型僅需數秒。
雖然像 Cursor 與 Lovable 這些工具作為編輯器內的 AI 助理，Bolt.new 則專注於完全不同的方向：即時生成並執行全端專案。
完全不依賴本機工具或遠端雲端 VM。所有東西都在瀏覽器內透過原生 Node.js、套件管理以及全端開發完整運行。這使它特別適合快速原型與本地優先實驗，尤其適用於 AI 或 SaaS 專案場景。
Bolt.new 專為那些常常需要從零開始的開發者設計，例如：
這些使用者通常對現代網頁技術棧很熟悉，偏好快速、乾淨且不受限制的工具。Bolt.new 不是視覺化網站生成器，也不是以教學為主的平台。它假設你已具備 React 與全端開發的實戰經驗，主要目標是移除設置時的阻礙。
Bolt.new 是由 StackBlitz 團隊開發。StackBlitz 由 Eric Simons 與 Albert Pai 於 2017 年創立，開創了 WebContainers —— 一個能在瀏覽器內原生執行 Node.js 環境的 WebAssembly 執行時。這徹底消除了開發現代 JavaScript 應用時對雲端伺服器或本機安裝的依賴。
2023 年，StackBlitz 遇到關鍵轉折。成長速度放緩，團隊開始探索激進新方向：結合 WebContainers 與 AI，讓自然語言提示也能產生完整可用的應用。
這個實驗最終成為 Bolt.new，並在 2024 年 10 月公開亮相。短短數週便因其簡單與快速在開發者中迅速竄紅。這個工具集成了 StackBlitz 多年來累積的所有成果：執行環境隔離、極速安裝套件與可分享運作環境，並加上對常見開發目標有理解力的 AI 介面。
Bolt.new 標誌著開發工具的新轉變：不再只是讓寫程式更快，而是直接以可運作的程式碼為出發點，且符合開發者的目的。
在這個例子裡，我使用 Bolt.new 建立了一個 CMS 系統。我略過了提示階段，直接請代理人幫我搭一個以 Logto 為驗證機制的 CMS。
根據指示，我只需準備兩個重點資訊：
Logto endpointApp ID由於這是一個單頁 React 應用，不用 App Secret。其餘設定都由代理人自動完成：包含安裝最新版 Logto React SDK、設置驗證元件與串接所有流程。
為了完成設置，我進入 Logto Cloud Console，建立新單頁應用，然後把 Logto endpoint 和 App ID 複製到 Bolt.new 內。
接著設定 Redirect URIs 以及登出後的返回 URI。
一個重要細節：由於 Bolt.new 是在瀏覽器執行，而非本地 IDE，所以不能使用 http://localhost:3000/ 作為 redirect URI。請務必使用 Bolt.new 瀏覽器分頁上顯示的預覽網址。
Logto 在 Console 提供可配置的內建登入流程。首先前往 登入體驗 > 註冊 / 登入，再選擇你偏好的登入方式（如電子郵件、使用者名稱、手機號碼，或第三方社群帳號）。
設定完成後，觸發登入流程時會自動導向 Logto 的託管登入頁，並帶有你選好的選項。整個驗證流程由 Logto 處理，用戶登入後自動回到你的 App。
現在我想更進一步，打造和 Perplexity 類似、更為自訂化的登入體驗。不再跳轉到獨立頁面，我會直接在產品介面上方放一個 浮動登入面板，讓用戶能在原有情境下繼續，底層依然由 Logto 負責驗證流程。
我只需下個這樣的提示：
我想讓登入頁的外觀更好看，只要右下角有個浮動小面板。有兩個按鈕：一個是“登入”，另一個是“建立帳號”。每個按鈕各自導向不同畫面，由 Logto 處理。根據 Logto 文件的 first-screen experience 實現：https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
很酷的是，點擊登入會直接到登入頁，點擊建立帳號則直接進帳號建立畫面。
你可以把 Logto 的直接登入文件 給代理人，同時下指示“新增社群登入流程”。如此就能跳過預設的 Logto 頁面。例如點擊 Google 登入 按鈕時，會直接進入 Google 驗證流程，為用戶提供更快捷、更友善的登入體驗。
這只是最基本的範例。Logto 正在開發 MCP 伺服器，可以直接在你的 IDE 裡運作，讓你在不離開開發環境的情況下與 Logto 控制台及 管理 API 互動。
透過這個配置，你將可以：
結合本地工具、AI 與 Logto 的基礎建設，身份驗證已不再是痛苦的集成步驟，而是自然開發流程的一部分。