繁體中文（香港）
  • Bolt
  • AI
  • 直接登錄

用 Bolt.New 同 Logto 快速建立自訂登入流程

學下點用 Bolt.new 去建立一個有 Logto 認證嘅全端應用。由設定登入流程、建立浮動登入面板，到啟用社交登入，呢篇指南會教晒你點樣設置同自訂。

Guamian
Guamian
Product & Design

Stop wasting weeks on user auth
Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.
Get started
Product screenshot

乜嘢係 Bolt.New

Bolt.new 係一個以瀏覽器為基礎，能夠即時生成同執行全端網頁應用嘅工具。佢建基於 StackBlitz 嘅 WebContainer 技術，畀開發者一個乾淨、已預設配置好嘅 stack，內含 Next.js（App Router）、Tailwind CSS、Supabase、Prisma 同 ShadCN UI。整個開發環境都係本地喺瀏覽器運行，唔需要安裝，冇雲端建構步驟，亦唔使註冊帳號。

唔同於專注於現有項目內 AI 助手編碼嘅工具，Bolt.new 更加著重於 開發流程嘅起步階段。佢去除咗建立專案結構、裝依賴、開本地 server 嘅繁瑣步驟，令你由 idea 去到可執行原型只需幾秒鐘。

Bolt.new 有咩唔同於 Cursor 或 Lovable？

好似 Cursor 同 Lovable 呢啲工具，係喺你嘅編碼器裡面做 AI copilot。但 Bolt.new 專注於另一樣：即時，生成及執行全端項目。

  • Cursor 幫你加強 VS Code 工作流，用 AI 幫你編輯或產生現有環境嘅代碼。
  • Bolt.new 係根據 prompt 或模板，由零開始即刻創建一個運作緊嘅 app，直接喺瀏覽器用 WebContainers 運行。

完全唔靠本地工具或者雲端 VM，一切都喺瀏覽器原生支援 Node.js、包管理同全端開發。呢個好適合需要快速試做原型、做 AI 或 SaaS 專案時本地優先嘅實驗。

邊啲人啱用 Bolt.new？

Bolt.new 為成日由零開始開工嘅開發者設計，例如：

  • 想驗證產品構想嘅 indie hacker
  • 試 workflow 或嵌模型嘅 AI builder
  • 做 MVP 原型嘅創辦人
  • 做內部工具或 demo 嘅工程師

呢班人多數熟悉現代 web stack，鍾意用快、乾淨、唔多規限嘅工具。Bolt.new 唔係 drag-and-drop site builder，亦唔係教學平台。佢預設你懂 React 同全端開發，但幫你省卻 set up 嘅麻煩。

Bolt.new 嘅歷史同進化

Bolt.new 出自 StackBlitz 團隊，StackBlitz 創立於 2017 年，由 Eric Simons 同 Albert Pai 創辦。StackBlitz 首創咗 WebContainers，即係一個以瀏覽器為主、本地執行 Node.js 環境、用 WebAssembly 來運行嘅技術。令開發現代 JavaScript 應用時唔洗雲 server 或本地安裝。

去到 2023 年，StackBlitz 面對轉捩點。增長放慢，團隊諗咗條新路：將 WebContainers 結合 AI，根據自然語言 prompt 直接產生完整可運行嘅應用。

呢個實驗最終變成 Bolt.new，並於 2024 年 10 月公開發佈。短短幾個星期內因為夠簡單夠快吸引咗唔少 developer。呢個工具將 StackBlitz 幾年來搞掂咗嘅嘢一齊整合晒，包括 runtime 隔離、超快依賴安裝、易 share 嘅開發環境，再加一個懂解你開發目標嘅 AI 介面。

Bolt.new 成為開發工具新潮流：唔單止寫快咗 code，而係直接一開就有得行嘅 code，仲可以切合你想做嘅嘢。

教學：用 Logto 同 Bolt.New 加自訂登入體驗

喺 Logto console 註冊應用

今次示例，我用 Bolt.new 造個 CMS app。我 skip 咗 prompt phase，直接叫 agent 幫我建個用 Logto 做認證嘅 CMS。

根據指引，我需要有兩個關鍵資料：

  1. Logto endpoint
  2. App ID

因為個 app 係單頁 React 應用，唔需要 app secret。其餘嘢 agent 已經處理晒：安裝最新 Logto React SDK、設定認證 component，全部串埋一齊。

最後一步，我去 Logto Cloud Console 開個新單頁應用，複製返 Logto endpoint 同 App ID 貼去 Bolt.new。

跟住要設定 Redirect URIs 同 Post sign-out redirect URIs。

重要細節：由於 Bolt.new 喺瀏覽器運行冇本地 IDE，你唔可以用 http://localhost:3000/ 做 redirect URI。記住用 Bolt.new 分頁上顯示嗰個預覽 URL。

bolt_auth_1.png

自訂 Logto 預設登入體驗

Logto 提供咗可自訂、預先做好嘅登入流程，你可以喺 Console 度改。入去 Sign-in Experience > Sign-in & Sign-up，揀你想用嘅登入方式（例如 email、用戶名、電話或者社交登入）。

設定好之後，一 call 登入流程就會將用戶跳去 Logto 託管嘅登入頁，並根據你揀咗嘅選項。成個認證流程都由 Logto 處理，簽到之後用戶會返回你個 app。

bolt_auth_2.png

bolt_auth_3.png

bolt_auth_4.png

喺產品上方整一個浮動登錄面板

而家我想再玩多一步，想整一個似 Perplexity 果種自訂嘅登入流程。唔係跳去第二版，而係直接浮動登入面板加喺產品介面上面。咁做，用戶唔會離開內容，同時底層都係用緊 Logto 嘅認證流程。

bolt_auth_5.png

所以我用咗呢個 prompt：

我想個登入頁靚啲，只係右下角浮動面板。有兩個掣：一個 "登入"、一個 "創建帳號"。每個掣都去唔同頁面，由 Logto 處理。用 Logto 嘅 first-screen experience 設計 https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

bolt_auth_6.png

好玩嘅係，你撳登入就直接入去登入頁，撳創建帳號就直入註冊畫面。

bolt_auth_7.png

bolt_auth_8.png

加入社交登錄流程

你可以畀 Logto 直接登錄文檔 參考埋 agent，用 prompt 例如「加埋社交登入流程」。咁就可以 skip 掉 Logto 預設登錄起始頁。例如一撳 Google 登入 掣，就會即時進入 Google 登入流程，幫用戶提速，同時提供更友善嘅登入體驗。

bolt_auth_9.png

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

上面只係最基本的例子。Logto 而家做緊 MCP 伺服器，直接喺你 IDE 入面運行，令你可以直接同 Logto Console 及 Management API 互動，無需離開開發環境。

到時你可以：

  1. 建立及管理用戶
  2. 查睇及過濾紀錄
  3. 設定登入及註冊流程
  4. 定義 API 資源、權限同角色
  5. 管理應用及存取設置
  6. 仲有更多...

當本地工具同 AI 配合埋 Logto 基礎建設，認證唔再係苦差，會成為自然一部分開發過程。

免費試用 Logto Cloud