"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "세션이-포함된-express-설정하기", "hProperties": { "id": "세션이-포함된-express-설정하기" } }, "depth": 2, "value": "세션이 포함된 express 설정하기" }, { "data": { "id": "메인-파일-준비하기", "hProperties": { "id": "메인-파일-준비하기" } }, "depth": 3, "value": "메인 파일 준비하기" }, { "data": { "id": "logto-애플리케이션-생성하기", "hProperties": { "id": "logto-애플리케이션-생성하기" } }, "depth": 2, "value": "Logto 애플리케이션 생성하기" }, { "data": { "id": "uri-설정", "hProperties": { "id": "uri-설정" } }, "depth": 3, "value": "URI 설정" }, { "data": { "id": "애플리케이션-설정으로-passportjs-구성", "hProperties": { "id": "애플리케이션-설정으로-passportjs-구성" } }, "depth": 2, "value": "애플리케이션 설정으로 Passport.js 구성" }, { "data": { "id": "의존성-설치", "hProperties": { "id": "의존성-설치" } }, "depth": 3, "value": "의존성 설치" }, { "data": { "id": "구성-파일-준비하기", "hProperties": { "id": "구성-파일-준비하기" } }, "depth": 3, "value": "구성 파일 준비하기" }, { "data": { "id": "oidc-전략으로-passportjs-초기화", "hProperties": { "id": "oidc-전략으로-passportjs-초기화" } }, "depth": 3, "value": "OIDC 전략으로 Passport.js 초기화" }, { "data": { "id": "인증-경로-생성", "hProperties": { "id": "인증-경로-생성" } }, "depth": 2, "value": "인증 경로 생성" }, { "data": { "id": "로그인-sign-in", "hProperties": { "id": "로그인-sign-in" } }, "depth": 3, "value": "로그인: /sign-in" }, { "data": { "id": "로그인-콜백-처리-callback", "hProperties": { "id": "로그인-콜백-처리-callback" } }, "depth": 3, "value": "로그인 콜백 처리: /callback" }, { "data": { "id": "로그아웃-sign-out", "hProperties": { "id": "로그아웃-sign-out" } }, "depth": 3, "value": "로그아웃: /sign-out" }, { "data": { "id": "인증-상태-가져오기-및-경로-보호", "hProperties": { "id": "인증-상태-가져오기-및-경로-보호" } }, "depth": 2, "value": "인증 상태 가져오기 및 경로 보호" }, { "data": { "id": "결론", "hProperties": { "id": "결론" } }, "depth": 2, "value": "결론" }]; const readingTime = { "minutes": 1, "words": 389, "text": "less than a minute 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" }), " 는 Node.js 의 인증 미들웨어로, Express 기반의 웹 애플리케이션에 손쉽게 통합할 수 있습니다. 이 포괄적인 가이드는 ", _jsx(_components.code, { children: "passport-openidconnect" }), " 플러그인을 활용하여 Passport.js 에 Logto 를 통합하는 간단하면서도 효과적인 방법에 중점을 둡니다. 튜토리얼 전반에 걸쳐 Express.js 를 사용하여 애플리케이션을 구축할 것입니다. 논의할 모든 코드는 공개 ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/passportjs-sample", children: "GitHub 저장소" }), "에서 확인하실 수 있습니다."] }), "\n", _jsxs(_components.h2, { id: "세션이-포함된-express-설정하기", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#세션이-포함된-express-설정하기", children: _jsx(_components.span, { children: "#" }) }), "세션이 포함된 express 설정하기"] }), "\n", _jsxs(_components.p, { children: ["통합 과정에 들어가기 전에, ", _jsx(_components.a, { href: "https://expressjs.com/", children: "Express.js" }), " 및 그 세션 미들웨어를 설치하여 기본 프로젝트를 설정해야 합니다."] }), "\n", _jsxs(_components.p, { children: ["TypeScript 프로젝트 환경이 준비되었다고 가정하고 (만약 준비되지 않았다면 ", _jsx(_components.a, { href: "https://www.typescriptlang.org/docs/", children: "공식 TypeScript 문서" }), "를 참조하세요), 필요한 패키지를 설치하세요:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i cookie-parser express-session\n" }) }), "\n", _jsxs(_components.h3, { id: "메인-파일-준비하기", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#메인-파일-준비하기", children: _jsx(_components.span, { children: "#" }) }), "메인 파일 준비하기"] }), "\n", _jsxs(_components.p, { children: ["다음 코드를 사용하여 ", _jsx(_components.code, { children: "src/app.ts" }), "를 생성하세요:"] }), "\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('샘플 앱이 http://localhost:3000 에서 듣고 있습니다.');\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["이 스크립트는 Express 앱을 초기화하고 Passport.js 에서 인증 결과를 저장하는 데 중요한 쿠키 기반 세션 관리를 위해 ", _jsx(_components.code, { children: "cookieParser" }), " 및 ", _jsx(_components.code, { children: "session" }), " 미들웨어를 구성합니다. 그런 다음 ", _jsx(_components.code, { children: "http" }), " 모듈을 사용하여 서비스를 시작합니다."] }), "\n", _jsxs(_components.h2, { id: "logto-애플리케이션-생성하기", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-애플리케이션-생성하기", children: _jsx(_components.span, { children: "#" }) }), "Logto 애플리케이션 생성하기"] }), "\n", _jsxs(_components.p, { children: ["진행하기 위해서는 Logto 애플리케이션이 필요합니다. ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto 콘솔" }), "를 방문하여 ‘Applications’로 이동한 다음 “Create application”을 클릭하여 애플리케이션을 생성하세요. “Express”를 선택하고 애플리케이션 이름을 입력한 후 “Create application”을 클릭하세요."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_8641e7c1ab.webp", alt: "애플리케이션 생성" }) }), "\n", _jsx(_components.p, { children: "생성 가이드를 완료하거나 읽은 후에는 다음 단계에 대한 구성 정보가 포함된 세부 페이지를 찾을 수 있습니다." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_detail_55d0c61075.webp", alt: "애플리케이션 세부 정보" }) }), "\n", _jsxs(_components.h3, { id: "uri-설정", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#uri-설정", children: _jsx(_components.span, { children: "#" }) }), "URI 설정"] }), "\n", _jsx(_components.p, { children: "애플리케이션 세부정보 페이지에서 두 가지 값을 구성하세요:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "리다이렉트 URI" }), ": 프로젝트의 콜백 경로와 맞추기 위해 ", _jsx(_components.code, { children: "http://localhost:3000/callback" }), "으로 설정하세요."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "로그아웃 후 리다이렉트 URI" }), ": 간단하게, 사용자가 로그아웃 후 홈페이지로 리다이렉트되도록 ", _jsx(_components.code, { children: "http://localhost:3000" }), "을 사용하세요."] }), "\n"] }), "\n", _jsx(_components.p, { children: "이 값들은 나중에 변경할 수 있습니다." }), "\n", _jsxs(_components.h2, { id: "애플리케이션-설정으로-passportjs-구성", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#애플리케이션-설정으로-passportjs-구성", children: _jsx(_components.span, { children: "#" }) }), "애플리케이션 설정으로 Passport.js 구성"] }), "\n", _jsxs(_components.h3, { id: "의존성-설치", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#의존성-설치", children: _jsx(_components.span, { children: "#" }) }), "의존성 설치"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "passport" }), " 및 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: "구성-파일-준비하기", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#구성-파일-준비하기", children: _jsx(_components.span, { children: "#" }) }), "구성 파일 준비하기"] }), "\n", _jsxs(_components.p, { children: ["구성 관리를 위해 ", _jsx(_components.code, { children: "app/config.ts" }), "를 생성하세요:"] }), "\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: "환경 변수를 다음과 같이 설정하세요:" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "환경 변수" }), _jsx(_components.th, { children: "설명" }), _jsx(_components.th, { children: "예" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "APP_ID" }) }), _jsx(_components.td, { children: "Logto 에서의 App ID" }), _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: "Logto 에서의 App Secret" }), _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 엔드포인트" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "https://g5xxx.logto.app/" }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "oidc-전략으로-passportjs-초기화", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#oidc-전략으로-passportjs-초기화", children: _jsx(_components.span, { children: "#" }) }), "OIDC 전략으로 Passport.js 초기화"] }), "\n", _jsxs(_components.p, { children: [_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: ["이 코드는 **", _jsx(_components.code, { children: "OpenIDConnectStrategy" }), "**로 Passport 를 초기화합니다. 직렬화 및 역직렬화 메서드는 시연을 위해 설정되어 있습니다."] }), "\n", _jsx(_components.p, { children: "서버에서 Passport 미들웨어를 초기화하고 추가하는 것을 잊지 마세요:" }), "\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: "인증-경로-생성", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#인증-경로-생성", children: _jsx(_components.span, { children: "#" }) }), "인증 경로 생성"] }), "\n", _jsx(_components.p, { children: "이제 인증 프로세스를 위한 특정 경로를 생성합니다:" }), "\n", _jsxs(_components.h3, { id: "로그인-sign-in", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#로그인-sign-in", children: _jsx(_components.span, { children: "#" }) }), "로그인: ", _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: "이 경로는 OIDC 인증 경로를 구성 및 리다이렉트 합니다." }), "\n", _jsxs(_components.h3, { id: "로그인-콜백-처리-callback", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#로그인-콜백-처리-callback", children: _jsx(_components.span, { children: "#" }) }), "로그인 콜백 처리: ", _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: "이 경로는 OIDC 로그인 콜백을 처리하고, 토큰을 저장하고, 홈페이지로 리다이렉트합니다." }), "\n", _jsxs(_components.h3, { id: "로그아웃-sign-out", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#로그아웃-sign-out", children: _jsx(_components.span, { children: "#" }) }), "로그아웃: ", _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: "이 경로는 Logto 의 세션 종료 URL로 리다이렉트한 후 홈페이지로 돌아갑니다." }), "\n", _jsxs(_components.h2, { id: "인증-상태-가져오기-및-경로-보호", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#인증-상태-가져오기-및-경로-보호", children: _jsx(_components.span, { children: "#" }) }), "인증 상태 가져오기 및 경로 보호"] }), "\n", _jsx(_components.p, { children: "인증 상태가 포함된 홈페이지를 개발하세요:" }), "\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 `

Hello Logto

Signed in as ${JSON.stringify(\n user\n )}, Sign Out

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

Hello Logto

`);\n }\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["여기서는 ", _jsx(_components.code, { children: "JSON.stringify" }), "를 사용하여 사용자 정보를 표시하고, ", _jsx(_components.code, { children: "request.user" }), "의 존재를 통해 경로를 보호합니다."] }), "\n", _jsxs(_components.h2, { id: "결론", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#결론", children: _jsx(_components.span, { children: "#" }) }), "결론"] }), "\n", _jsx(_components.p, { children: "Logto 와 Passport.js 를 통합한 것을 축하합니다. 이 가이드가 기존 시스템에서 Logto 를 사용하는 것으로 마이그레이션 하는 데 도움이 되기를 바랍니다. 향상된 인증 경험을 위해 오늘 Logto Cloud 를 시도해 보는 것도 고려해 보세요. 행복한 코딩 되세요!" }), "\n", _jsx(LogtoCloudButton, { children: "오늘 Logto 를 시도해 보세요" })] }); } 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."); }