简体中文
使用 Logto 构建 Nuxt 认证
学习如何通过集成 Logto SDK 在 Nuxt 中构建用户认证流程。
Gao
Founder
Founder
学习如何通过集成 Logto SDK 在 Nuxt 中构建用户认证流程。
在本教程中，我们将向你展示如何通过集成 Logto SDK 使用 Nuxt 构建用户身份验证流程。本教程使用 TypeScript 作为编程语言。
在开始之前，请确保你具备以下条件：
要开始，创建一个 "传统网页" 类型的 Logto 应用。按照以下步骤创建一个 Logto 应用：
然后你应该会看到一个互动指南，引导你完成将 Logto SDK 集成到你的 Nuxt 应用中的过程。以下内容可以作为未来使用的参考。
通过你最喜欢的包管理器安装 Logto SDK：
在你的 Nuxt 配置文件（ nuxt.config.ts ）中，添加 Logto 模块：
该模块的最小配置如下：
由于这些信息是敏感的，我们建议使用环境变量：
查看 运行时配置 获取更多信息。
切换到 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 登录/退出：
如果你在集成过程中遇到任何问题，请不要犹豫，加入我们的 Discord 服务器 与社区和 Logto 团队聊天！