"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "konfiguracja-express-z-sesją", "hProperties": { "id": "konfiguracja-express-z-sesją" } }, "depth": 2, "value": "Konfiguracja express z sesją" }, { "data": { "id": "przygotuj-plik-główny", "hProperties": { "id": "przygotuj-plik-główny" } }, "depth": 3, "value": "Przygotuj plik główny" }, { "data": { "id": "tworzenie-aplikacji-logto", "hProperties": { "id": "tworzenie-aplikacji-logto" } }, "depth": 2, "value": "Tworzenie aplikacji Logto" }, { "data": { "id": "ustawienia-uri", "hProperties": { "id": "ustawienia-uri" } }, "depth": 3, "value": "Ustawienia URI" }, { "data": { "id": "konfiguracja-passportjs-z-ustawieniami-aplikacji", "hProperties": { "id": "konfiguracja-passportjs-z-ustawieniami-aplikacji" } }, "depth": 2, "value": "Konfiguracja Passport.js z ustawieniami aplikacji" }, { "data": { "id": "instalacja-zależności", "hProperties": { "id": "instalacja-zależności" } }, "depth": 3, "value": "Instalacja zależności" }, { "data": { "id": "przygotuj-plik-konfiguracyjny", "hProperties": { "id": "przygotuj-plik-konfiguracyjny" } }, "depth": 3, "value": "Przygotuj plik konfiguracyjny" }, { "data": { "id": "inicjalizacja-passportjs-ze-strategią-oidc", "hProperties": { "id": "inicjalizacja-passportjs-ze-strategią-oidc" } }, "depth": 3, "value": "Inicjalizacja Passport.js ze strategią OIDC" }, { "data": { "id": "tworzenie-tras-uwierzytelniania", "hProperties": { "id": "tworzenie-tras-uwierzytelniania" } }, "depth": 2, "value": "Tworzenie tras uwierzytelniania" }, { "data": { "id": "logowanie-sign-in", "hProperties": { "id": "logowanie-sign-in" } }, "depth": 3, "value": "Logowanie: /sign-in" }, { "data": { "id": "obsługa-callbacku-logowania-callback", "hProperties": { "id": "obsługa-callbacku-logowania-callback" } }, "depth": 3, "value": "Obsługa callbacku logowania: /callback" }, { "data": { "id": "wylogowanie-sign-out", "hProperties": { "id": "wylogowanie-sign-out" } }, "depth": 3, "value": "Wylogowanie: /sign-out" }, { "data": { "id": "pobieranie-stanu-uwierzytelniania-i-ochrona-tras", "hProperties": { "id": "pobieranie-stanu-uwierzytelniania-i-ochrona-tras" } }, "depth": 2, "value": "Pobieranie stanu uwierzytelniania i ochrona tras" }, { "data": { "id": "podsumowanie", "hProperties": { "id": "podsumowanie" } }, "depth": 2, "value": "Podsumowanie" }]; const readingTime = { "minutes": 2, "words": 704, "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" }), " to middleware uwierzytelniające dla Node.js, które można bezproblemowo dodać do każdej aplikacji internetowej opartej na Express. Ten obszerny przewodnik skupi się na wykorzystaniu wtyczki ", _jsx(_components.code, { children: "passport-openidconnect" }), ", oferując prosty, ale skuteczny sposób na włączenie Logto do Passport.js. W trakcie tego poradnika będziemy korzystać z Express.js do budowania naszej aplikacji. Cały kod, o którym będziemy rozmawiać, jest dostępny w publicznym ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/passportjs-sample", children: "repozytorium GitHub" }), "."] }), "\n", _jsxs(_components.h2, { id: "konfiguracja-express-z-sesją", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#konfiguracja-express-z-sesją", children: _jsx(_components.span, { children: "#" }) }), "Konfiguracja express z sesją"] }), "\n", _jsxs(_components.p, { children: ["Zanim zagłębimy się w proces integracji, będziemy musieli przygotować podstawowy projekt z zainstalowaniem ", _jsx(_components.a, { href: "https://expressjs.com/", children: "Express.js" }), " i jego middleware sesji."] }), "\n", _jsxs(_components.p, { children: ["Zakładając, że masz przygotowane środowisko projektowe TypeScript (jeśli nie, zapoznaj się z ", _jsx(_components.a, { href: "https://www.typescriptlang.org/docs/", children: "oficjalną dokumentacją TypeScript" }), "), zacznij od zainstalowania niezbędnych pakietów:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i cookie-parser express-session\n" }) }), "\n", _jsxs(_components.h3, { id: "przygotuj-plik-główny", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#przygotuj-plik-główny", children: _jsx(_components.span, { children: "#" }) }), "Przygotuj plik główny"] }), "\n", _jsxs(_components.p, { children: ["Utwórz ", _jsx(_components.code, { children: "src/app.ts" }), " z następującym kodem:"] }), "\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('Przykładowa aplikacja słucha na http://localhost:3000');\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Ten skrypt inicjuje aplikację Express i konfiguruje middleware ", _jsx(_components.code, { children: "cookieParser" }), " oraz ", _jsx(_components.code, { children: "session" }), " do zarządzania sesją opartą na ciasteczkach, co jest kluczowe do przechowywania wyników uwierzytelniania w Passport.js. Następnie używa modułu ", _jsx(_components.code, { children: "http" }), " do uruchomienia usługi."] }), "\n", _jsxs(_components.h2, { id: "tworzenie-aplikacji-logto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tworzenie-aplikacji-logto", children: _jsx(_components.span, { children: "#" }) }), "Tworzenie aplikacji Logto"] }), "\n", _jsxs(_components.p, { children: ["Aby kontynuować, konieczna jest aplikacja Logto. Utwórz ją, odwiedzając ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), ", przechodząc do „Applications”, a następnie klikając „Create application”. Wybierz „Express”, nazwij swoją aplikację i kliknij „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: "Po zakończeniu lub zapoznaniu się z przewodnikiem tworzenia, znajdziesz szczegółową stronę z informacjami konfiguracyjnymi do następnych kroków." }), "\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: "ustawienia-uri", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ustawienia-uri", children: _jsx(_components.span, { children: "#" }) }), "Ustawienia URI"] }), "\n", _jsx(_components.p, { children: "Na stronie szczegółów aplikacji skonfiguruj dwie wartości:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Redirect URIs" }), ": Ustaw to na ", _jsx(_components.code, { children: "http://localhost:3000/callback" }), ", aby dostosować się do trasy zwrotnej projektu."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Post Sign-out Redirect URIs" }), ": Użyj ", _jsx(_components.code, { children: "http://localhost:3000" }), " dla uproszczenia, kierując użytkowników na stronę główną po wylogowaniu."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Możesz zmienić te wartości później." }), "\n", _jsxs(_components.h2, { id: "konfiguracja-passportjs-z-ustawieniami-aplikacji", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#konfiguracja-passportjs-z-ustawieniami-aplikacji", children: _jsx(_components.span, { children: "#" }) }), "Konfiguracja Passport.js z ustawieniami aplikacji"] }), "\n", _jsxs(_components.h3, { id: "instalacja-zależności", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#instalacja-zależności", children: _jsx(_components.span, { children: "#" }) }), "Instalacja zależności"] }), "\n", _jsxs(_components.p, { children: ["Zainstaluj ", _jsx(_components.code, { children: "passport" }), " i wtyczkę strategii 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: "przygotuj-plik-konfiguracyjny", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#przygotuj-plik-konfiguracyjny", children: _jsx(_components.span, { children: "#" }) }), "Przygotuj plik konfiguracyjny"] }), "\n", _jsxs(_components.p, { children: ["Utwórz ", _jsx(_components.code, { children: "app/config.ts" }), " do zarządzania konfiguracją:"] }), "\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: "Ustaw zmienne środowiskowe odpowiednio:" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Environment Variable" }), _jsx(_components.th, { children: "Opis" }), _jsx(_components.th, { children: "Przykład" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "APP_ID" }) }), _jsx(_components.td, { children: "ID aplikacji z 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: "Sekret aplikacji z 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: "Punkt końcowy Logto" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "https://g5xxx.logto.app/" }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "inicjalizacja-passportjs-ze-strategią-oidc", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inicjalizacja-passportjs-ze-strategią-oidc", children: _jsx(_components.span, { children: "#" }) }), "Inicjalizacja Passport.js ze strategią OIDC"] }), "\n", _jsxs(_components.p, { children: ["Utwórz ", _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: ["Ten kod inicjuje Passport przy użyciu ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "OpenIDConnectStrategy" }) }), ". Metody serializacji i deserializacji są ustawione do celów demonstracyjnych."] }), "\n", _jsx(_components.p, { children: "Upewnij się, że zainicjujesz i dołączysz middleware Passport w swojej aplikacji:" }), "\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: "tworzenie-tras-uwierzytelniania", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tworzenie-tras-uwierzytelniania", children: _jsx(_components.span, { children: "#" }) }), "Tworzenie tras uwierzytelniania"] }), "\n", _jsx(_components.p, { children: "Teraz utworzymy konkretne trasy do procesów uwierzytelniania:" }), "\n", _jsxs(_components.h3, { id: "logowanie-sign-in", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logowanie-sign-in", children: _jsx(_components.span, { children: "#" }) }), "Logowanie: ", _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: "Ta trasa buduje i przekierowuje do trasy uwierzytelniającej OIDC." }), "\n", _jsxs(_components.h3, { id: "obsługa-callbacku-logowania-callback", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#obsługa-callbacku-logowania-callback", children: _jsx(_components.span, { children: "#" }) }), "Obsługa callbacku logowania: ", _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: "Ta trasa obsługuje callback logowania OIDC, przechowuje tokeny i przekierowuje na stronę główną." }), "\n", _jsxs(_components.h3, { id: "wylogowanie-sign-out", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wylogowanie-sign-out", children: _jsx(_components.span, { children: "#" }) }), "Wylogowanie: ", _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: "Ta trasa przekierowuje do końcowej sesji Logto, a następnie z powrotem na stronę główną." }), "\n", _jsxs(_components.h2, { id: "pobieranie-stanu-uwierzytelniania-i-ochrona-tras", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#pobieranie-stanu-uwierzytelniania-i-ochrona-tras", children: _jsx(_components.span, { children: "#" }) }), "Pobieranie stanu uwierzytelniania i ochrona tras"] }), "\n", _jsx(_components.p, { children: "Rozwiń stronę główną z uwzględnieniem stanu uwierzytelniania:" }), "\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 `

Cześć Logto

Zalogowano jako ${JSON.stringify(\n user\n )}, Wyloguj się

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

Cześć Logto

Zaloguj się

`);\n }\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Tutaj, informacje o użytkowniku są wyświetlane za pomocą ", _jsx(_components.code, { children: "JSON.stringify" }), ", a istnienie ", _jsx(_components.code, { children: "request.user" }), " służy do ochrony tras."] }), "\n", _jsxs(_components.h2, { id: "podsumowanie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#podsumowanie", children: _jsx(_components.span, { children: "#" }) }), "Podsumowanie"] }), "\n", _jsx(_components.p, { children: "Gratulacje za zintegrowanie Passport.js z Logto. Mamy nadzieję, że ten przewodnik pomoże ci w migracji z istniejących systemów na korzystanie z Logto. Aby uzyskać lepsze doświadczenie uwierzytelniania, rozważ wypróbowanie Logto Cloud już dziś. Powodzenia w kodowaniu!" }), "\n", _jsx(LogtoCloudButton, { children: "Wypróbuj Logto dzisiaj" })] }); } 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."); }