"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "configurare-express-con-sessione", "hProperties": { "id": "configurare-express-con-sessione" } }, "depth": 2, "value": "Configurare express con sessione" }, { "data": { "id": "preparare-il-file-principale", "hProperties": { "id": "preparare-il-file-principale" } }, "depth": 3, "value": "Preparare il file principale" }, { "data": { "id": "creare-unapplicazione-logto", "hProperties": { "id": "creare-unapplicazione-logto" } }, "depth": 2, "value": "Creare un'applicazione Logto" }, { "data": { "id": "configurazione-degli-uri", "hProperties": { "id": "configurazione-degli-uri" } }, "depth": 3, "value": "Configurazione degli URI" }, { "data": { "id": "configura-passportjs-con-le-impostazioni-dellapplicazione", "hProperties": { "id": "configura-passportjs-con-le-impostazioni-dellapplicazione" } }, "depth": 2, "value": "Configura Passport.js con le impostazioni dell'applicazione" }, { "data": { "id": "installare-le-dipendenze", "hProperties": { "id": "installare-le-dipendenze" } }, "depth": 3, "value": "Installare le dipendenze" }, { "data": { "id": "preparare-il-file-di-configurazione", "hProperties": { "id": "preparare-il-file-di-configurazione" } }, "depth": 3, "value": "Preparare il file di configurazione" }, { "data": { "id": "inizializzare-passportjs-con-la-strategia-oidc", "hProperties": { "id": "inizializzare-passportjs-con-la-strategia-oidc" } }, "depth": 3, "value": "Inizializzare Passport.js con la strategia OIDC" }, { "data": { "id": "creazione-delle-rotte-di-autenticazione", "hProperties": { "id": "creazione-delle-rotte-di-autenticazione" } }, "depth": 2, "value": "Creazione delle rotte di autenticazione" }, { "data": { "id": "accesso-sign-in", "hProperties": { "id": "accesso-sign-in" } }, "depth": 3, "value": "Accesso: /sign-in" }, { "data": { "id": "gestire-il-callback-di-accesso-callback", "hProperties": { "id": "gestire-il-callback-di-accesso-callback" } }, "depth": 3, "value": "Gestire il callback di accesso: /callback" }, { "data": { "id": "disconnessione-sign-out", "hProperties": { "id": "disconnessione-sign-out" } }, "depth": 3, "value": "Disconnessione: /sign-out" }, { "data": { "id": "recupero-dello-stato-di-autenticazione-e-protezione-delle-rotte", "hProperties": { "id": "recupero-dello-stato-di-autenticazione-e-protezione-delle-rotte" } }, "depth": 2, "value": "Recupero dello stato di autenticazione e protezione delle rotte" }, { "data": { "id": "conclusioni", "hProperties": { "id": "conclusioni" } }, "depth": 2, "value": "Conclusioni" }]; const readingTime = { "minutes": 3, "words": 780, "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" }), " è un middleware di autenticazione per Node.js che può essere inserito non invasivamente in qualsiasi applicazione web basata su Express. Questa guida completa si concentrerà sull'utilizzo del plugin ", _jsx(_components.code, { children: "passport-openidconnect" }), ", offrendo un modo semplice ma efficace per incorporare Logto con Passport.js. Durante questo tutorial, useremo Express.js per costruire la nostra applicazione. Tutto il codice di cui discuteremo è disponibile in un ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/passportjs-sample", children: "repository pubblico su GitHub" }), "."] }), "\n", _jsxs(_components.h2, { id: "configurare-express-con-sessione", children: ["Configurare express con sessione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurare-express-con-sessione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Prima di addentrarci nel processo di integrazione, dovremo impostare il progetto di base installando ", _jsx(_components.a, { href: "https://expressjs.com/", children: "Express.js" }), " e il suo middleware di sessione."] }), "\n", _jsxs(_components.p, { children: ["Assumendo che tu abbia un ambiente di progetto TypeScript preparato (se no, fai riferimento alla ", _jsx(_components.a, { href: "https://www.typescriptlang.org/docs/", children: "documentazione ufficiale di TypeScript" }), "), inizia installando i pacchetti necessari:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i cookie-parser express-session\n" }) }), "\n", _jsxs(_components.h3, { id: "preparare-il-file-principale", children: ["Preparare il file principale", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#preparare-il-file-principale", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Crea ", _jsx(_components.code, { children: "src/app.ts" }), " con il seguente codice:"] }), "\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('App di esempio in ascolto su http://localhost:3000');\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Questo script inizializza l'app Express e configura ", _jsx(_components.code, { children: "cookieParser" }), " e il middleware di ", _jsx(_components.code, { children: "session" }), " per la gestione delle sessioni basate su cookie, cruciale per memorizzare i risultati di autenticazione in Passport.js. Successivamente utilizza il modulo ", _jsx(_components.code, { children: "http" }), " per avviare il servizio."] }), "\n", _jsxs(_components.h2, { id: "creare-unapplicazione-logto", children: ["Creare un'applicazione Logto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#creare-unapplicazione-logto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Per procedere, è necessaria un'applicazione Logto. Creane una visitando la ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Console di Logto" }), ", navigando su “Applications”, e cliccando su “Create application”. Seleziona “Express”, dai un nome alla tua applicazione e clicca su “Create application”."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_8641e7c1ab.webp", alt: "Create application" }) }), "\n", _jsx(_components.p, { children: "Dopo aver completato o terminato la lettura della guida alla creazione, troverai una pagina dettagliata con le informazioni di configurazione per i passaggi successivi." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_detail_55d0c61075.webp", alt: "Application detail" }) }), "\n", _jsxs(_components.h3, { id: "configurazione-degli-uri", children: ["Configurazione degli URI", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurazione-degli-uri", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nella pagina dei dettagli dell'applicazione, configura due valori:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Redirect URIs" }), ": Imposta questo valore su ", _jsx(_components.code, { children: "http://localhost:3000/callback" }), " per allinearlo al percorso callback del progetto."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Post Sign-out Redirect URIs" }), ": Usa ", _jsx(_components.code, { children: "http://localhost:3000" }), " per semplicità, indirizzando gli utenti alla homepage dopo la disconnessione."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Puoi modificare questi valori successivamente." }), "\n", _jsxs(_components.h2, { id: "configura-passportjs-con-le-impostazioni-dellapplicazione", children: ["Configura Passport.js con le impostazioni dell'applicazione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configura-passportjs-con-le-impostazioni-dellapplicazione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "installare-le-dipendenze", children: ["Installare le dipendenze", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#installare-le-dipendenze", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Installa ", _jsx(_components.code, { children: "passport" }), " e il plugin della strategia OIDC, ", _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: "preparare-il-file-di-configurazione", children: ["Preparare il file di configurazione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#preparare-il-file-di-configurazione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Crea ", _jsx(_components.code, { children: "app/config.ts" }), " per la gestione della configurazione:"] }), "\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: "Configura le variabili di ambiente di conseguenza:" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Variabile di Ambiente" }), _jsx(_components.th, { children: "Descrizione" }), _jsx(_components.th, { children: "Esempio" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "APP_ID" }) }), _jsx(_components.td, { children: "App ID da 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 da 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: "Endpoint di Logto" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "https://g5xxx.logto.app/" }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "inizializzare-passportjs-con-la-strategia-oidc", children: ["Inizializzare Passport.js con la strategia OIDC", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inizializzare-passportjs-con-la-strategia-oidc", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Crea ", _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: ["Questo codice inizializza Passport con la ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "OpenIDConnectStrategy" }) }), ". I metodi di serializzazione e deserializzazione sono impostati a scopo dimostrativo."] }), "\n", _jsx(_components.p, { children: "Assicurati di inizializzare e collegare il middleware di Passport nella tua applicazione:" }), "\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: "creazione-delle-rotte-di-autenticazione", children: ["Creazione delle rotte di autenticazione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#creazione-delle-rotte-di-autenticazione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Ora creeremo rotte specifiche per i processi di autenticazione:" }), "\n", _jsxs(_components.h3, { id: "accesso-sign-in", children: ["Accesso: ", _jsx(_components.code, { children: "/sign-in" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#accesso-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: "Questa rotta costruisce e reindirizza a una rotta di autenticazione OIDC." }), "\n", _jsxs(_components.h3, { id: "gestire-il-callback-di-accesso-callback", children: ["Gestire il callback di accesso: ", _jsx(_components.code, { children: "/callback" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gestire-il-callback-di-accesso-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: "Questo gestisce il callback di accesso OIDC, memorizza i token e reindirizza alla homepage." }), "\n", _jsxs(_components.h3, { id: "disconnessione-sign-out", children: ["Disconnessione: ", _jsx(_components.code, { children: "/sign-out" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#disconnessione-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: "Questo reindirizza all'URL di fine sessione di Logto, quindi di nuovo alla homepage." }), "\n", _jsxs(_components.h2, { id: "recupero-dello-stato-di-autenticazione-e-protezione-delle-rotte", children: ["Recupero dello stato di autenticazione e protezione delle rotte", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#recupero-dello-stato-di-autenticazione-e-protezione-delle-rotte", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Sviluppa la homepage con lo stato di autenticazione:" }), "\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 `

Ciao Logto

Effettuato l'accesso come ${JSON.stringify(\n user\n )}, Disconnetti

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

Ciao Logto

Accedi

`);\n }\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Qui, le informazioni utente vengono visualizzate utilizzando ", _jsx(_components.code, { children: "JSON.stringify" }), ", e l'esistenza di ", _jsx(_components.code, { children: "request.user" }), " viene utilizzata per proteggere le rotte."] }), "\n", _jsxs(_components.h2, { id: "conclusioni", children: ["Conclusioni", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusioni", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Congratulazioni per aver integrato Passport.js con Logto. Speriamo che questa guida possa aiutarti a migrare dai sistemi esistenti a Logto. Per un'esperienza di autenticazione migliorata, considera di provare Logto Cloud oggi stesso. Buona programmazione!" }), "\n", _jsx(LogtoCloudButton, { children: "Prova Logto oggi" })] }); } 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."); }