"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "opzetten-van-express-met-sessie", "hProperties": { "id": "opzetten-van-express-met-sessie" } }, "depth": 2, "value": "Opzetten van express met sessie" }, { "data": { "id": "bereid-het-hoofdbestand-voor", "hProperties": { "id": "bereid-het-hoofdbestand-voor" } }, "depth": 3, "value": "Bereid het hoofdbestand voor" }, { "data": { "id": "een-logto-applicatie-maken", "hProperties": { "id": "een-logto-applicatie-maken" } }, "depth": 2, "value": "Een Logto-applicatie maken" }, { "data": { "id": "instellen-van-uris", "hProperties": { "id": "instellen-van-uris" } }, "depth": 3, "value": "Instellen van URI's" }, { "data": { "id": "configureer-passportjs-met-de-applicatie-instellingen", "hProperties": { "id": "configureer-passportjs-met-de-applicatie-instellingen" } }, "depth": 2, "value": "Configureer Passport.js met de applicatie-instellingen" }, { "data": { "id": "installeer-afhankelijkheden", "hProperties": { "id": "installeer-afhankelijkheden" } }, "depth": 3, "value": "Installeer afhankelijkheden" }, { "data": { "id": "bereid-het-configuratiebestand-voor", "hProperties": { "id": "bereid-het-configuratiebestand-voor" } }, "depth": 3, "value": "Bereid het configuratiebestand voor" }, { "data": { "id": "initialiseer-passportjs-met-oidc-strategie", "hProperties": { "id": "initialiseer-passportjs-met-oidc-strategie" } }, "depth": 3, "value": "Initialiseer Passport.js met OIDC-strategie" }, { "data": { "id": "opbouwen-van-authenticatieroutes", "hProperties": { "id": "opbouwen-van-authenticatieroutes" } }, "depth": 2, "value": "Opbouwen van authenticatieroutes" }, { "data": { "id": "inloggen-sign-in", "hProperties": { "id": "inloggen-sign-in" } }, "depth": 3, "value": "Inloggen: /sign-in" }, { "data": { "id": "afhandelcallback-bij-inloggen-callback", "hProperties": { "id": "afhandelcallback-bij-inloggen-callback" } }, "depth": 3, "value": "Afhandelcallback bij inloggen: /callback" }, { "data": { "id": "uitloggen-sign-out", "hProperties": { "id": "uitloggen-sign-out" } }, "depth": 3, "value": "Uitloggen: /sign-out" }, { "data": { "id": "ophalen-van-authenticatiestatus-en-beveiligen-van-routes", "hProperties": { "id": "ophalen-van-authenticatiestatus-en-beveiligen-van-routes" } }, "depth": 2, "value": "Ophalen van authenticatiestatus en beveiligen van routes" }, { "data": { "id": "conclusie", "hProperties": { "id": "conclusie" } }, "depth": 2, "value": "Conclusie" }]; const readingTime = { "minutes": 3, "words": 762, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://www.passportjs.org/", children: "Passport.js" }), " is een authenticatiemiddleware voor Node.js die onopvallend kan worden toegevoegd aan elke op Express gebaseerde webtoepassing. Deze uitgebreide gids zal zich richten op het gebruik van de ", _jsx(_components.code, { children: "passport-openidconnect" }), " plugin, die een eenvoudige maar effectieve manier biedt om Logto met Passport.js te integreren. Gedurende deze tutorial zullen we Express.js gebruiken om onze applicatie te bouwen. Alle code die we bespreken is beschikbaar in een openbaar ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/passportjs-sample", children: "GitHub repository" }), "."] }), "\n", _jsxs(_components.h2, { id: "opzetten-van-express-met-sessie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#opzetten-van-express-met-sessie", children: _jsx(_components.span, { children: "#" }) }), "Opzetten van express met sessie"] }), "\n", _jsxs(_components.p, { children: ["Voordat we in het integratieproces duiken, moeten we het basisproject opzetten door ", _jsx(_components.a, { href: "https://expressjs.com/", children: "Express.js" }), " en zijn sessie-middleware te installeren."] }), "\n", _jsxs(_components.p, { children: ["Aangenomen dat je een TypeScript-projectomgeving hebt voorbereid (zo niet, raadpleeg de ", _jsx(_components.a, { href: "https://www.typescriptlang.org/docs/", children: "officiële TypeScript-documentatie" }), "), begin dan met het installeren van de benodigde pakketten:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i cookie-parser express-session\n" }) }), "\n", _jsxs(_components.h3, { id: "bereid-het-hoofdbestand-voor", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bereid-het-hoofdbestand-voor", children: _jsx(_components.span, { children: "#" }) }), "Bereid het hoofdbestand voor"] }), "\n", _jsxs(_components.p, { children: ["Maak ", _jsx(_components.code, { children: "src/app.ts" }), " met de volgende code:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import http from 'node:http';\n\nimport cookieParser from 'cookie-parser';\nimport express from 'express';\nimport session from 'express-session';\n\nconst app = express();\napp.use(cookieParser());\napp.use(\n session({\n secret: 'randome secret',\n cookie: { maxAge: 14 * 24 * 60 * 60 * 1000 },\n resave: false,\n saveUninitialized: false,\n })\n);\n\nconst server = http.createServer(app);\nserver.listen(3000, () => {\n console.log('Voorbeeldapp luistert op http://localhost:3000');\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Dit script initialiseert de Express-app en configureert ", _jsx(_components.code, { children: "cookieParser" }), " en ", _jsx(_components.code, { children: "session" }), " middleware voor op cookies gebaseerde sessiebeheer, cruciaal voor het opslaan van authenticatieresultaten in Passport.js. Het gebruikt vervolgens de ", _jsx(_components.code, { children: "http" }), " module om de dienst te lanceren."] }), "\n", _jsxs(_components.h2, { id: "een-logto-applicatie-maken", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#een-logto-applicatie-maken", children: _jsx(_components.span, { children: "#" }) }), "Een Logto-applicatie maken"] }), "\n", _jsxs(_components.p, { children: ["Om verder te gaan, is een Logto-applicatie nodig. Maak er een door naar de ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), " te gaan, naar \"Toepassingen\" te navigeren en op \"Toepassing maken\" te klikken. Selecteer \"Express\", geef je applicatie een naam en klik op \"Toepassing maken\"."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_8641e7c1ab.webp", alt: "Applicatie maken" }) }), "\n", _jsx(_components.p, { children: "Na het voltooien of het lezen van de creatiegids, vind je een gedetailleerde pagina met configuratie-informatie voor de volgende stappen." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_detail_55d0c61075.webp", alt: "Applicatie-details" }) }), "\n", _jsxs(_components.h3, { id: "instellen-van-uris", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#instellen-van-uris", children: _jsx(_components.span, { children: "#" }) }), "Instellen van URI's"] }), "\n", _jsx(_components.p, { children: "Op de applicatiedetailpagina configureer je twee waarden:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Redirect URI's" }), ": Stel dit in op ", _jsx(_components.code, { children: "http://localhost:3000/callback" }), " om in lijn te zijn met de callback-route van het project."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Post Sign-out Redirect URI's" }), ": Gebruik ", _jsx(_components.code, { children: "http://localhost:3000" }), " voor eenvoud, zodat gebruikers na afmelden worden doorgestuurd naar de homepage."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Je kunt deze waarden later wijzigen." }), "\n", _jsxs(_components.h2, { id: "configureer-passportjs-met-de-applicatie-instellingen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configureer-passportjs-met-de-applicatie-instellingen", children: _jsx(_components.span, { children: "#" }) }), "Configureer Passport.js met de applicatie-instellingen"] }), "\n", _jsxs(_components.h3, { id: "installeer-afhankelijkheden", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#installeer-afhankelijkheden", children: _jsx(_components.span, { children: "#" }) }), "Installeer afhankelijkheden"] }), "\n", _jsxs(_components.p, { children: ["Installeer ", _jsx(_components.code, { children: "passport" }), " en de OIDC-strategieplugin, ", _jsx(_components.code, { children: "passport-openidconnect" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i passport passport-openidconnect\n" }) }), "\n", _jsxs(_components.h3, { id: "bereid-het-configuratiebestand-voor", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bereid-het-configuratiebestand-voor", children: _jsx(_components.span, { children: "#" }) }), "Bereid het configuratiebestand voor"] }), "\n", _jsxs(_components.p, { children: ["Maak ", _jsx(_components.code, { children: "app/config.ts" }), " voor configuratiebeheer:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const appId = process.env.APP_ID;\nconst appSecret = process.env.APP_SECRET;\nconst endpoint = process.env.ENDPOINT;\nconst cookieSecret = process.env.COOKIE_SECRET ?? 'keyboard cat';\n\nexport const config = {\n appId,\n appSecret,\n endpoint,\n cookieSecret,\n};\n" }) }), "\n", _jsx(_components.p, { children: "Stel de omgevingsvariabelen dienovereenkomstig in:" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Omgevingsvariabele" }), _jsx(_components.th, { children: "Beschrijving" }), _jsx(_components.th, { children: "Voorbeeld" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "APP_ID" }) }), _jsx(_components.td, { children: "App ID van Logto" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "4ukboxxxxxxxxx" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "APP_SECRET" }) }), _jsx(_components.td, { children: "App Secret van Logto" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "5aqccxxxxxxx" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "ENDPOINT" }) }), _jsx(_components.td, { children: "Logto Endpoint" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "https://g5xxx.logto.app/" }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "initialiseer-passportjs-met-oidc-strategie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#initialiseer-passportjs-met-oidc-strategie", children: _jsx(_components.span, { children: "#" }) }), "Initialiseer Passport.js met OIDC-strategie"] }), "\n", _jsxs(_components.p, { children: ["Maak ", _jsx(_components.code, { children: "src/passport.ts" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import passport from 'passport';\nimport OpenIDConnectStrategy, { type Profile, type VerifyCallback } from 'passport-openidconnect';\n\nimport { config } from './config.js';\n\nconst { appId, appSecret, endpoint } = config;\n\nexport default function initPassport() {\n passport.use(\n new OpenIDConnectStrategy(\n {\n issuer: `${endpoint}/oidc`,\n authorizationURL: `${endpoint}/oidc/auth`,\n tokenURL: `${endpoint}/oidc/token`,\n userInfoURL: `${endpoint}/oidc/me`,\n clientID: appId,\n clientSecret: appSecret,\n callbackURL: '/callback',\n scope: ['profile', 'offline_access'],\n },\n (issuer: string, profile: Profile, callback: VerifyCallback) => {\n callback(null, profile);\n }\n )\n );\n\n passport.serializeUser((user, callback) => {\n callback(null, user);\n });\n\n passport.deserializeUser(function (user, callback) {\n callback(null, user as Express.User);\n });\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Deze code initialiseert Passport met de ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "OpenIDConnectStrategy" }) }), ". De serialize- en deserialize-methoden zijn ingesteld voor demonstratiedoeleinden."] }), "\n", _jsx(_components.p, { children: "Zorg ervoor dat je Passport middleware initialiseert en bevestigt in je applicatie:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "...\ninitPassport();\n\nconst app = express();\napp.use(cookieParser());\napp.use(\n session({\n secret: 'randome secret',\n cookie: { maxAge: 14 * 24 * 60 * 60 * 1000 },\n resave: false,\n saveUninitialized: false,\n })\n);\napp.use(passport.authenticate('session'));\n...\n" }) }), "\n", _jsxs(_components.h2, { id: "opbouwen-van-authenticatieroutes", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#opbouwen-van-authenticatieroutes", children: _jsx(_components.span, { children: "#" }) }), "Opbouwen van authenticatieroutes"] }), "\n", _jsx(_components.p, { children: "We gaan nu specifieke routes maken voor authenticatieprocessen:" }), "\n", _jsxs(_components.h3, { id: "inloggen-sign-in", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inloggen-sign-in", children: _jsx(_components.span, { children: "#" }) }), "Inloggen: ", _jsx(_components.code, { children: "/sign-in" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "app.get('/sign-in', passport.authenticate('openidconnect'));\n" }) }), "\n", _jsx(_components.p, { children: "Deze route bouwt en leidt door naar een OIDC-authenticatieroute." }), "\n", _jsxs(_components.h3, { id: "afhandelcallback-bij-inloggen-callback", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#afhandelcallback-bij-inloggen-callback", children: _jsx(_components.span, { children: "#" }) }), "Afhandelcallback bij inloggen: ", _jsx(_components.code, { children: "/callback" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "app.get(\n '/callback',\n passport.authenticate('openidconnect', {\n successReturnToOrRedirect: '/',\n })\n);\n" }) }), "\n", _jsx(_components.p, { children: "Dit behandelt de OIDC-inlogcallback, slaat tokens op en leidt door naar de homepage." }), "\n", _jsxs(_components.h3, { id: "uitloggen-sign-out", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#uitloggen-sign-out", children: _jsx(_components.span, { children: "#" }) }), "Uitloggen: ", _jsx(_components.code, { children: "/sign-out" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "app.get('/sign-out', (request, response, next) => {\n request.logout((error) => {\n if (error) {\n next(error);\n return;\n }\n response.redirect(`${endpoint}/oidc/session/end?client_id=${appId}`);\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Dit leidt door naar Logto's sessie-eind-URL en vervolgens terug naar de homepage." }), "\n", _jsxs(_components.h2, { id: "ophalen-van-authenticatiestatus-en-beveiligen-van-routes", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ophalen-van-authenticatiestatus-en-beveiligen-van-routes", children: _jsx(_components.span, { children: "#" }) }), "Ophalen van authenticatiestatus en beveiligen van routes"] }), "\n", _jsx(_components.p, { children: "Ontwikkel de homepage met authenticatiestatus:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "app.get('/', (request: Request, response) => {\n const { user } = request;\n response.setHeader('content-type', 'text/html');\n\n if (user) {\n response.end(\n `

Hallo Logto

Ingelogd als ${JSON.stringify(\n user\n )}, Uitloggen

`\n );\n } else {\n response.end(`

Hallo Logto

Inloggen

`);\n }\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Hier wordt gebruikersinformatie weergegeven met behulp van ", _jsx(_components.code, { children: "JSON.stringify" }), ", en het bestaan van ", _jsx(_components.code, { children: "request.user" }), " wordt gebruikt om routes te beveiligen."] }), "\n", _jsxs(_components.h2, { id: "conclusie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusie", children: _jsx(_components.span, { children: "#" }) }), "Conclusie"] }), "\n", _jsx(_components.p, { children: "Gefeliciteerd met het integreren van Passport.js met Logto. Hopelijk kan deze gids je helpen bij het migreren van bestaande systemen naar het gebruik van Logto. Voor een verbeterde authenticatie-ervaring, overweeg vandaag nog Logto Cloud uit te proberen. Veel plezier met coderen!" }), "\n", _jsx(LogtoCloudButton, { children: "Probeer Logto vandaag nog" })] }); } 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."); }