"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "anfangen", "hProperties": { "id": "anfangen" } }, "depth": 2, "value": "Anfangen" }, { "data": { "id": "integrieren-sie-das-logto-sdk", "hProperties": { "id": "integrieren-sie-das-logto-sdk" } }, "depth": 2, "value": "Integrieren Sie das Logto SDK" }, { "data": { "id": "installation", "hProperties": { "id": "installation" } }, "depth": 3, "value": "Installation" }, { "data": { "id": "registrieren-sie-das-logto-modul", "hProperties": { "id": "registrieren-sie-das-logto-modul" } }, "depth": 3, "value": "Registrieren Sie das Logto-Modul" }, { "data": { "id": "implementieren-sie-anmeldung-und-abmeldung", "hProperties": { "id": "implementieren-sie-anmeldung-und-abmeldung" } }, "depth": 3, "value": "Implementieren Sie Anmeldung und Abmeldung" }, { "data": { "id": "anzeigen-von-benutzerinformationen", "hProperties": { "id": "anzeigen-von-benutzerinformationen" } }, "depth": 3, "value": "Anzeigen von Benutzerinformationen" }, { "data": { "id": "checkpoint-anwendung-ausführen", "hProperties": { "id": "checkpoint-anwendung-ausführen" } }, "depth": 2, "value": "Checkpoint: Anwendung ausführen" }, { "data": { "id": "weiterführende-literatur", "hProperties": { "id": "weiterführende-literatur" } }, "depth": 2, "value": "Weiterführende Literatur" }]; const readingTime = { "minutes": 1, "words": 321, "text": "less than a minute 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: "anfangen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#anfangen", children: _jsx(_components.span, { children: "#" }) }), "Anfangen"] }), "\n", _jsx(GetStarted, { framework: { name: 'Nuxt', url: 'https://nuxt.com/', description: 'ein Open-Source-Framework, das die Webentwicklung intuitiv und mächtig macht.' }, programmingLanguage: "TypeScript", applicationType: "Traditionelles Web" }), "\n", _jsxs(_components.h2, { id: "integrieren-sie-das-logto-sdk", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#integrieren-sie-das-logto-sdk", children: _jsx(_components.span, { children: "#" }) }), "Integrieren Sie das Logto SDK"] }), "\n", _jsxs(_components.h3, { id: "installation", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#installation", children: _jsx(_components.span, { children: "#" }) }), "Installation"] }), "\n", _jsx(_components.p, { children: "Installieren Sie das Logto SDK über Ihren bevorzugten Paketmanager:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# oder pnpm, Garn, etc.\nnpm i @logto/nuxt\n" }) }), "\n", _jsxs(_components.h3, { id: "registrieren-sie-das-logto-modul", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#registrieren-sie-das-logto-modul", children: _jsx(_components.span, { children: "#" }) }), "Registrieren Sie das Logto-Modul"] }), "\n", _jsxs(_components.p, { children: ["In Ihrer Nuxt-Konfigurationsdatei (", _jsx(_components.code, { children: "nuxt.config.ts" }), "), fügen Sie das Logto-Modul hinzu:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "export default defineNuxtConfig({\n modules: ['@logto/nuxt'],\n // ...andere Konfigurationen\n});\n" }) }), "\n", _jsx(_components.p, { children: "Die minimale Konfiguration für das Modul ist wie folgt:" }), "\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: '',\n appId: '',\n appSecret: '',\n cookieEncryptionKey: '',\n },\n },\n // ...andere Konfigurationen\n});\n" }) }), "\n", _jsx(_components.p, { children: "Da diese Informationen sensibel sind, wird empfohlen, Umgebungsvariablen zu verwenden:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# .env Datei\nNUXT_LOGTO_ENDPOINT=\"\"\nNUXT_LOGTO_APP_ID=\"\"\nNUXT_LOGTO_APP_SECRET=\"\"\nNUXT_LOGTO_COOKIE_ENCRYPTION_KEY=\"\"\n" }) }), "\n", _jsxs(_components.p, { children: ["Sehen Sie ", _jsx(_components.a, { href: "https://nuxt.com/docs/guide/going-further/runtime-config", children: "runtime config" }), " für weitere Informationen."] }), "\n", _jsxs(_components.h3, { id: "implementieren-sie-anmeldung-und-abmeldung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementieren-sie-anmeldung-und-abmeldung", children: _jsx(_components.span, { children: "#" }) }), "Implementieren Sie Anmeldung und Abmeldung"] }), "\n", _jsx(ConfigureRedirectUris, {}), "\n", _jsxs(_components.p, { children: ["Bei der Registrierung des ", _jsx(_components.code, { children: "@logto/nuxt" }), "-Moduls wird Folgendes ausgeführt:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Drei Routen für Anmeldung (", _jsx(_components.code, { children: "/anmelden" }), "), Abmeldung (", _jsx(_components.code, { children: "/abmelden" }), ") und callback (", _jsx(_components.code, { children: "/callback" }), ") hinzufügen."] }), "\n", _jsxs(_components.li, { children: ["Zwei zusammenstellbare Elemente importieren: ", _jsx(_components.code, { children: "useLogtoClient" }), " und ", _jsx(_components.code, { children: "useLogtoUser" }), "."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Diese Routen können über ", _jsx(_components.code, { children: "logto.pathnames" }), " in den Moduleinstellungen konfiguriert werden, zum Beispiel:"] }), "\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 // ...andere Konfigurationen\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Schauen Sie sich die ", _jsx(_components.a, { href: "https://github.com/logto-io/js/blob/HEAD/packages/nuxt/src/runtime/utils/types.ts", children: "type definition file" }), " im ", _jsx(_components.code, { children: "@logto/nuxt" }), "-Paket für weitere Informationen an."] }), "\n", _jsx(_components.p, { children: "Da Nuxt-Seiten nach dem ersten Laden hydratisiert werden und zu einer Single-Page-Anwendung (SPA) werden, müssen wir den Benutzer zur Anmelde- oder Abmelderoute umleiten, wenn nötig." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "Anmelden\n
\nAbmelden\n" }) }), "\n", _jsxs(_components.h3, { id: "anzeigen-von-benutzerinformationen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#anzeigen-von-benutzerinformationen", children: _jsx(_components.span, { children: "#" }) }), "Anzeigen von Benutzerinformationen"] }), "\n", _jsxs(_components.p, { children: ["Um die Informationen des Benutzers anzuzeigen, können Sie das ", _jsx(_components.code, { children: "useLogtoUser()" }), "-Composable verwenden, das auf dem Server und auf der Clientseite verfügbar ist:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.h2, { id: "checkpoint-anwendung-ausführen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#checkpoint-anwendung-ausführen", children: _jsx(_components.span, { children: "#" }) }), "Checkpoint: Anwendung ausführen"] }), "\n", _jsx(Checkpoint, {}), "\n", _jsxs(_components.h2, { id: "weiterführende-literatur", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#weiterführende-literatur", children: _jsx(_components.span, { children: "#" }) }), "Weiterführende Literatur"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "Anmeldeerfahrung anpassen" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "Konfigurieren Sie Connectors" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "Schützen Sie Ihre API" }) }), "\n"] }), "\n", _jsx(LogtoCloudButton, { children: "Versuchen Sie Logto heute" })] }); } 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."); }