使用 Logto 构建 Nuxt 认证
学习如何通过集成 Logto SDK 在 Nuxt 中构建用户认证流程。
Founder
开始
介绍
- Logto 是一个开源的 Auth0 替代品，用于构建身份基础设施。它支持多种登录方式，包括用户名、电子邮件、电话号码以及 Google 和 GitHub 等流行的社交登录。
- Nuxt 一个使网页开发直观且强大的开源框架。
在本教程中，我们将向你展示如何通过集成 Logto SDK 使用 Nuxt 构建用户身份验证流程。本教程使用 TypeScript 作为编程语言。
先决条件
在开始之前，请确保你具备以下条件：
- 一个 Logto 账户。如果你还没有，可以 免费注册。
- A Nuxt 开发环境和一个项目。
创建一个 Logto 应用
要开始，创建一个 "传统网页" 类型的 Logto 应用。按照以下步骤创建一个 Logto 应用：
- 登录 Logto 控制台。
- 在左侧导航栏中，点击 应用。
- 点击 创建应用。
- 在打开的页面中，找到 "传统网页" 部分并找到 "Nuxt" 卡片。
- 点击 开始构建，并输入你的应用名称。
- 点击 创建。
然后你应该会看到一个互动指南，引导你完成将 Logto SDK 集成到你的 Nuxt 应用中的过程。以下内容可以作为未来使用的参考。
集成 Logto SDK
安装
通过你最喜欢的包管理器安装 Logto SDK：
注册 Logto 模块
在你的 Nuxt 配置文件（ nuxt.config.ts ）中，添加 Logto 模块：
该模块的最小配置如下：
由于这些信息是敏感的，我们建议使用环境变量：
查看 运行时配置 获取更多信息。
实现登录和登出
配置重定向 URI
切换到 Logto 控制台的应用详情页面。添加一个重定向 URI http://localhost:3000/callback。
重定向 URI 是一个 OAuth 2.0 概念，表示在身份验证后应该重定向的位置。
同样，在 "退出后重定向 URI" 部分添加 http://localhost:3000/。
退出后重定向 URI 是一个 OAuth 2.0 概念，表示在退出后应该重定向的位置。
然后点击 "保存" 以保存更改。
在注册 @logto/nuxt 模块时，会进行以下操作：
- 添加三个路由，分别为登录（
/sign-in），登出（/sign-out）和回调（/callback）。 - 引入两个组合：
useLogtoClient和useLogtoUser。
这些路由可以通过模块选项的 logto.pathnames 配置，例如 ：
查看 @logto/nuxt 包的 类型定义文件 获取更多信息。
因为在初次加载后，Nuxt 页面将被赋予元数据，并成为单页面应用程序（SPA），所以我们需要在需要的时候重定向用户到登录或登出路由。
显示用户信息
要显示用户的信息，你可以使用 useLogtoUser() 组合，它在服务器和客户端都可用：
检查点：运行应用
现在你可以运行应用并尝试使用 Logto 登录/退出：
- 在浏览器中打开应用，你应该会看到 "登录" 按钮。
- 点击 "登录" 按钮，你应该会被重定向到 Logto 登录页面。
- 登录后，你应该会被重定向回应用，并且你应该会看到用户数据和 "退出" 按钮。
- 点击 "退出" 按钮，你应该会被重定向到 Logto 退出页面，然后重定向回应用，处于未登录状态。
如果你在集成过程中遇到任何问题，请不要犹豫，加入我们的 Discord 服务器 与社区和 Logto 团队聊天！