"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "expressin-ja-istunnon-asennus", "hProperties": { "id": "expressin-ja-istunnon-asennus" } }, "depth": 2, "value": "Expressin ja istunnon asennus" }, { "data": { "id": "valmistele-pääasiallinen-tiedosto", "hProperties": { "id": "valmistele-pääasiallinen-tiedosto" } }, "depth": 3, "value": "Valmistele pääasiallinen tiedosto" }, { "data": { "id": "logto-sovelluksen-luominen", "hProperties": { "id": "logto-sovelluksen-luominen" } }, "depth": 2, "value": "Logto-sovelluksen luominen" }, { "data": { "id": "uriiden-asettaminen", "hProperties": { "id": "uriiden-asettaminen" } }, "depth": 3, "value": "URI:iden asettaminen" }, { "data": { "id": "passportjsn-konfigurointi-sovelluksen-asetusten-kanssa", "hProperties": { "id": "passportjsn-konfigurointi-sovelluksen-asetusten-kanssa" } }, "depth": 2, "value": "Passport.js:n konfigurointi sovelluksen asetusten kanssa" }, { "data": { "id": "asenna-riippuvuudet", "hProperties": { "id": "asenna-riippuvuudet" } }, "depth": 3, "value": "Asenna riippuvuudet" }, { "data": { "id": "valmistele-konfigurointitiedosto", "hProperties": { "id": "valmistele-konfigurointitiedosto" } }, "depth": 3, "value": "Valmistele konfigurointitiedosto" }, { "data": { "id": "passportjsn-alustaminen-oidc-strategialla", "hProperties": { "id": "passportjsn-alustaminen-oidc-strategialla" } }, "depth": 3, "value": "Passport.js:n alustaminen OIDC-strategialla" }, { "data": { "id": "autentikointireittien-rakentaminen", "hProperties": { "id": "autentikointireittien-rakentaminen" } }, "depth": 2, "value": "Autentikointireittien rakentaminen" }, { "data": { "id": "kirjaudu-sisään-sign-in", "hProperties": { "id": "kirjaudu-sisään-sign-in" } }, "depth": 3, "value": "Kirjaudu sisään: /sign-in" }, { "data": { "id": "käsittele-sisäänkirjautumisen-paluu-callback", "hProperties": { "id": "käsittele-sisäänkirjautumisen-paluu-callback" } }, "depth": 3, "value": "Käsittele sisäänkirjautumisen paluu: /callback" }, { "data": { "id": "kirjaudu-ulos-sign-out", "hProperties": { "id": "kirjaudu-ulos-sign-out" } }, "depth": 3, "value": "Kirjaudu ulos: /sign-out" }, { "data": { "id": "autentikointitilan-hakeminen-ja-reittien-suojaaminen", "hProperties": { "id": "autentikointitilan-hakeminen-ja-reittien-suojaaminen" } }, "depth": 2, "value": "Autentikointitilan hakeminen ja reittien suojaaminen" }, { "data": { "id": "yhteenveto", "hProperties": { "id": "yhteenveto" } }, "depth": 2, "value": "Yhteenveto" }]; const readingTime = { "minutes": 2, "words": 621, "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" }), " on autentikointivälimuisti Node.js:lle, joka voidaan huomaamattomasti lisätä mihin tahansa Express-pohjaiseen verkkosovellukseen. Tämä kattava opas keskittyy ", _jsx(_components.code, { children: "passport-openidconnect" }), " -liitännäisen hyödyntämiseen, tarjoten yksinkertaisen mutta tehokkaan tavan yhdistää Logto Passport.js:n kanssa. Tämän opetusohjelman läpi käytämme Express.js:tä rakentamaan sovellustamme. Kaikki koodi, jota keskustelemme, on saatavilla julkisessa ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/passportjs-sample", children: "GitHub-repositoriossa" }), "."] }), "\n", _jsxs(_components.h2, { id: "expressin-ja-istunnon-asennus", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#expressin-ja-istunnon-asennus", children: _jsx(_components.span, { children: "#" }) }), "Expressin ja istunnon asennus"] }), "\n", _jsxs(_components.p, { children: ["Ennen kuin sukellamme integraatioprosessiin, meidän on perustettava perusprojekti asentamalla ", _jsx(_components.a, { href: "https://expressjs.com/", children: "Express.js" }), " ja sen istuntovälimuisti."] }), "\n", _jsxs(_components.p, { children: ["Oletetaan, että sinulla on TypeScript-projektiympäristö valmiina (jos ei, katso ", _jsx(_components.a, { href: "https://www.typescriptlang.org/docs/", children: "virallinen TypeScript-dokumentaatio" }), "), aloita asentamalla tarvittavat paketit:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i cookie-parser express-session\n" }) }), "\n", _jsxs(_components.h3, { id: "valmistele-pääasiallinen-tiedosto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#valmistele-pääasiallinen-tiedosto", children: _jsx(_components.span, { children: "#" }) }), "Valmistele pääasiallinen tiedosto"] }), "\n", _jsxs(_components.p, { children: ["Luo ", _jsx(_components.code, { children: "src/app.ts" }), " seuraavalla koodilla:"] }), "\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('Esimerkkisovellus kuuntelee osoitteessa http://localhost:3000');\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Tämä skripti alustaa Express-sovelluksen ja määrittää ", _jsx(_components.code, { children: "cookieParser" }), "- ja ", _jsx(_components.code, { children: "session" }), "-välimuistit keksi-pohjaista istunnonhallintaa varten, mikä on olennaista autentikointitulosten tallentamiseen Passport.js:ssä. Se sitten käyttää ", _jsx(_components.code, { children: "http" }), "-moduulia palvelun käynnistämiseen."] }), "\n", _jsxs(_components.h2, { id: "logto-sovelluksen-luominen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-sovelluksen-luominen", children: _jsx(_components.span, { children: "#" }) }), "Logto-sovelluksen luominen"] }), "\n", _jsxs(_components.p, { children: ["Jatkaaksesi Logto-sovellus on tarpeen. Luo yksi vierailemalla ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), ", siirry kohtaan “Applications” ja klikkaa “Create application”. Valitse “Express”, nimeä sovelluksesi ja klikkaa “Create application”."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_8641e7c1ab.webp", alt: "Luo sovellus" }) }), "\n", _jsx(_components.p, { children: "Suoritettuasi tai luettuasi luomisohjeen loppuun, löydät yksityiskohtaisen sivun konfigurointitietoineen seuraaville vaiheille." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_detail_55d0c61075.webp", alt: "Sovelluksen yksityiskohdat" }) }), "\n", _jsxs(_components.h3, { id: "uriiden-asettaminen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#uriiden-asettaminen", children: _jsx(_components.span, { children: "#" }) }), "URI:iden asettaminen"] }), "\n", _jsx(_components.p, { children: "Sovelluksen yksityiskohtasivulla, määritä kaksi arvoa:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Uudelleenohjaus-URI:t" }), ": Aseta tämä arvoon ", _jsx(_components.code, { children: "http://localhost:3000/callback" }), " sovelluksen takaisinsoitto-reitin mukaisesti."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Kirjautumisen jälkeiset uudelleenohjaus-URI:t" }), ": Käytä ", _jsx(_components.code, { children: "http://localhost:3000" }), " yksinkertaisuuden vuoksi, ohjaamalla käyttäjät etusivulle kirjautumisen jälkeen."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Voit muuttaa näitä arvoja myöhemmin." }), "\n", _jsxs(_components.h2, { id: "passportjsn-konfigurointi-sovelluksen-asetusten-kanssa", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#passportjsn-konfigurointi-sovelluksen-asetusten-kanssa", children: _jsx(_components.span, { children: "#" }) }), "Passport.js:n konfigurointi sovelluksen asetusten kanssa"] }), "\n", _jsxs(_components.h3, { id: "asenna-riippuvuudet", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#asenna-riippuvuudet", children: _jsx(_components.span, { children: "#" }) }), "Asenna riippuvuudet"] }), "\n", _jsxs(_components.p, { children: ["Asenna ", _jsx(_components.code, { children: "passport" }), " ja OIDC-strategialiitännäinen, ", _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: "valmistele-konfigurointitiedosto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#valmistele-konfigurointitiedosto", children: _jsx(_components.span, { children: "#" }) }), "Valmistele konfigurointitiedosto"] }), "\n", _jsxs(_components.p, { children: ["Luo ", _jsx(_components.code, { children: "app/config.ts" }), " konfiguroinnin hallintaan:"] }), "\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: "Aseta ympäristömuuttujat vastaavasti:" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Ympäristömuuttuja" }), _jsx(_components.th, { children: "Kuvaus" }), _jsx(_components.th, { children: "Esimerkki" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "APP_ID" }) }), _jsx(_components.td, { children: "Sovelluksen ID Logtosta" }), _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: "Sovelluksen salaisuus Logtosta" }), _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-päätepiste" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "https://g5xxx.logto.app/" }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "passportjsn-alustaminen-oidc-strategialla", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#passportjsn-alustaminen-oidc-strategialla", children: _jsx(_components.span, { children: "#" }) }), "Passport.js:n alustaminen OIDC-strategialla"] }), "\n", _jsxs(_components.p, { children: ["Luo ", _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: ["Tämä koodi alustaa Passport ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "OpenIDConnectStrategy" }) }), " -strategialla. Sarjallista ja desarjallista menetelmiä on asetettu esimerkin vuoksi."] }), "\n", _jsx(_components.p, { children: "Varmista, että alustat ja liität Passport-välimuistin sovellukseesi:" }), "\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: "autentikointireittien-rakentaminen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#autentikointireittien-rakentaminen", children: _jsx(_components.span, { children: "#" }) }), "Autentikointireittien rakentaminen"] }), "\n", _jsx(_components.p, { children: "Luomme nyt tietyt reitit autentikointiprosesseille:" }), "\n", _jsxs(_components.h3, { id: "kirjaudu-sisään-sign-in", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kirjaudu-sisään-sign-in", children: _jsx(_components.span, { children: "#" }) }), "Kirjaudu sisään: ", _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: "Tämä reitti rakentaa ja ohjaa OIDC-auktorisointireitille." }), "\n", _jsxs(_components.h3, { id: "käsittele-sisäänkirjautumisen-paluu-callback", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#käsittele-sisäänkirjautumisen-paluu-callback", children: _jsx(_components.span, { children: "#" }) }), "Käsittele sisäänkirjautumisen paluu: ", _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: "Tämä käsittelee OIDC sisäänkirjautumispalautteen, tallentaa tunnukset ja ohjaa etusivulle." }), "\n", _jsxs(_components.h3, { id: "kirjaudu-ulos-sign-out", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kirjaudu-ulos-sign-out", children: _jsx(_components.span, { children: "#" }) }), "Kirjaudu ulos: ", _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: "Tämä uudelleenohjaa Logton istunnon päättämispolulle ja sitten takaisin etusivulle." }), "\n", _jsxs(_components.h2, { id: "autentikointitilan-hakeminen-ja-reittien-suojaaminen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#autentikointitilan-hakeminen-ja-reittien-suojaaminen", children: _jsx(_components.span, { children: "#" }) }), "Autentikointitilan hakeminen ja reittien suojaaminen"] }), "\n", _jsx(_components.p, { children: "Kehitetään etusivu autentikointitilalla:" }), "\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 `

Hei Logto

Kirjautuneena käyttäjänä ${JSON.stringify(\n user\n )}, Kirjaudu ulos

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

Hei Logto

Kirjaudu sisään

`);\n }\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Tässä käyttäjätietoja näytetään ", _jsx(_components.code, { children: "JSON.stringify" }), "-kutsulla, ja ", _jsx(_components.code, { children: "request.user" }), "-olemassaoloa käytetään reittien suojaamiseen."] }), "\n", _jsxs(_components.h2, { id: "yhteenveto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#yhteenveto", children: _jsx(_components.span, { children: "#" }) }), "Yhteenveto"] }), "\n", _jsx(_components.p, { children: "Onnittelut Passport.js:n ja Logto:n integroimisesta. Toivottavasti tämä opas voi auttaa siirtymään olemassa olevista järjestelmistä Logto:n käyttöön. Autentikointikokemuksen parantamiseksi harkitse Logto Cloudin kokeilemista tänään. Hyvää koodausta!" }), "\n", _jsx(LogtoCloudButton, { children: "Kokeile Logtoa tänään" })] }); } 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."); }