"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "設置-express-與-session", "hProperties": { "id": "設置-express-與-session" } }, "depth": 2, "value": "設置 express 與 session" }, { "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": 3, "words": 974, "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" }), " 是一個用於 Node.js 的身份驗證中介軟件，可以無縫嵌入任何基於 Express 的網絡應用。這份全面指南將側重於使用 ", _jsx(_components.code, { children: "passport-openidconnect" }), " 插件，提供一個簡單而有效的方法來將 Logto 與 Passport.js 結合。在本教程中，我們會使用 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-與-session", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#設置-express-與-session", children: _jsx(_components.span, { children: "#" }) }), "設置 express 與 session"] }), "\n", _jsxs(_components.p, { children: ["在深入整合過程之前，我們需要在安裝 ", _jsx(_components.a, { href: "https://expressjs.com/", children: "Express.js" }), " 及其 session 中介軟件後設置基本項目。"] }), "\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('Sample app listening on http://localhost:3000');\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["這段腳本初始化了 Express 應用並配置 ", _jsx(_components.code, { children: "cookieParser" }), " 和 ", _jsx(_components.code, { children: "session" }), " 中介軟件以進行基於 Cookie 的會話管理，這對於在 Passport.js 中存儲身份驗證結果至關重要。接著使用 ", _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 控制台" }), "，導航至「應用程式」，然後點擊「創建應用程式」來創建一個。選擇「Express」，為你的應用命名，然後點擊「創建應用程式」。"] }), "\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: "完成或閱讀完創建指南後，你將找到一個詳情頁面，其中包含下一步的配置資訊。" }), "\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: "設置-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: "Redirect URIs" }), "：設置為 ", _jsx(_components.code, { children: "http://localhost:3000/callback" }), " 以配合項目的回調路由。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Post Sign-out Redirect URIs" }), "：為簡單起見，使用 ", _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: "Environment Variable" }), _jsx(_components.th, { children: "Description" }), _jsx(_components.th, { children: "Example" })] }) }), _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.strong, { children: _jsx(_components.code, { children: "OpenIDConnectStrategy" }) }), " 初始化 Passport。serialize 和 deserialize 方法設定用於演示目的。"] }), "\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: "恭喜你成功整合 Passport.js 與 Logto。希望這份指南可以幫助你從現有系統遷移到使用 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."); }