Solução de autenticação full-stack com Logto no Netlify: Protegendo aplicações web e funções serverless
Mostra como proteger aplicações web Netlify e funções serverless com autenticação Logto, completo com exemplos de código-fonte e uma pré-visualização de demonstração ao vivo.
YijunDeveloper
Pare de perder semanas com autenticação de utilizadores
Lance aplicações seguras mais rapidamente com o Logto. Integre a autenticação de utilizadores em minutos e concentre-se no seu produto principal.
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
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.
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:
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:
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
Configura a tua aplicação para usar este recurso API adicionando o identificador às tuas variáveis de ambiente do Netlify:
Atualiza a tua configuração Logto para incluir este recurso API:
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.
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.
