用 Logto 构建 SvelteKit 验证
学习如何通过集成 Logto SDK 来构建一个 SvelteKit 的用户验证流程。
Founder
开始学习
介绍
- Logto 是一个开源的 Auth0 替代品，用于构建身份基础设施。它支持多种登录方式，包括用户名、电子邮件、电话号码以及 Google 和 GitHub 等流行的社交登录。
- SvelteKit 是一个框架，用于快速开发健壮的，高性能的使用 Svelte 的网络应用。
在本教程中，我们将向你展示如何通过集成 Logto SDK 使用 SvelteKit 构建用户身份验证流程。本教程使用 TypeScript 作为编程语言。
先决条件
在开始之前，请确保你具备以下条件：
- 一个 Logto 账户。如果你还没有，可以 免费注册。
- A SvelteKit 开发环境和一个项目。
创建一个 Logto 应用
要开始，创建一个 "传统网页" 类型的 Logto 应用。按照以下步骤创建一个 Logto 应用：
- 登录 Logto 控制台。
- 在左侧导航栏中，点击 应用。
- 点击 创建应用。
- 在打开的页面中，找到 "传统网页" 部分并找到 "SvelteKit" 卡片。
- 点击 开始构建，并输入你的应用名称。
- 点击 创建。
然后你应该会看到一个互动指南，引导你完成将 Logto SDK 集成到你的 SvelteKit 应用中的过程。以下内容可以作为未来使用的参考。
集成 Logto SDK
安装
通过你喜欢的包管理器安装 Logto SDK :
添加 Logto hook
在你的 hooks.server.ts 文件中，添加以下代码来将 Logto hook 注入到你的服务器中：
由于这些信息很敏感，建议使用环境变量：
如果你有多个 hooks，你可以使用sequence() 辅助函数 将它们链在一起：
现在你可以在 locals 对象中访问 Logto 客户端。对于 TypeScript，你可以把类型添加到 app.d.ts：
我们稍后会讨论 user 对象。
实现登录和退出
配置重定向 URI
切换到 Logto 控制台的应用详情页面。添加一个重定向 URI http://localhost:3000/callback。
重定向 URI 是一个 OAuth 2.0 概念，表示在身份验证后应该重定向的位置。
同样，在 "退出后重定向 URI" 部分添加 http://localhost:3000/。
退出后重定向 URI 是一个 OAuth 2.0 概念，表示在退出后应该重定向的位置。
然后点击 "保存" 以保存更改。
返回到你的应用，在你想要实现登录和退出的页面，定义以下动作：
然后在你的 Svelte 组件中使用这些动作：
显示用户信息
为了显示用户的信息，你可以将 locals.user 对象注入到布局中，从而使其可以在所有页面中使用：
在你的 Svelte 组件中：
检查点：运行应用
现在你可以运行应用并尝试使用 Logto 登录/退出：
- 在浏览器中打开应用，你应该会看到 "登录" 按钮。
- 点击 "登录" 按钮，你应该会被重定向到 Logto 登录页面。
- 登录后，你应该会被 重定向回应用，并且你应该会看到用户数据和 "退出" 按钮。
- 点击 "退出" 按钮，你应该会被重定向到 Logto 退出页面，然后重定向回应用，处于未登录状态。
如果你在集成过程中遇到任何问题，请不要犹豫，加入我们的 Discord 服务器 与社区和 Logto 团队聊天！