"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "configuração-do-express-com-sessão", "hProperties": { "id": "configuração-do-express-com-sessão" } }, "depth": 2, "value": "Configuração do express com sessão" }, { "data": { "id": "preparar-o-ficheiro-principal", "hProperties": { "id": "preparar-o-ficheiro-principal" } }, "depth": 3, "value": "Preparar o ficheiro principal" }, { "data": { "id": "criar-uma-aplicação-logto", "hProperties": { "id": "criar-uma-aplicação-logto" } }, "depth": 2, "value": "Criar uma aplicação Logto" }, { "data": { "id": "definir-uris", "hProperties": { "id": "definir-uris" } }, "depth": 3, "value": "Definir URIs" }, { "data": { "id": "configurar-passportjs-com-as-definições-da-aplicação", "hProperties": { "id": "configurar-passportjs-com-as-definições-da-aplicação" } }, "depth": 2, "value": "Configurar Passport.js com as definições da aplicação" }, { "data": { "id": "instalar-dependências", "hProperties": { "id": "instalar-dependências" } }, "depth": 3, "value": "Instalar dependências" }, { "data": { "id": "preparar-ficheiro-de-configuração", "hProperties": { "id": "preparar-ficheiro-de-configuração" } }, "depth": 3, "value": "Preparar ficheiro de configuração" }, { "data": { "id": "inicializar-passportjs-com-a-estratégia-oidc", "hProperties": { "id": "inicializar-passportjs-com-a-estratégia-oidc" } }, "depth": 3, "value": "Inicializar Passport.js com a estratégia OIDC" }, { "data": { "id": "construindo-as-rotas-de-autenticação", "hProperties": { "id": "construindo-as-rotas-de-autenticação" } }, "depth": 2, "value": "Construindo as rotas de autenticação" }, { "data": { "id": "iniciar-sessão-sign-in", "hProperties": { "id": "iniciar-sessão-sign-in" } }, "depth": 3, "value": "Iniciar sessão: /sign-in" }, { "data": { "id": "lidar-com-o-callback-de-início-de-sessão-callback", "hProperties": { "id": "lidar-com-o-callback-de-início-de-sessão-callback" } }, "depth": 3, "value": "Lidar com o callback de início de sessão: /callback" }, { "data": { "id": "terminar-sessão-sign-out", "hProperties": { "id": "terminar-sessão-sign-out" } }, "depth": 3, "value": "Terminar sessão: /sign-out" }, { "data": { "id": "obtendo-estado-de-autenticação-e-protegendo-rotas", "hProperties": { "id": "obtendo-estado-de-autenticação-e-protegendo-rotas" } }, "depth": 2, "value": "Obtendo estado de autenticação e protegendo rotas" }, { "data": { "id": "conclusão", "hProperties": { "id": "conclusão" } }, "depth": 2, "value": "Conclusão" }]; const readingTime = { "minutes": 3, "words": 793, "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" }), " é um middleware de autenticação para Node.js que pode ser introduzido de forma discreta em qualquer aplicação web baseada em Express. Este guia abrangente irá concentrar-se em utilizar o plugin ", _jsx(_components.code, { children: "passport-openidconnect" }), ", oferecendo uma forma simples mas eficaz de incorporar Logto com Passport.js. Ao longo deste tutorial, estaremos a usar Express.js para construir a nossa aplicação. Todo o código que iremos discutir está disponível num ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/passportjs-sample", children: "repositório público do GitHub" }), "."] }), "\n", _jsxs(_components.h2, { id: "configuração-do-express-com-sessão", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configuração-do-express-com-sessão", children: _jsx(_components.span, { children: "#" }) }), "Configuração do express com sessão"] }), "\n", _jsxs(_components.p, { children: ["Antes de mergulhar no processo de integração, precisamos de configurar o projeto básico instalando o ", _jsx(_components.a, { href: "https://expressjs.com/", children: "Express.js" }), " e o seu middleware de sessão."] }), "\n", _jsxs(_components.p, { children: ["Assumindo que tens preparado um ambiente de projeto TypeScript (se não, consulta a ", _jsx(_components.a, { href: "https://www.typescriptlang.org/docs/", children: "documentação oficial do TypeScript" }), "), começa por instalar os pacotes necessários:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i cookie-parser express-session\n" }) }), "\n", _jsxs(_components.h3, { id: "preparar-o-ficheiro-principal", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#preparar-o-ficheiro-principal", children: _jsx(_components.span, { children: "#" }) }), "Preparar o ficheiro principal"] }), "\n", _jsxs(_components.p, { children: ["Cria ", _jsx(_components.code, { children: "src/app.ts" }), " com o seguinte código:"] }), "\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('Aplicação exemplo a ouvir em http://localhost:3000');\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Este script inicializa a aplicação Express e configura ", _jsx(_components.code, { children: "cookieParser" }), " e o middleware ", _jsx(_components.code, { children: "session" }), " para gestão de sessões baseadas em cookies, crucial para armazenar resultados de autenticação no Passport.js. Depois utiliza o módulo ", _jsx(_components.code, { children: "http" }), " para lançar o serviço."] }), "\n", _jsxs(_components.h2, { id: "criar-uma-aplicação-logto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#criar-uma-aplicação-logto", children: _jsx(_components.span, { children: "#" }) }), "Criar uma aplicação Logto"] }), "\n", _jsxs(_components.p, { children: ["Para prosseguir, é necessária uma aplicação Logto. Cria uma ao visitar a ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), ", navega até “Applications” e clica em “Create application”. Seleciona “Express”, nomeia a tua aplicação e clica em “Create application”."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_8641e7c1ab.webp", alt: "Criar aplicação" }) }), "\n", _jsx(_components.p, { children: "Após completar ou terminar de ler o guia de criação, encontrarás uma página detalhada com informações de configuração para os próximos passos." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_detail_55d0c61075.webp", alt: "Detalhe da aplicação" }) }), "\n", _jsxs(_components.h3, { id: "definir-uris", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#definir-uris", children: _jsx(_components.span, { children: "#" }) }), "Definir URIs"] }), "\n", _jsx(_components.p, { children: "Na página de detalhes da aplicação, configura dois valores:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Redirect URIs" }), ": Define como ", _jsx(_components.code, { children: "http://localhost:3000/callback" }), " para alinhar com a rota de callback do projeto."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Post Sign-out Redirect URIs" }), ": Usa ", _jsx(_components.code, { children: "http://localhost:3000" }), " para simplicidade, direcionando utilizadores para a página inicial após o logout."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Podes alterar estes valores mais tarde." }), "\n", _jsxs(_components.h2, { id: "configurar-passportjs-com-as-definições-da-aplicação", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurar-passportjs-com-as-definições-da-aplicação", children: _jsx(_components.span, { children: "#" }) }), "Configurar Passport.js com as definições da aplicação"] }), "\n", _jsxs(_components.h3, { id: "instalar-dependências", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#instalar-dependências", children: _jsx(_components.span, { children: "#" }) }), "Instalar dependências"] }), "\n", _jsxs(_components.p, { children: ["Instala ", _jsx(_components.code, { children: "passport" }), " e o plugin de estratégia 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: "preparar-ficheiro-de-configuração", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#preparar-ficheiro-de-configuração", children: _jsx(_components.span, { children: "#" }) }), "Preparar ficheiro de configuração"] }), "\n", _jsxs(_components.p, { children: ["Cria ", _jsx(_components.code, { children: "app/config.ts" }), " para gestão de configurações:"] }), "\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 as variáveis de ambiente de acordo:" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Variável de Ambiente" }), _jsx(_components.th, { children: "Descrição" }), _jsx(_components.th, { children: "Exemplo" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "APP_ID" }) }), _jsx(_components.td, { children: "ID da App do 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: "Segredo da App do 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 do Logto" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "https://g5xxx.logto.app/" }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "inicializar-passportjs-com-a-estratégia-oidc", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inicializar-passportjs-com-a-estratégia-oidc", children: _jsx(_components.span, { children: "#" }) }), "Inicializar Passport.js com a estratégia OIDC"] }), "\n", _jsxs(_components.p, { children: ["Cria ", _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: ["Este código inicializa o Passport com a ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "OpenIDConnectStrategy" }) }), ". Os métodos de serialização e desserialização são definidos para fins de demonstração."] }), "\n", _jsx(_components.p, { children: "Certifica-te de inicializar e anexar o middleware Passport na tua aplicação:" }), "\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: "construindo-as-rotas-de-autenticação", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#construindo-as-rotas-de-autenticação", children: _jsx(_components.span, { children: "#" }) }), "Construindo as rotas de autenticação"] }), "\n", _jsx(_components.p, { children: "Vamos agora criar rotas específicas para os processos de autenticação:" }), "\n", _jsxs(_components.h3, { id: "iniciar-sessão-sign-in", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#iniciar-sessão-sign-in", children: _jsx(_components.span, { children: "#" }) }), "Iniciar sessão: ", _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: "Esta rota constrói e redireciona para uma rota de autenticação OIDC." }), "\n", _jsxs(_components.h3, { id: "lidar-com-o-callback-de-início-de-sessão-callback", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lidar-com-o-callback-de-início-de-sessão-callback", children: _jsx(_components.span, { children: "#" }) }), "Lidar com o callback de início de sessão: ", _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: "Este maneja o callback do início de sessão OIDC, armazena tokens e redireciona para a página inicial." }), "\n", _jsxs(_components.h3, { id: "terminar-sessão-sign-out", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#terminar-sessão-sign-out", children: _jsx(_components.span, { children: "#" }) }), "Terminar sessão: ", _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: "Este redireciona para o URL de término de sessão do Logto, depois de volta para a página inicial." }), "\n", _jsxs(_components.h2, { id: "obtendo-estado-de-autenticação-e-protegendo-rotas", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#obtendo-estado-de-autenticação-e-protegendo-rotas", children: _jsx(_components.span, { children: "#" }) }), "Obtendo estado de autenticação e protegendo rotas"] }), "\n", _jsx(_components.p, { children: "Desenvolve a página inicial com estado de autenticação:" }), "\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 `

Olá Logto

Sessão iniciada como ${JSON.stringify(\n user\n )}, Terminar Sessão

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

Olá Logto

Iniciar Sessão

`);\n }\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Aqui, a informação do utilizador é exibida usando ", _jsx(_components.code, { children: "JSON.stringify" }), ", e a existência de ", _jsx(_components.code, { children: "request.user" }), " é usada para proteger rotas."] }), "\n", _jsxs(_components.h2, { id: "conclusão", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusão", children: _jsx(_components.span, { children: "#" }) }), "Conclusão"] }), "\n", _jsx(_components.p, { children: "Parabéns por integrar o Passport.js com Logto. Espero que este guia te ajude a migrar de sistemas existentes para usar o Logto. Para uma experiência de autenticação melhorada, considera experimentar o Logto Cloud hoje. Bom código!" }), "\n", _jsx(LogtoCloudButton, { children: "Experimente o Logto hoje" })] }); } 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."); }