"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "express-mit-sitzung-einrichten", "hProperties": { "id": "express-mit-sitzung-einrichten" } }, "depth": 2, "value": "Express mit Sitzung einrichten" }, { "data": { "id": "hauptdatei-vorbereiten", "hProperties": { "id": "hauptdatei-vorbereiten" } }, "depth": 3, "value": "Hauptdatei vorbereiten" }, { "data": { "id": "erstellen-einer-logto-anwendung", "hProperties": { "id": "erstellen-einer-logto-anwendung" } }, "depth": 2, "value": "Erstellen einer Logto-Anwendung" }, { "data": { "id": "uris-einstellen", "hProperties": { "id": "uris-einstellen" } }, "depth": 3, "value": "URIs einstellen" }, { "data": { "id": "passportjs-mit-den-anwendungseinstellungen-konfigurieren", "hProperties": { "id": "passportjs-mit-den-anwendungseinstellungen-konfigurieren" } }, "depth": 2, "value": "Passport.js mit den Anwendungseinstellungen konfigurieren" }, { "data": { "id": "abhängigkeiten-installieren", "hProperties": { "id": "abhängigkeiten-installieren" } }, "depth": 3, "value": "Abhängigkeiten installieren" }, { "data": { "id": "konfigurationsdatei-vorbereiten", "hProperties": { "id": "konfigurationsdatei-vorbereiten" } }, "depth": 3, "value": "Konfigurationsdatei vorbereiten" }, { "data": { "id": "passportjs-mit-oidc-strategie-initialisieren", "hProperties": { "id": "passportjs-mit-oidc-strategie-initialisieren" } }, "depth": 3, "value": "Passport.js mit OIDC-Strategie initialisieren" }, { "data": { "id": "authentifizierungsrouten-erstellen", "hProperties": { "id": "authentifizierungsrouten-erstellen" } }, "depth": 2, "value": "Authentifizierungsrouten erstellen" }, { "data": { "id": "anmelden-sign-in", "hProperties": { "id": "anmelden-sign-in" } }, "depth": 3, "value": "Anmelden: /sign-in" }, { "data": { "id": "anmeldungsrückruf-behandeln-callback", "hProperties": { "id": "anmeldungsrückruf-behandeln-callback" } }, "depth": 3, "value": "Anmeldungsrückruf behandeln: /callback" }, { "data": { "id": "abmelden-sign-out", "hProperties": { "id": "abmelden-sign-out" } }, "depth": 3, "value": "Abmelden: /sign-out" }, { "data": { "id": "auth-status-abrufen-und-routen-schützen", "hProperties": { "id": "auth-status-abrufen-und-routen-schützen" } }, "depth": 2, "value": "Auth-Status abrufen und Routen schützen" }, { "data": { "id": "fazit", "hProperties": { "id": "fazit" } }, "depth": 2, "value": "Fazit" }]; const readingTime = { "minutes": 2, "words": 748, "text": "2 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" }), " ist eine Authentifizierungs-Middleware für Node.js, die sich unaufdringlich in jede Express-basierte Webanwendung einfügen lässt. Diese umfassende Anleitung konzentriert sich auf die Nutzung des ", _jsx(_components.code, { children: "passport-openidconnect" }), "-Plugins, das eine einfache, aber effektive Möglichkeit bietet, Logto mit Passport.js zu integrieren. In diesem Tutorial verwenden wir Express.js, um unsere Anwendung zu erstellen. Der gesamte Code, den wir besprechen werden, ist in einem öffentlichen ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/passportjs-sample", children: "GitHub-Repository" }), " verfügbar."] }), "\n", _jsxs(_components.h2, { id: "express-mit-sitzung-einrichten", children: ["Express mit Sitzung einrichten", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#express-mit-sitzung-einrichten", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Bevor wir in den Integrationsprozess einsteigen, müssen wir das grundlegende Projekt mit der Installation von ", _jsx(_components.a, { href: "https://expressjs.com/", children: "Express.js" }), " und seiner Sitzungs-Middleware einrichten."] }), "\n", _jsxs(_components.p, { children: ["Angenommen, Sie haben eine TypeScript-Projektumgebung vorbereitet (falls nicht, beziehen Sie sich auf die ", _jsx(_components.a, { href: "https://www.typescriptlang.org/docs/", children: "offizielle TypeScript-Dokumentation" }), "), beginnen Sie mit der Installation der notwendigen Pakete:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i cookie-parser express-session\n" }) }), "\n", _jsxs(_components.h3, { id: "hauptdatei-vorbereiten", children: ["Hauptdatei vorbereiten", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#hauptdatei-vorbereiten", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Erstellen Sie ", _jsx(_components.code, { children: "src/app.ts" }), " mit dem folgenden 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: 'zufälliges Geheimnis',\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('Beispiel-App hört auf http://localhost:3000');\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Dieses Skript initialisiert die Express-App und konfiguriert das ", _jsx(_components.code, { children: "cookieParser" }), "- und das ", _jsx(_components.code, { children: "session" }), "-Middleware für die Cookie-basierte Sitzungsverwaltung, die entscheidend ist, um Authentifizierungsergebnisse in Passport.js zu speichern. Es wird dann das ", _jsx(_components.code, { children: "http" }), "-Modul verwendet, um den Dienst zu starten."] }), "\n", _jsxs(_components.h2, { id: "erstellen-einer-logto-anwendung", children: ["Erstellen einer Logto-Anwendung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#erstellen-einer-logto-anwendung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Um fortzufahren, ist eine Logto-Anwendung erforderlich. Erstellen Sie eine, indem Sie die ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), " besuchen, zu „Applications“ navigieren und auf „Create application“ klicken. Wählen Sie „Express“, benennen Sie Ihre Anwendung und klicken Sie auf „Create application“."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_8641e7c1ab.webp", alt: "Anwendung erstellen" }) }), "\n", _jsx(_components.p, { children: "Nach Abschluss oder dem Lesen des Erstellungshandbuchs finden Sie eine detaillierte Seite mit Konfigurationsinformationen für die nächsten Schritte." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_detail_55d0c61075.webp", alt: "Anwendungsdetails" }) }), "\n", _jsxs(_components.h3, { id: "uris-einstellen", children: ["URIs einstellen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#uris-einstellen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Auf der Seite mit den Anwendungsdetails konfigurieren Sie zwei Werte:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Redirect URIs" }), ": Setzen Sie dies auf ", _jsx(_components.code, { children: "http://localhost:3000/callback" }), ", um es mit der Callback-Route des Projekts abzugleichen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Post Sign-out Redirect URIs" }), ": Verwenden Sie ", _jsx(_components.code, { children: "http://localhost:3000" }), " für Einfachheit, um Benutzer nach dem Abmelden zur Startseite zu leiten."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Sie können diese Werte später ändern." }), "\n", _jsxs(_components.h2, { id: "passportjs-mit-den-anwendungseinstellungen-konfigurieren", children: ["Passport.js mit den Anwendungseinstellungen konfigurieren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#passportjs-mit-den-anwendungseinstellungen-konfigurieren", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "abhängigkeiten-installieren", children: ["Abhängigkeiten installieren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#abhängigkeiten-installieren", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Installieren Sie ", _jsx(_components.code, { children: "passport" }), " und das OIDC-Strategie-Plugin, ", _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: "konfigurationsdatei-vorbereiten", children: ["Konfigurationsdatei vorbereiten", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#konfigurationsdatei-vorbereiten", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Erstellen Sie ", _jsx(_components.code, { children: "app/config.ts" }), " für das Konfigurationsmanagement:"] }), "\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: "Richten Sie die Umgebungsvariablen entsprechend ein:" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Umgebungsvariable" }), _jsx(_components.th, { children: "Beschreibung" }), _jsx(_components.th, { children: "Beispiel" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "APP_ID" }) }), _jsx(_components.td, { children: "App ID von 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 von 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: "passportjs-mit-oidc-strategie-initialisieren", children: ["Passport.js mit OIDC-Strategie initialisieren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#passportjs-mit-oidc-strategie-initialisieren", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Erstellen Sie ", _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: ["Dieser Code initialisiert Passport mit der ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "OpenIDConnectStrategy" }) }), ". Die Methoden serialize und deserialize sind zu Demonstrationszwecken gesetzt."] }), "\n", _jsx(_components.p, { children: "Stellen Sie sicher, dass Sie Passport-Middleware in Ihrer Anwendung initialisieren und anhängen:" }), "\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: 'zufälliges Geheimnis',\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: "authentifizierungsrouten-erstellen", children: ["Authentifizierungsrouten erstellen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#authentifizierungsrouten-erstellen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Wir werden jetzt spezifische Routen für Authentifizierungsprozesse erstellen:" }), "\n", _jsxs(_components.h3, { id: "anmelden-sign-in", children: ["Anmelden: ", _jsx(_components.code, { children: "/sign-in" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#anmelden-sign-in", children: _jsx(_components.span, { children: "#" }) })] }), "\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: "Diese Route erstellt und leitet zu einer OIDC-Auth-Route weiter." }), "\n", _jsxs(_components.h3, { id: "anmeldungsrückruf-behandeln-callback", children: ["Anmeldungsrückruf behandeln: ", _jsx(_components.code, { children: "/callback" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#anmeldungsrückruf-behandeln-callback", children: _jsx(_components.span, { children: "#" }) })] }), "\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: "Dies behandelt den OIDC-Anmeldungsrückruf, speichert Tokens und leitet auf die Startseite um." }), "\n", _jsxs(_components.h3, { id: "abmelden-sign-out", children: ["Abmelden: ", _jsx(_components.code, { children: "/sign-out" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#abmelden-sign-out", children: _jsx(_components.span, { children: "#" }) })] }), "\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: "Dies leitet zur Session-End-URL von Logto um und dann zurück zur Startseite." }), "\n", _jsxs(_components.h2, { id: "auth-status-abrufen-und-routen-schützen", children: ["Auth-Status abrufen und Routen schützen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#auth-status-abrufen-und-routen-schützen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Entwickeln Sie die Startseite mit Auth-Status:" }), "\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

Angemeldet als ${JSON.stringify(\n user\n )}, Abmelden

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

Hallo Logto

Anmelden

`);\n }\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Hier wird Benutzerinformation mit ", _jsx(_components.code, { children: "JSON.stringify" }), " angezeigt und das Vorhandensein von ", _jsx(_components.code, { children: "request.user" }), " wird verwendet, um Routen zu schützen."] }), "\n", _jsxs(_components.h2, { id: "fazit", children: ["Fazit", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fazit", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Herzlichen Glückwunsch zur Integration von Passport.js mit Logto. Hoffentlich hilft Ihnen diese Anleitung, von bestehenden Systemen zu Logto zu migrieren. Für ein verbessertes Authentifizierungserlebnis probieren Sie heute Logto Cloud aus. Viel Spaß beim Programmieren!" }), "\n", _jsx(LogtoCloudButton, { children: "Probieren Sie Logto heute aus" })] }); } 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."); }