"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "开始", "hProperties": { "id": "开始" } }, "depth": 2, "value": "开始" }, { "data": { "id": "集成-logto-sdk", "hProperties": { "id": "集成-logto-sdk" } }, "depth": 2, "value": "集成 Logto SDK" }, { "data": { "id": "安装", "hProperties": { "id": "安装" } }, "depth": 3, "value": "安装" }, { "data": { "id": "注册-logto-模块", "hProperties": { "id": "注册-logto-模块" } }, "depth": 3, "value": "注册 Logto 模块" }, { "data": { "id": "实现登录和登出", "hProperties": { "id": "实现登录和登出" } }, "depth": 3, "value": "实现登录和登出" }, { "data": { "id": "显示用户信息", "hProperties": { "id": "显示用户信息" } }, "depth": 3, "value": "显示用户信息" }, { "data": { "id": "检查点运行应用", "hProperties": { "id": "检查点运行应用" } }, "depth": 2, "value": "检查点：运行应用" }, { "data": { "id": "更深入的阅读", "hProperties": { "id": "更深入的阅读" } }, "depth": 2, "value": "更深入的阅读" }]; const readingTime = { "minutes": 2, "words": 455, "text": "2 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Checkpoint, ConfigureRedirectUris, GetStarted, LogtoCloudButton} = _components; if (!Checkpoint) _missingMdxReference("Checkpoint", true); if (!ConfigureRedirectUris) _missingMdxReference("ConfigureRedirectUris", true); if (!GetStarted) _missingMdxReference("GetStarted", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "开始", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#开始", children: _jsx(_components.span, { children: "#" }) }), "开始"] }), "\n", _jsx(GetStarted, { framework: { name: 'Nuxt', url: 'https://nuxt.com/', description: '一个使网页开发直观且强大的开源框架。' }, programmingLanguage: "TypeScript", applicationType: "传统网页" }), "\n", _jsxs(_components.h2, { id: "集成-logto-sdk", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#集成-logto-sdk", children: _jsx(_components.span, { children: "#" }) }), "集成 Logto SDK"] }), "\n", _jsxs(_components.h3, { id: "安装", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#安装", children: _jsx(_components.span, { children: "#" }) }), "安装"] }), "\n", _jsx(_components.p, { children: "通过你最喜欢的包管理器安装 Logto SDK：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# 或者 pnpm，yarn 等。\nnpm i @logto/nuxt\n" }) }), "\n", _jsxs(_components.h3, { id: "注册-logto-模块", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#注册-logto-模块", children: _jsx(_components.span, { children: "#" }) }), "注册 Logto 模块"] }), "\n", _jsxs(_components.p, { children: ["在你的 Nuxt 配置文件（ ", _jsx(_components.code, { children: "nuxt.config.ts" }), " ）中，添加 Logto 模块："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "export default defineNuxtConfig({\n modules: ['@logto/nuxt'],\n // ...其他配置\n});\n" }) }), "\n", _jsx(_components.p, { children: "该模块的最小配置如下：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "export default defineNuxtConfig({\n modules: ['@logto/nuxt'],\n runtimeConfig: {\n logto: {\n endpoint: '<你的-logto-endpoint>',\n appId: '<你的-logto-app-id>',\n appSecret: '<你的-logto-app-secret>',\n cookieEncryptionKey: '<一个随机字符串>',\n },\n },\n // ...其他配置\n});\n" }) }), "\n", _jsx(_components.p, { children: "由于这些信息是敏感的，我们建议使用环境变量：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# .env 文件\nNUXT_LOGTO_ENDPOINT=\"<你的-logto-endpoint>\"\nNUXT_LOGTO_APP_ID=\"<你的-logto-app-id>\"\nNUXT_LOGTO_APP_SECRET=\"<你的-logto-app-secret>\"\nNUXT_LOGTO_COOKIE_ENCRYPTION_KEY=\"<一个随机字符串>\"\n" }) }), "\n", _jsxs(_components.p, { children: ["查看 ", _jsx(_components.a, { href: "https://nuxt.com/docs/guide/going-further/runtime-config", children: "运行时配置" }), " 获取更多信息。"] }), "\n", _jsxs(_components.h3, { id: "实现登录和登出", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#实现登录和登出", children: _jsx(_components.span, { children: "#" }) }), "实现登录和登出"] }), "\n", _jsx(ConfigureRedirectUris, {}), "\n", _jsxs(_components.p, { children: ["在注册 ", _jsx(_components.code, { children: "@logto/nuxt" }), " 模块时，会进行以下操作："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["添加三个路由，分别为登录（ ", _jsx(_components.code, { children: "/sign-in" }), " ），登出（ ", _jsx(_components.code, { children: "/sign-out" }), " ）和回调（ ", _jsx(_components.code, { children: "/callback" }), " ）。"] }), "\n", _jsxs(_components.li, { children: ["引入两个组合： ", _jsx(_components.code, { children: "useLogtoClient" }), " 和 ", _jsx(_components.code, { children: "useLogtoUser" }), "。"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["这些路由可以通过模块选项的 ", _jsx(_components.code, { children: "logto.pathnames" }), " 配置，例如："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "export default defineNuxtConfig({\n logto: {\n pathnames: {\n signIn: '/login',\n signOut: '/logout',\n callback: '/auth/callback',\n },\n },\n // ...其他配置\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["查看 ", _jsx(_components.code, { children: "@logto/nuxt" }), " 包的 ", _jsx(_components.a, { href: "https://github.com/logto-io/js/blob/HEAD/packages/nuxt/src/runtime/utils/types.ts", children: "类型定义文件" }), " 获取更多信息。"] }), "\n", _jsx(_components.p, { children: "因为在初次加载后，Nuxt 页面将被赋予元数据，并成为单页面应用程序（SPA），所以我们需要在需要的时候重定向用户到登录或登出路由。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "登录\n
\n登出\n" }) }), "\n", _jsxs(_components.h3, { id: "显示用户信息", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#显示用户信息", children: _jsx(_components.span, { children: "#" }) }), "显示用户信息"] }), "\n", _jsxs(_components.p, { children: ["要显示用户的信息，你可以使用 ", _jsx(_components.code, { children: "useLogtoUser()" }), " 组合，它在服务器和客户端都可用："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.h2, { id: "检查点运行应用", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#检查点运行应用", children: _jsx(_components.span, { children: "#" }) }), "检查点：运行应用"] }), "\n", _jsx(Checkpoint, {}), "\n", _jsxs(_components.h2, { id: "更深入的阅读", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#更深入的阅读", children: _jsx(_components.span, { children: "#" }) }), "更深入的阅读"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "自定义登录体验" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "配置连接器" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "保护您的 API" }) }), "\n"] }), "\n", _jsx(LogtoCloudButton, { children: "今天就试试 Logto" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }