"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "beginnen", "hProperties": { "id": "beginnen" } }, "depth": 2, "value": "Beginnen" }, { "data": { "id": "logto-sdk-integreren", "hProperties": { "id": "logto-sdk-integreren" } }, "depth": 2, "value": "Logto SDK integreren" }, { "data": { "id": "installatie", "hProperties": { "id": "installatie" } }, "depth": 3, "value": "Installatie" }, { "data": { "id": "logto-module-registreren", "hProperties": { "id": "logto-module-registreren" } }, "depth": 3, "value": "Logto-module registreren" }, { "data": { "id": "implementeren-van-aanmelden-en-afmelden", "hProperties": { "id": "implementeren-van-aanmelden-en-afmelden" } }, "depth": 3, "value": "Implementeren van aanmelden en afmelden" }, { "data": { "id": "gebruikersinformatie-weergeven", "hProperties": { "id": "gebruikersinformatie-weergeven" } }, "depth": 3, "value": "Gebruikersinformatie weergeven" }, { "data": { "id": "controlepunt-de-applicatie-uitvoeren", "hProperties": { "id": "controlepunt-de-applicatie-uitvoeren" } }, "depth": 2, "value": "Controlepunt: De applicatie uitvoeren" }, { "data": { "id": "verdere-lectuur", "hProperties": { "id": "verdere-lectuur" } }, "depth": 2, "value": "Verdere lectuur" }]; const readingTime = { "minutes": 1, "words": 322, "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: "beginnen", children: ["Beginnen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#beginnen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(GetStarted, { framework: { name: 'Nuxt', url: 'https://nuxt.com/', description: 'een open source framework dat webontwikkeling intuïtief en krachtig maakt.' }, programmingLanguage: "TypeScript", applicationType: "Traditionele web" }), "\n", _jsxs(_components.h2, { id: "logto-sdk-integreren", children: ["Logto SDK integreren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-sdk-integreren", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "installatie", children: ["Installatie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#installatie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Installeer Logto SDK via je favoriete pakketbeheerder:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# of pnpm, yarn, enz.\nnpm i @logto/nuxt\n" }) }), "\n", _jsxs(_components.h3, { id: "logto-module-registreren", children: ["Logto-module registreren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-module-registreren", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Voeg in je Nuxt-configuratiebestand (", _jsx(_components.code, { children: "nuxt.config.ts" }), ") de Logto-module toe:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "export default defineNuxtConfig({\n modules: ['@logto/nuxt'],\n // ...andere configuraties\n});\n" }) }), "\n", _jsx(_components.p, { children: "De minimale configuratie voor de module is als volgt:" }), "\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 configuraties\n});\n" }) }), "\n", _jsx(_components.p, { children: "Aangezien deze gegevens gevoelig zijn, wordt aanbevolen om omgevingsvariabelen te gebruiken:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# .env bestand\nNUXT_LOGTO_ENDPOINT=\"\"\nNUXT_LOGTO_APP_ID=\"\"\nNUXT_LOGTO_APP_SECRET=\"\"\nNUXT_LOGTO_COOKIE_ENCRYPTION_KEY=\"\"\n" }) }), "\n", _jsxs(_components.p, { children: ["Zie ", _jsx(_components.a, { href: "https://nuxt.com/docs/guide/going-further/runtime-config", children: "runtime config" }), " voor meer informatie."] }), "\n", _jsxs(_components.h3, { id: "implementeren-van-aanmelden-en-afmelden", children: ["Implementeren van aanmelden en afmelden", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implementeren-van-aanmelden-en-afmelden", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(ConfigureRedirectUris, {}), "\n", _jsxs(_components.p, { children: ["Bij het registreren van de ", _jsx(_components.code, { children: "@logto/nuxt" }), "-module, zal deze het volgende doen:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Voeg drie routes toe voor aanmelden (", _jsx(_components.code, { children: "/sign-in" }), "), afmelden (", _jsx(_components.code, { children: "/sign-out" }), ") en callback (", _jsx(_components.code, { children: "/callback" }), ")."] }), "\n", _jsxs(_components.li, { children: ["Importeer twee composables: ", _jsx(_components.code, { children: "useLogtoClient" }), " en ", _jsx(_components.code, { children: "useLogtoUser" }), "."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Deze routes zijn configureerbaar via ", _jsx(_components.code, { children: "logto.pathnames" }), " in de module-opties, bijvoorbeeld:"] }), "\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 configuraties\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Bekijk het ", _jsx(_components.a, { href: "https://github.com/logto-io/js/blob/HEAD/packages/nuxt/src/runtime/utils/types.ts", children: "type definitiebestand" }), " in het ", _jsx(_components.code, { children: "@logto/nuxt" }), "-pakket voor meer informatie."] }), "\n", _jsx(_components.p, { children: "Aangezien Nuxt-pagina's gehydrateerd worden en een single-page application (SPA) worden na de eerste lading, moeten we de gebruiker omleiden naar de aanmeld- of afmeldroute wanneer dat nodig is." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "Aanmelden\n
\nAfmelden\n" }) }), "\n", _jsxs(_components.h3, { id: "gebruikersinformatie-weergeven", children: ["Gebruikersinformatie weergeven", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gebruikersinformatie-weergeven", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Om de informatie van de gebruiker weer te geven, kun je de composable ", _jsx(_components.code, { children: "useLogtoUser()" }), " gebruiken, die beschikbaar is aan zowel de server- als clientzijde:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.h2, { id: "controlepunt-de-applicatie-uitvoeren", children: ["Controlepunt: De applicatie uitvoeren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#controlepunt-de-applicatie-uitvoeren", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(Checkpoint, {}), "\n", _jsxs(_components.h2, { id: "verdere-lectuur", children: ["Verdere lectuur", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verdere-lectuur", 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: "Sign-in ervaring aanpassen" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "Connectoren configureren" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "Je API beveiligen" }) }), "\n"] }), "\n", _jsx(LogtoCloudButton, { children: "Probeer Logto Vandaag" })] }); } 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."); }