简体中文
  • Bolt
  • AI
  • 直接登录

使用 Bolt.New 和 Logto 快速构建你的自定义登录流程

学习如何使用 Bolt.new 构建带有 Logto 认证的全栈应用。从配置登录流程到创建浮动登录面板，以及开启社交登录，本指南涵盖了设置和个性化两个部分。

Guamian
Guamian
Product & Design

不要在用户认证上浪费数周时间
使用 Logto 更快地发布安全应用。几分钟内集成用户认证，专注于您的核心产品。
立即开始
Product screenshot

什么是 Bolt.New

Bolt.new 是一个基于浏览器的工具，能即时生成并运行全栈 Web 应用。它基于 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 在 VS Code 工作流中用 AI 帮你编辑或生成已有环境下的代码。
  • Bolt.new 则能基于提示词或模板，从零生成一个可用应用，并在浏览器内通过 WebContainers 立即运行。

不依赖本地工具或远程云主机。所有一切都在浏览器内完成，原生支持 Node.js、包管理和全栈开发。这使得它特别适合快速原型和以本地优先为主的试验，尤其适用于 AI 或 SaaS 项目场景。

Bolt.new 适合谁？

Bolt.new 专为那些经常从零开始的开发者设计，比如：

  • 验证产品想法的独立开发者（Indie hackers）
  • 测试工作流或内嵌模型的 AI 构建者
  • 原型 MVP 的创业者
  • 构建内部工具或演示的工程师

这些用户通常熟悉现代 Web 技术栈，喜欢快捷、简洁且无强约束的工具。Bolt.new 不是可视化建站器或教程式平台。它假设你具备 React 和全栈开发的知识，但大大减少了初始搭建的阻碍。

Bolt.new 的历史与演化

Bolt.new 出自 StackBlitz 团队，该公司于 2017 年由 Eric Simons 和 Albert Pai 创立。StackBlitz 首创了 WebContainers，这是一种可在浏览器内直接运行 Node.js 的原生 WebAssembly 运行时，从而无需云服务器或本地安装，就能开发现代 JavaScript 应用。

到 2023 年，StackBlitz 遇到增长瓶颈，团队开始探索更激进的方向：将 WebContainers 和 AI 结合，利用自然语言提示生成完整可用的应用。

这个实验最终变成了 Bolt.new，并于 2024 年 10 月正式对外发布。几周内，它凭借极致简洁和极速体验，在开发者社区快速获得关注。这个工具集合了 StackBlitz 多年积累（运行时隔离、快速依赖安装、可分享环境等），并加入了一个能理解常规开发目标的 AI 界面。

Bolt.new 带来了开发工具的一次转变：开发者不仅仅是写代码更快了，而是能直接用已在运行的代码出发，并根据自己的意图定制。

指南：用 Logto 和 Bolt.New 加入自定义登录体验

在 Logto 控制台注册应用

本例中，我用 Bolt.new 创建了一个 CMS 应用。我跳过了提示阶段，直接让 agent 构建一个以 Logto 做认证的 CMS。

根据说明，我需要准备两样关键信息：

  1. Logto endpoint
  2. App ID

由于这个应用是单页 React 应用，不需要应用密钥，agent 自动完成了剩下部分：它会安装最新版的 Logto React SDK，配置认证组件，并把全部流程串联起来。

为完成配置，我去 Logto Cloud Console，新建了一个单页应用，并把 Logto endpoint 和 App ID 粘贴进 Bolt.new。

然后配置 重定向 URI 和退出登录后的重定向 URI。

一个细节：由于 Bolt.new 是基于浏览器，不是本地 IDE，你不能将 http://localhost:3000/ 作为重定向 URI。你应该用 Bolt.new 浏览器标签页显示的预览链接。

bolt_auth_1.png

个性化 Logto 预置登录体验

Logto 提供了可配置、内置的登录流程，你可以在控制台自定义。只需进入 登录体验 > 登录 & 注册，选择你想要的登录方式（比如邮箱、用户名、手机号或社交登录）。

配置好后，触发登录流程会跳转到 Logto 托管的登录页，并显示你选定的选项。整个认证过程都由 Logto 处理，用户登录后会回到你的应用。

bolt_auth_2.png

bolt_auth_3.png

bolt_auth_4.png

在产品界面上创建浮动登录面板

现在我想更进一步，构建一个更定制的登录体验，类似 Perplexity 所用的方式。我不想跳转到单独页面，而是把一个浮动登录面板直接放在产品 UI 上方。这样用户登录时不会跳出当前场景，但底层依旧用 Logto 的认证流程。

bolt_auth_5.png

我只用了如下提示：

我想让登录页更美观，只需要一个在右下角的浮动面板。有两个按钮：“登录”和“创建账号”。每个按钮跳转到不同的页面，由 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 的直接登录文档 分享给 agent，并加上类似“增加社交登录流程”这样的提示。这样你可以跳过 Logto 默认的落地页。例如点击 Google 登录 按钮时，可以直接进入 Google 认证流程，给用户更快、更友好的登录体验。

bolt_auth_9.png

Logto 即将更新，支持 AI 驱动的认证集成

这只是基础示例。Logto 目前正在开发直接在 IDE 内运行的 MCP 服务器，让你可以在开发环境中与 Logto 控制台 和 管理 API 交互，无需频繁切换。

借助这个方案，你可以：

  1. 创建和管理用户
  2. 查看和筛选日志
  3. 配置登录和注册流程
  4. 定义 API 资源、权限和角色
  5. 管理应用和访问设置
  6. 以及更多

结合本地工具、AI 与 Logto 基础设施，认证集成不再是痛苦的步骤，它将成为你日常开发流程自然而然的一环。

免费试用 Logto 云