简体中文
使用 Bolt.New 和 Logto 快速构建你的自定义登录流程
学习如何使用 Bolt.new 构建带有 Logto 认证的全栈应用。从配置登录流程到创建浮动登录面板，以及开启社交登录，本指南涵盖了设置和个性化两个部分。
Guamian
Product & Design
Product & Design
学习如何使用 Bolt.new 构建带有 Logto 认证的全栈应用。从配置登录流程到创建浮动登录面板，以及开启社交登录，本指南涵盖了设置和个性化两个部分。
Bolt.new 是一个基于浏览器的工具，能即时生成并运行全栈 Web 应用。它基于 StackBlitz 的 WebContainer 技术 构建，为开发者提供了一个整洁且预配置好的技术栈，包括 Next.js（App Router）、Tailwind CSS、Supabase、Prisma 和 ShadCN UI。整个环境都本地运行在浏览器中，无需安装、无需云端构建步骤，也不用注册账户。
与那些聚焦于在现有项目里进行 AI 辅助编码的工具不同，Bolt.new 更专注于 开发启动阶段。它消除了项目结构、依赖和本地服务器搭建的繁琐流程，让你从想法到可运行原型只需几秒钟。
类似 Cursor 和 Lovable 这样的工具主要作为你的代码编辑器里的 AI 助手，而 Bolt.new 完全专注于另一件事：即刻生成并运行全栈项目。
不依赖本地工具或远程云主机。所有一切都在浏览器内完成，原生支持 Node.js、包管理和全栈开发。这使得它特别适合快速原型和以本地优先为主的试验，尤其适用于 AI 或 SaaS 项目场景。
Bolt.new 专为那些经常从零开始的开发者设计，比如：
这些用户通常熟悉现代 Web 技术栈，喜欢快捷、简洁且无强约束的工具。Bolt.new 不是可视化建站器或教程式平台。它假设你具备 React 和全栈开发的知识，但大大减少了初始搭建的阻碍。
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 带来了开发工具的一次转变：开发者不仅仅是写代码更快了，而是能直接用已在运行的代码出发，并根据自己的意图定制。
本例中，我用 Bolt.new 创建了一个 CMS 应用。我跳过了提示阶段，直接让 agent 构建一个以 Logto 做认证的 CMS。
根据说明，我需要准备两样关键信息：
Logto endpointApp 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 浏览器标签页显示的预览链接。
Logto 提供了可配置、内置的登录流程，你可以在控制台自定义。只需进入 登录体验 > 登录 & 注册，选择你想要的登录方式（比如邮箱、用户名、手机号或社交登录）。
配置好后，触发登录流程会跳转到 Logto 托管的登录页，并显示你选定的选项。整个认证过程都由 Logto 处理，用户登录后会回到你的应用。
现在我想更进一步，构建一个更定制的登录体验，类似 Perplexity 所用的方式。我不想跳转到单独页面，而是把一个浮动登录面板直接放在产品 UI 上方。这样用户登录时不会跳出当前场景，但底层依旧用 Logto 的认证流程。
我只用了如下提示：
我想让登录页更美观，只需要一个在右下角的浮动面板。有两个按钮：“登录”和“创建账号”。每个按钮跳转到不同的页面，由 Logto 处理。使用 Logto 文档里 first-screen 的体验 https://docs.logto.io/end-user-flows/authentication-parameters/first-screen
有趣的是，点击登录会直接进入登录页，点击创建账号则直接进入注册界面。
你可以把 Logto 的直接登录文档 分享给 agent，并加上类似“增加社交登录流程”这样的提示。这样你可以跳过 Logto 默认的落地页。例如点击 Google 登录 按钮时，可以直接进入 Google 认证流程，给用户更快、更友好的登录体验。
这只是基础示例。Logto 目前正在开发直接在 IDE 内运行的 MCP 服务器，让你可以在开发环境中与 Logto 控制台 和 管理 API 交互，无需频繁切换。
借助这个方案，你可以：
结合本地工具、AI 与 Logto 基础设施，认证集成不再是痛苦的步骤，它将成为你日常开发流程自然而然的一环。