"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "configurando-express-com-sessão", "hProperties": { "id": "configurando-express-com-sessão" } }, "depth": 2, "value": "Configurando express com sessão" }, { "data": { "id": "prepare-o-arquivo-principal", "hProperties": { "id": "prepare-o-arquivo-principal" } }, "depth": 3, "value": "Prepare o arquivo principal" }, { "data": { "id": "criando-uma-aplicação-logto", "hProperties": { "id": "criando-uma-aplicação-logto" } }, "depth": 2, "value": "Criando uma aplicação Logto" }, { "data": { "id": "configurando-uris", "hProperties": { "id": "configurando-uris" } }, "depth": 3, "value": "Configurando URIs" }, { "data": { "id": "configurar-passportjs-com-as-configurações-da-aplicação", "hProperties": { "id": "configurar-passportjs-com-as-configurações-da-aplicação" } }, "depth": 2, "value": "Configurar Passport.js com as configurações da aplicação" }, { "data": { "id": "instale-dependências", "hProperties": { "id": "instale-dependências" } }, "depth": 3, "value": "Instale dependências" }, { "data": { "id": "prepare-o-arquivo-de-configuração", "hProperties": { "id": "prepare-o-arquivo-de-configuração" } }, "depth": 3, "value": "Prepare o arquivo de configuração" }, { "data": { "id": "inicialize-passportjs-com-a-estratégia-oidc", "hProperties": { "id": "inicialize-passportjs-com-a-estratégia-oidc" } }, "depth": 3, "value": "Inicialize Passport.js com a estratégia OIDC" }, { "data": { "id": "construindo-rotas-de-autenticação", "hProperties": { "id": "construindo-rotas-de-autenticação" } }, "depth": 2, "value": "Construindo rotas de autenticação" }, { "data": { "id": "entrar-sign-in", "hProperties": { "id": "entrar-sign-in" } }, "depth": 3, "value": "Entrar: /sign-in" }, { "data": { "id": "lidar-com-o-callback-de-entrada-callback", "hProperties": { "id": "lidar-com-o-callback-de-entrada-callback" } }, "depth": 3, "value": "Lidar com o callback de entrada: /callback" }, { "data": { "id": "sair-sign-out", "hProperties": { "id": "sair-sign-out" } }, "depth": 3, "value": "Sair: /sign-out" }, { "data": { "id": "obtendo-o-estado-de-autenticação-e-protegendo-rotas", "hProperties": { "id": "obtendo-o-estado-de-autenticação-e-protegendo-rotas" } }, "depth": 2, "value": "Obtendo o 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": 776, "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 integrado discretamente em qualquer aplicação web baseada em Express. Este guia abrangente se concentrará em utilizar o plugin ", _jsx(_components.code, { children: "passport-openidconnect" }), ", oferecendo uma maneira simples e eficaz de incorporar Logto com Passport.js. Ao longo deste tutorial, usaremos Express.js para construir nossa aplicação. Todo o código que discutiremos está disponível em um ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/passportjs-sample", children: "repositório público no GitHub" }), "."] }), "\n", _jsxs(_components.h2, { id: "configurando-express-com-sessão", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurando-express-com-sessão", children: _jsx(_components.span, { children: "#" }) }), "Configurando express com sessão"] }), "\n", _jsxs(_components.p, { children: ["Antes de mergulhar no processo de integração, precisamos configurar o projeto básico instalando ", _jsx(_components.a, { href: "https://expressjs.com/", children: "Express.js" }), " e seu middleware de sessão."] }), "\n", _jsxs(_components.p, { children: ["Assumindo que você tem um ambiente de projeto TypeScript preparado (se não, consulte a ", _jsx(_components.a, { href: "https://www.typescriptlang.org/docs/", children: "documentação oficial do TypeScript" }), "), comece instalando 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: "prepare-o-arquivo-principal", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#prepare-o-arquivo-principal", children: _jsx(_components.span, { children: "#" }) }), "Prepare o arquivo principal"] }), "\n", _jsxs(_components.p, { children: ["Crie ", _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 de exemplo ouvindo em http://localhost:3000');\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Este script inicializa o app Express e configura o middleware ", _jsx(_components.code, { children: "cookieParser" }), " e ", _jsx(_components.code, { children: "session" }), " para gerenciamento de sessões baseadas em cookies, crucial para armazenar resultados de autenticação no Passport.js. Ele então usa o módulo ", _jsx(_components.code, { children: "http" }), " para lançar o serviço."] }), "\n", _jsxs(_components.h2, { id: "criando-uma-aplicação-logto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#criando-uma-aplicação-logto", children: _jsx(_components.span, { children: "#" }) }), "Criando uma aplicação Logto"] }), "\n", _jsxs(_components.p, { children: ["Para prosseguir, é necessário um aplicativo Logto. Crie um visitando o ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Console Logto" }), ", navegando até “Aplicações” e clicando em “Criar aplicação”. Selecione “Express”, nomeie sua aplicação e clique em “Criar aplicação”."] }), "\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 concluir ou terminar de ler o guia de criação, você encontrará 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: "configurando-uris", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurando-uris", children: _jsx(_components.span, { children: "#" }) }), "Configurando URIs"] }), "\n", _jsx(_components.p, { children: "Na página de detalhes da aplicação, configure dois valores:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Redirect URIs" }), ": Defina como ", _jsx(_components.code, { children: "http://localhost:3000/callback" }), " para alinhar com a rota de retorno do projeto."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Post Sign-out Redirect URIs" }), ": Use ", _jsx(_components.code, { children: "http://localhost:3000" }), " por simplicidade, direcionando os usuários para a página inicial após o logout."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Você pode alterar esses valores mais tarde." }), "\n", _jsxs(_components.h2, { id: "configurar-passportjs-com-as-configurações-da-aplicação", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurar-passportjs-com-as-configurações-da-aplicação", children: _jsx(_components.span, { children: "#" }) }), "Configurar Passport.js com as configurações da aplicação"] }), "\n", _jsxs(_components.h3, { id: "instale-dependências", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#instale-dependências", children: _jsx(_components.span, { children: "#" }) }), "Instale dependências"] }), "\n", _jsxs(_components.p, { children: ["Instale ", _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: "prepare-o-arquivo-de-configuração", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#prepare-o-arquivo-de-configuração", children: _jsx(_components.span, { children: "#" }) }), "Prepare o arquivo de configuração"] }), "\n", _jsxs(_components.p, { children: ["Crie ", _jsx(_components.code, { children: "app/config.ts" }), " para gerenciamento de configuração:"] }), "\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: "Configure 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 do 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 do 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: "inicialize-passportjs-com-a-estratégia-oidc", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inicialize-passportjs-com-a-estratégia-oidc", children: _jsx(_components.span, { children: "#" }) }), "Inicialize Passport.js com a estratégia OIDC"] }), "\n", _jsxs(_components.p, { children: ["Crie ", _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 serialize e deserialize são configurados para fins de demonstração."] }), "\n", _jsx(_components.p, { children: "Certifique-se de inicializar e anexar o middleware Passport na sua 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-rotas-de-autenticação", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#construindo-rotas-de-autenticação", children: _jsx(_components.span, { children: "#" }) }), "Construindo rotas de autenticação"] }), "\n", _jsx(_components.p, { children: "Agora criaremos rotas específicas para processos de autenticação:" }), "\n", _jsxs(_components.h3, { id: "entrar-sign-in", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#entrar-sign-in", children: _jsx(_components.span, { children: "#" }) }), "Entrar: ", _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-entrada-callback", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lidar-com-o-callback-de-entrada-callback", children: _jsx(_components.span, { children: "#" }) }), "Lidar com o callback de entrada: ", _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: "Isso lida com o callback de entrada do OIDC, armazena tokens e redireciona para a página inicial." }), "\n", _jsxs(_components.h3, { id: "sair-sign-out", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sair-sign-out", children: _jsx(_components.span, { children: "#" }) }), "Sair: ", _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: "Isso redireciona para a URL de término de sessão do Logto, depois de volta para a página inicial." }), "\n", _jsxs(_components.h2, { id: "obtendo-o-estado-de-autenticação-e-protegendo-rotas", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#obtendo-o-estado-de-autenticação-e-protegendo-rotas", children: _jsx(_components.span, { children: "#" }) }), "Obtendo o estado de autenticação e protegendo rotas"] }), "\n", _jsx(_components.p, { children: "Desenvolva 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

Logado como ${JSON.stringify(\n user\n )}, Sair

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

Olá Logto

Entrar

`);\n }\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Aqui, as informações do usuário são exibidas 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 Passport.js com Logto. Esperamos que este guia o ajude a migrar de sistemas existentes para o uso do Logto. Para uma experiência de autenticação aprimorada, considere experimentar o Logto Cloud hoje. Feliz codificação!" }), "\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."); }