简体中文
使用 Claude Code 和 Logto 快速构建你的自定义登录流程
学习如何使用 Claude Code 搭建一个带有 Logto 认证的全栈应用：从登录设置到自定义登录面板及社交登录。
Guamian
Product & Design
Product & Design
学习如何使用 Claude Code 搭建一个带有 Logto 认证的全栈应用：从登录设置到自定义登录面板及社交登录。
Claude Code 是由 Anthropic 开发的 AI 驱动编码助手，旨在帮助开发者更高效地编写、调试和理解代码。与通用聊天机器人不同，它聚焦于编程工作流，并且深度集成到开发环境中。开发者可以用它来生成代码片段、解释复杂函数、修复错误，或者加快原型开发，无需频繁切换工具、分散注意力。
它基础来自于 Anthropic 的 Claude 模型，模型训练特别强调安全性、可靠性和有用性。这意味着 Claude Code 不止追求速度，还致力于在真实项目中生成值得信赖、可维护的代码。
市场上已有各种编码助手与 AI 助手，但 Claude Code 有几个关键区别：
简而言之，别的工具强调代码补全，Claude Code 旨在成为懂你的编程伙伴，兼顾生成与理解。
Claude Code 适用于广泛人群：
总之，只要你经常写、读或管理代码，Claude Code 都能让你的开发流程更快、更清晰、更可靠。
今天，我会带你用 Claude Code 给你的应用加上自定义登录，不论你是专业开发者还是兴趣使然的码农。
在这个例子里，我用 Claude Code 开发了一个文档管理器应用。
首先，我前往 Logto 云控制台 创建一个单页应用。你会看到各种配置项和端点，集成时我们会用到。
Claude Code 解决了后续的环节：它自动安装最新版的 Logto React SDK、设置认证组件、并把所有部分串联起来。
依照引导，你需要提供两个关键信息：
我把 Logto 端点和应用 ID 填进项目里，并配置了 重定向 URI 和退出登录后的重定向 URI。
你可以把这两个参数直接交给 Claude Code，剩下的集成它会自动帮你做好。
现在让我们测试一下：点击登录后，你会被重定向到 Logto 托管的登录页面。
如果你设置了 退出登录后的 URL，你将能退出并自动跳转到指定页面。
Logto 提供可配置的内置登录流程，可以在控制台里自定义。开始配置的话请去 登陆体验 > 登录 & 注册，然后选择你喜欢的登录方式（比如邮箱、用户名、手机号、或社交登录）。
设置好后，触发登录流程会让用户跳转到带你自定义选项的 Logto 托管登录页。整个认证过程由 Logto 完成，用户登录后会回到你的 App。
现在我想更进一步，打造更个性化的登录体验。不需要跳转新页面，而是直接把一个悬浮登录面板置于产品界面上方。这样用户一直处于当前上下文，并且后台依然使用 Logto 的认证流程。
你可以直接用自然语言提示：
Claude Code 会生成：
用你的测试用户验证登录是否被 Logto CIAM 平台捕获。
这只是基础示例。Logto 正在开发可以直接在 IDE 内运行的 MCP 服务器，让你无需离开开发环境也能和 Logto 控制台、管理 API 交互。
这种组合下，你可以：
融合本地工具链、AI 与 Logto 基础设施后，认证集成不再是一道难题，它会成为你自然开发流程的一部分。