Solução de autenticação full-stack com Logto no Netlify: Protegendo aplicações web e funções serverless

Netlify é uma plataforma poderosa para implementar e hospedar projetos web modernos, oferecendo integração perfeita com Git, builds automáticos e funções serverless para um fluxo de desenvolvimento rápido e escalável.

Neste guia abrangente, vais aprender a:

• Implementar autenticação numa Aplicação de Página Única (SPA) utilizando Logto no Netlify, demonstrado com um exemplo de Vite + React
• Proteger as tuas funções serverless Netlify com autenticação Logto
• Implementar uma aplicação pronta para produção utilizando a nossa implementação de referência: example-vite-react-logto

Visualiza a pré-visualização da demonstração online.

Pré-requisitos#

Estas são as coisas que vais precisar de configurar antes de iniciar este tutorial:

• Uma conta Netlify
• Uma conta Logto Cloud ou uma instância Logto auto-hospedada

Criar uma app React com Vite#

Segue o guia de introdução do Vite para criar uma app React.

De acordo com o guia de criação, seleciona o stack tecnológico desejado. Neste artigo, vamos escolher React + TypeScript.

Depois, entra no diretório raiz do projeto, instala as dependências de acordo com o guia e executa a aplicação.

Implementar a aplicação usando o Netlify#

Segue os guias Começar com Netlify para implementar a tua aplicação.

Depois de teres implementado a tua aplicação, podes ver o site ao vivo em https://<nome-do-teu-site>.netlify.app.

Anota este URL pois vamos precisar mais tarde para configurar o Logto.

Integrar Logto na tua app#

Para começar com a autenticação Logto:

1. Navega para a página "Aplicações" no Console Logto
2. Cria uma nova aplicação
   • Seleciona o teu framework frontend (React no nosso exemplo)
   • Nota: Podes criar qualquer Aplicação de Página Única (SPA) ou app nativa conforme as tuas necessidades
3. Segue o guia de integração fornecido em:
   • O guia embutido do Console Logto, ou
   • O guia oficial de integração de autenticação React
4. Na página de detalhes da Aplicação, anota:
   • O teu ID de Aplicação
   • O endpoint Logto (pode ser encontrado na seção "Endpoints & Credenciais", tipicamente no formato https://<a-tua-instância>.logto.app/) Estas credenciais serão necessárias em passos subsequentes.

Nota que na nossa demonstração, usamos a rota /callback para lidar com o redirecionamento de Sign-in do Logto. Os URIs de Redirecionamento no Logto precisam estar configurados como https://<nome-do-teu-site>.netlify.app/callback. Após os utilizadores terminarem a sessão, retornamos à página inicial, então configuramos os URIs de Redirecionamento Pós logout para https://<nome-do-teu-site>.netlify.app.

Depois, configura a informação da nossa Aplicação Logto criada nas variáveis de Ambiente do Netlify (O teu website -> configuração do site -> variáveis de Ambiente):

Então usamos estas configurações no nosso projeto frontend:

Podes ver o código final integrado aqui: example-vite-react-logto.

Nota que quando implementamos para o Netlify e fazemos login através do Logto, o nosso URL não redireciona automaticamente para a nossa página de Callback. Isto acontece porque o Netlify não suporta o roteamento no lado do cliente para aplicações de página única (SPA) por padrão.

Quando visitas caminhos como /callback, o Netlify tentará encontrar ficheiros correspondentes no servidor em vez de encaminhar a solicitação para a tua aplicação React.

Neste ponto, precisamos criar um arquivo _redirects no diretório público do teu projeto Netlify para dizer ao Netlify para redirecionar todas as solicitações para o teu index.html:

Alternativamente, podes criar um arquivo netlify.toml na raiz do teu projeto:

Agora o nosso roteamento deve funcionar corretamente.

Criar APIs de backend com funções Netlify#

As Funções Netlify fornecem uma maneira simples, mas poderosa, de construir APIs de backend. Com as Funções Netlify, podemos escrever lógica no lado do servidor sem nos preocupar com a configuração e manutenção tradicional do servidor.

Essas funções são controladas por versão, construídas e implementadas juntamente com o teu website, tornando o processo de desenvolvimento e implementação contínuo entre frontend e backend.

Vamos começar a construir as nossas APIs de backend usando Funções Netlify.

Primeiro, precisamos criar um diretório de funções no diretório netlify do projeto, depois cria um arquivo hello.ts:

Quando visitarmos https://<nome-do-teu-site>.netlify.app/.netlify/functions/hello, esta função será chamada e retornará "Olá mundo!"".

Se achares que o caminho /.netlify/functions/hello parece um pouco estranho, podes configurar um redirecionamento para invocar a função adicionando uma regra de redirecionamento no arquivo public/_redirects:

Desta forma, quando visitarmos https://<nome-do-teu-site>.netlify.app/api/hello, ela chamará a nossa função e retornará "Olá mundo!". Este é na verdade o modo comum de construir APIs usando funções Netlify.

E podemos acessar esta API no nosso projeto frontend usando fetch:

Proteger as tuas funções Netlify com Logto#

Agora que temos uma API de backend, precisamos garantir que apenas utilizadores autenticados possam acessá-la. Vamos proteger as nossas funções Netlify usando o mecanismo de autenticação do Logto.

Para proteger os nossos endpoints de API:

1. Cria um Recurso API no Console Logto para representar a nossa API de backend:

• Vai para "Recursos API" no Console Logto e cria uma nova API
• Define um nome e um identificador API (por exemplo, https://api.backend.com)
• Anota o identificador API na página de detalhes do recurso API pois vamos precisar dele mais tarde

2. Configura a tua aplicação para usar este recurso API adicionando o identificador às tuas variáveis de ambiente do Netlify:

3. Atualiza a tua configuração Logto para incluir este recurso API:

4. Ao fazer solicitações para endpoints protegidos, o teu frontend precisa incluir um token de acesso válido. Aqui está como solicitar e usar:

Agora, vamos implementar a validação do token no nosso backend para garantir que apenas pedidos com tokens de acesso válidos sejam processados.

Primeiro, precisamos instalar a dependência jose para nos ajudar a verificar o token JWT:

Depois, podemos implementar a validação do token no nosso backend:

Agora, vamos atualizar a nossa função Netlify para usar a função verifyLogtoToken:

É isso! Agora, a nossa função Netlify está protegida pelo Logto e apenas requisições com tokens de acesso válidos serão processadas.

Testando a nossa demonstração#

Agora, implementa a tua aplicação no Netlify e testa! Podes referir-te à pré-visualização da demonstração online aqui.

1. Visita o site ao vivo em https://<nome-do-teu-site>.netlify.app
2. Clica no botão "Iniciar sessão" na barra de navegação
3. Inicia sessão com uma conta de utilizador Logto, e verás que estás com sessão iniciada.
4. Clica na aba "Recurso Protegido" na barra de navegação, e serás redirecionado para a página protegida.
5. Clica no botão "Ver Recurso Protegido", e verás os dados de resposta do endpoint api/hello.
6. Clica no botão "Terminar sessão" na barra de navegação, e serás redirecionado para a página inicial.

Conclusão#

Este guia demonstra como integrar a autenticação Logto numa aplicação web implementada no Netlify.

Ao configurar aplicações Logto e recursos API, implementamos a autenticação no frontend e protegemos os endpoints das Funções Netlify.

Para um controle de acesso mais granular, podes tirar partido das capacidades de RBAC (Controle de Acesso Baseado em Funções) do Logto, definindo funções e permissões no Console Logto e validando funções de utilizador dentro das Funções Netlify.