"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "ställa-in-express-med-session", "hProperties": { "id": "ställa-in-express-med-session" } }, "depth": 2, "value": "Ställa in express med session" }, { "data": { "id": "förbered-huvudfilen", "hProperties": { "id": "förbered-huvudfilen" } }, "depth": 3, "value": "Förbered huvudfilen" }, { "data": { "id": "skapa-en-logto-applikation", "hProperties": { "id": "skapa-en-logto-applikation" } }, "depth": 2, "value": "Skapa en Logto-applikation" }, { "data": { "id": "ställa-in-urier", "hProperties": { "id": "ställa-in-urier" } }, "depth": 3, "value": "Ställa in URI:er" }, { "data": { "id": "konfigurera-passportjs-med-applikationsinställningarna", "hProperties": { "id": "konfigurera-passportjs-med-applikationsinställningarna" } }, "depth": 2, "value": "Konfigurera Passport.js med applikationsinställningarna" }, { "data": { "id": "installera-beroenden", "hProperties": { "id": "installera-beroenden" } }, "depth": 3, "value": "Installera beroenden" }, { "data": { "id": "förbered-konfigurationsfil", "hProperties": { "id": "förbered-konfigurationsfil" } }, "depth": 3, "value": "Förbered konfigurationsfil" }, { "data": { "id": "initiera-passportjs-med-oidc-strategi", "hProperties": { "id": "initiera-passportjs-med-oidc-strategi" } }, "depth": 3, "value": "Initiera Passport.js med OIDC-strategi" }, { "data": { "id": "bygga-autentiseringsrutter", "hProperties": { "id": "bygga-autentiseringsrutter" } }, "depth": 2, "value": "Bygga autentiseringsrutter" }, { "data": { "id": "logga-in-sign-in", "hProperties": { "id": "logga-in-sign-in" } }, "depth": 3, "value": "Logga in: /sign-in" }, { "data": { "id": "hantera-inloggningscallback-callback", "hProperties": { "id": "hantera-inloggningscallback-callback" } }, "depth": 3, "value": "Hantera inloggningscallback: /callback" }, { "data": { "id": "logga-ut-sign-out", "hProperties": { "id": "logga-ut-sign-out" } }, "depth": 3, "value": "Logga ut: /sign-out" }, { "data": { "id": "hämta-autentiseringstillstånd-och-skydda-rutter", "hProperties": { "id": "hämta-autentiseringstillstånd-och-skydda-rutter" } }, "depth": 2, "value": "Hämta autentiseringstillstånd och skydda rutter" }, { "data": { "id": "slutsats", "hProperties": { "id": "slutsats" } }, "depth": 2, "value": "Slutsats" }]; const readingTime = { "minutes": 2, "words": 709, "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" }), " är en autentiserings-middleware för Node.js som kan smidigt införlivas i alla Express-baserade webbapplikationer. Den här omfattande guiden kommer att fokusera på att använda ", _jsx(_components.code, { children: "passport-openidconnect" }), "-plugin, vilket erbjuder ett enkelt men effektivt sätt att införliva Logto med Passport.js. Under den här handledningen kommer vi att använda Express.js för att bygga vår applikation. All kod vi kommer att diskutera finns tillgänglig i ett offentligt ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/passportjs-sample", children: "GitHub-repository" }), "."] }), "\n", _jsxs(_components.h2, { id: "ställa-in-express-med-session", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ställa-in-express-med-session", children: _jsx(_components.span, { children: "#" }) }), "Ställa in express med session"] }), "\n", _jsxs(_components.p, { children: ["Innan vi dyker in i integrationsprocessen behöver vi sätta upp det grundläggande projektet genom att installera ", _jsx(_components.a, { href: "https://expressjs.com/", children: "Express.js" }), " och dess sessions-middleware."] }), "\n", _jsxs(_components.p, { children: ["Anta att du har en TypeScript-projektmiljö förberedd (om inte, se ", _jsx(_components.a, { href: "https://www.typescriptlang.org/docs/", children: "officiell TypeScript-dokumentation" }), "), börja med att installera de nödvändiga paketen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i cookie-parser express-session\n" }) }), "\n", _jsxs(_components.h3, { id: "förbered-huvudfilen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#förbered-huvudfilen", children: _jsx(_components.span, { children: "#" }) }), "Förbered huvudfilen"] }), "\n", _jsxs(_components.p, { children: ["Skapa ", _jsx(_components.code, { children: "src/app.ts" }), " med följande kod:"] }), "\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('Sample app listening on http://localhost:3000');\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Det här skriptet initierar Express-appen och konfigurerar ", _jsx(_components.code, { children: "cookieParser" }), " och ", _jsx(_components.code, { children: "session" }), "-middleware för cookie-baserad sessionshantering, vilket är viktigt för att lagra autentiseringsresultat i Passport.js. Det använder sedan ", _jsx(_components.code, { children: "http" }), "-modulen för att starta tjänsten."] }), "\n", _jsxs(_components.h2, { id: "skapa-en-logto-applikation", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#skapa-en-logto-applikation", children: _jsx(_components.span, { children: "#" }) }), "Skapa en Logto-applikation"] }), "\n", _jsxs(_components.p, { children: ["För att fortsätta behövs en Logto-applikation. Skapa en genom att besöka ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), ", navigera till “Applikationer” och klicka på “Skapa applikation”. Välj “Express”, namnge din applikation och klicka på “Skapa applikation”."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_8641e7c1ab.webp", alt: "Skapa applikation" }) }), "\n", _jsx(_components.p, { children: "Efter att ha slutfört eller läst igenom skapelseguiden hittar du en detaljerad sida med konfigurationsinformation för nästa steg." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_detail_55d0c61075.webp", alt: "Applikationsdetalj" }) }), "\n", _jsxs(_components.h3, { id: "ställa-in-urier", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ställa-in-urier", children: _jsx(_components.span, { children: "#" }) }), "Ställa in URI:er"] }), "\n", _jsx(_components.p, { children: "På applikationsdetaljsidan, konfigurera två värden:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Omdirigerings-URI:er" }), ": Ställ in denna på ", _jsx(_components.code, { children: "http://localhost:3000/callback" }), " för att anpassa projektets callback-rutt."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Post Sign-out Redirect URI:er" }), ": Använd ", _jsx(_components.code, { children: "http://localhost:3000" }), " för enkelhet, vilket leder användare till startsidan efter utloggning."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Du kan ändra dessa värden senare." }), "\n", _jsxs(_components.h2, { id: "konfigurera-passportjs-med-applikationsinställningarna", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#konfigurera-passportjs-med-applikationsinställningarna", children: _jsx(_components.span, { children: "#" }) }), "Konfigurera Passport.js med applikationsinställningarna"] }), "\n", _jsxs(_components.h3, { id: "installera-beroenden", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#installera-beroenden", children: _jsx(_components.span, { children: "#" }) }), "Installera beroenden"] }), "\n", _jsxs(_components.p, { children: ["Installera ", _jsx(_components.code, { children: "passport" }), " och OIDC-strategiplugin, ", _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: "förbered-konfigurationsfil", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#förbered-konfigurationsfil", children: _jsx(_components.span, { children: "#" }) }), "Förbered konfigurationsfil"] }), "\n", _jsxs(_components.p, { children: ["Skapa ", _jsx(_components.code, { children: "app/config.ts" }), " för konfigurationshantering:"] }), "\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: "Ställ in miljövariablerna därefter:" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Miljövariabel" }), _jsx(_components.th, { children: "Beskrivning" }), _jsx(_components.th, { children: "Exempel" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "APP_ID" }) }), _jsx(_components.td, { children: "App-ID från 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-hemlighet från 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: "initiera-passportjs-med-oidc-strategi", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#initiera-passportjs-med-oidc-strategi", children: _jsx(_components.span, { children: "#" }) }), "Initiera Passport.js med OIDC-strategi"] }), "\n", _jsxs(_components.p, { children: ["Skapa ", _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: ["Denna kod initierar Passport med ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "OpenIDConnectStrategy" }) }), ". Serialize- och deserialize-metoderna är satta för demonstrationsändamål."] }), "\n", _jsx(_components.p, { children: "Se till att initiera och bifoga Passport-middleware i din applikation:" }), "\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: "bygga-autentiseringsrutter", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bygga-autentiseringsrutter", children: _jsx(_components.span, { children: "#" }) }), "Bygga autentiseringsrutter"] }), "\n", _jsx(_components.p, { children: "Vi kommer nu att skapa specifika rutter för autentiseringsprocesser:" }), "\n", _jsxs(_components.h3, { id: "logga-in-sign-in", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logga-in-sign-in", children: _jsx(_components.span, { children: "#" }) }), "Logga in: ", _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: "Denna rutt bygger och omdirigerar till en OIDC-autentiseringsrutt." }), "\n", _jsxs(_components.h3, { id: "hantera-inloggningscallback-callback", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#hantera-inloggningscallback-callback", children: _jsx(_components.span, { children: "#" }) }), "Hantera inloggningscallback: ", _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: "Detta hanterar OIDC-inloggningscallback, lagrar tokens och omdirigerar till startsidan." }), "\n", _jsxs(_components.h3, { id: "logga-ut-sign-out", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logga-ut-sign-out", children: _jsx(_components.span, { children: "#" }) }), "Logga ut: ", _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: "Detta omdirigerar till Logtos sessionsslut-URL och sedan tillbaka till startsidan." }), "\n", _jsxs(_components.h2, { id: "hämta-autentiseringstillstånd-och-skydda-rutter", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#hämta-autentiseringstillstånd-och-skydda-rutter", children: _jsx(_components.span, { children: "#" }) }), "Hämta autentiseringstillstånd och skydda rutter"] }), "\n", _jsx(_components.p, { children: "Utveckla startsidan med autentiseringstillstånd:" }), "\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 `

Hej Logto

Inloggad som ${JSON.stringify(\n user\n )}, Logga ut

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

Hej Logto

Logga in

`);\n }\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Här visas användarinformation med hjälp av ", _jsx(_components.code, { children: "JSON.stringify" }), ", och förekomsten av ", _jsx(_components.code, { children: "request.user" }), " används för att skydda rutter."] }), "\n", _jsxs(_components.h2, { id: "slutsats", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#slutsats", children: _jsx(_components.span, { children: "#" }) }), "Slutsats"] }), "\n", _jsx(_components.p, { children: "Grattis till att ha integrerat Passport.js med Logto. Hoppas den här guiden kan hjälpa dig att migrera från befintliga system till att använda Logto. För en förbättrad autentiseringsupplevelse, överväg att prova Logto Cloud idag. Lycka till med kodningen!" }), "\n", _jsx(LogtoCloudButton, { children: "Prova Logto idag" })] }); } 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."); }