简体中文
用 Logto 构建 SvelteKit 验证
学习如何通过集成 Logto SDK 来构建一个 SvelteKit 的用户验证流程。
Gao
Founder
Founder
学习如何通过集成 Logto SDK 来构建一个 SvelteKit 的用户验证流程。
在本教程中，我们将向你展示如何通过集成 Logto SDK 使用 SvelteKit 构建用户身份验证流程。本教程使用 TypeScript 作为编程语言。
在开始之前，请确保你具备以下条件：
要开始，创建一个 "传统网页" 类型的 Logto 应用。按照以下步骤创建一个 Logto 应用：
然后你应该会看到一个互动指南，引导你完成将 Logto SDK 集成到你的 SvelteKit 应用中的过程。以下内容可以作为未来使用的参考。
通过你喜欢的包管理器安装 Logto SDK :
在你的 hooks.server.ts 文件中，添加以下代码来将 Logto hook 注入到你的服务器中：
由于这些信息很敏感，建议使用环境变量：
如果你有多个 hooks，你可以使用sequence() 辅助函数 将它们链在一起：
现在你可以在 locals 对象中访问 Logto 客户端。对于 TypeScript，你可以把类型添加到 app.d.ts：
我们稍后会讨论 user 对象。
切换到 Logto 控制台的应用详情页面。添加一个重定向 URI http://localhost:3000/callback。
重定向 URI 是一个 OAuth 2.0 概念，表示在身份验证后应该重定向的位置。
同样，在 "退出后重定向 URI" 部分添加 http://localhost:3000/。
退出后重定向 URI 是一个 OAuth 2.0 概念，表示在退出后应该重定向的位置。
然后点击 "保存" 以保存更改。
返回到你的应用，在你想要实现登录和退出的页面，定义以下动作：
然后在你的 Svelte 组件中使用这些动作：
为了显示用户的信息，你可以将 locals.user 对象注入到布局中，从而使其可以在所有页面中使用：
在你的 Svelte 组件中：
现在你可以运行应用并尝试使用 Logto 登录/退出：
如果你在集成过程中遇到任何问题，请不要犹豫，加入我们的 Discord 服务器 与社区和 Logto 团队聊天！