Português (Portugal)
  • passportjs
  • oidc
  • express

Integração do Passport.js com Logto

Um guia prático e exemplo para integrar Passport.js com Logto.

Sijie
Sijie
Developer

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 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 repositório público do GitHub.

Configuração do express com sessão

Antes de mergulhar no processo de integração, precisamos de configurar o projeto básico instalando o Express.js e o seu middleware de sessão.

Assumindo que tens preparado um ambiente de projeto TypeScript (se não, consulta a documentação oficial do TypeScript), começa por instalar os pacotes necessários:

Preparar o ficheiro principal

Cria src/app.ts com o seguinte código:

Este script inicializa a aplicação Express e configura cookieParser e o middleware 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 http para lançar o serviço.

Criar uma aplicação Logto

Para prosseguir, é necessária uma aplicação Logto. Cria uma ao visitar a Logto Console, navega até “Applications” e clica em “Create application”. Seleciona “Express”, nomeia a tua aplicação e clica em “Create application”.

Criar aplicação

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.

Detalhe da aplicação

Definir URIs

Na página de detalhes da aplicação, configura dois valores:

  1. Redirect URIs: Define como http://localhost:3000/callback para alinhar com a rota de callback do projeto.
  2. Post Sign-out Redirect URIs: Usa http://localhost:3000 para simplicidade, direcionando utilizadores para a página inicial após o logout.

Podes alterar estes valores mais tarde.

Configurar Passport.js com as definições da aplicação

Instalar dependências

Instala passport e o plugin de estratégia OIDC, passport-openidconnect:

Preparar ficheiro de configuração

Cria app/config.ts para gestão de configurações:

Configura as variáveis de ambiente de acordo:

Variável de AmbienteDescriçãoExemplo
APP_IDID da App do Logto4ukboxxxxxxxxx
APP_SECRETSegredo da App do Logto5aqccxxxxxxx
ENDPOINTEndpoint do Logtohttps://g5xxx.logto.app/

Inicializar Passport.js com a estratégia OIDC

Cria src/passport.ts

Este código inicializa o Passport com a OpenIDConnectStrategy. Os métodos de serialização e desserialização são definidos para fins de demonstração.

Certifica-te de inicializar e anexar o middleware Passport na tua aplicação:

Construindo as rotas de autenticação

Vamos agora criar rotas específicas para os processos de autenticação:

Iniciar sessão: /sign-in

Esta rota constrói e redireciona para uma rota de autenticação OIDC.

Lidar com o callback de início de sessão: /callback

Este maneja o callback do início de sessão OIDC, armazena tokens e redireciona para a página inicial.

Terminar sessão: /sign-out

Este redireciona para o URL de término de sessão do Logto, depois de volta para a página inicial.

Obtendo estado de autenticação e protegendo rotas

Desenvolve a página inicial com estado de autenticação:

Aqui, a informação do utilizador é exibida usando JSON.stringify, e a existência de request.user é usada para proteger rotas.

Conclusão

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!