Solução de autenticação full-stack com Logto no Netlify: Protegendo aplicativos web e funções serverless
Mostra como proteger aplicativos web e funções serverless do Netlify com autenticação Logto, completo com exemplos de código-fonte e uma prévia de demonstração ao vivo.
YijunDeveloper
Pare de perder semanas com autenticação de usuários
Lance aplicativos seguros mais rapidamente com o Logto. Integre a autenticação de usuários em minutos e concentre-se no seu produto principal.
Netlify é uma plataforma poderosa para implantar e hospedar projetos web modernos, oferecendo integração perfeita com Git, builds automatizados e funções serverless para um fluxo de desenvolvimento rápido e escalável.
Neste guia abrangente, você aprenderá como:
Implementar autenticação em um aplicativo de página única (SPA) usando Logto no Netlify, demonstrado com um exemplo Vite + React
Proteger suas funções serverless do Netlify com autenticação Logto
Implantar um aplicativo pronto para produção usando nossa implementação de referência: example-vite-react-logto
Navegue até a página "Aplicações" no Console Logto
Crie uma nova aplicação
Selecione seu framework de frontend (React no nosso exemplo)
Nota: Você pode criar qualquer Aplicativo de Página Única (SPA) ou aplicativo nativo com base nas suas necessidades
Siga o guia de integração fornecido em:
O guia embutido do Console Logto, ou
O guia oficial de integração de autenticação React
Na página de detalhes da aplicação, anote:
Seu ID de Aplicação
O endpoint Logto (pode ser encontrado na seção "Endpoints & Credenciais", normalmente no formato https://<your-instance>.logto.app/)
Estas credenciais serão necessárias nas etapas subsequentes.
Observe que em nossa demonstração, usamos a rota /callback para lidar com o redirecionamento de Sign-in do Logto. Os URIs de redirecionamento no Logto precisam ser configurados como https://<your-site-name>.netlify.app/callback.
Depois que os usuários fizerem logout, voltamos para a página inicial, então configuramos os URIs de redirecionamento após o sign-out como https://<your-site-name>.netlify.app.
Em seguida, defina as informações do nosso Aplicativo Logto criado nas variáveis de ambiente do Netlify (Seu site -> configuração do site -> variáveis de ambiente):
Em seguida, usamos essas configurações no nosso projeto frontend:
Você pode ver o código integrado final aqui: example-vite-react-logto.
Note que quando implantamos no Netlify e fazemos login através do Logto, nosso URL não redireciona automaticamente para nossa página Callback. Isso ocorre porque o Netlify não suporta roteamento do lado do cliente para aplicativos de página única (SPA) por padrão.
Quando você visita caminhos como /callback, o Netlify tentará encontrar arquivos correspondentes no servidor em vez de encaminhar a solicitação para seu aplicativo React.
Nesse ponto, precisamos criar um arquivo _redirects no diretório público do projeto Netlify para informar ao Netlify para redirecionar todas as solicitações para o index.html:
Alternativamente, você pode criar um arquivo netlify.toml na raiz do seu projeto:
Agora nosso roteamento deve funcionar corretamente.
Funções Netlify fornecem uma maneira simples, mas poderosa, de criar APIs de backend. Com as Funções Netlify, podemos escrever lógica do lado do servidor sem nos preocupar com configuração e manutenção de servidor tradicionais.
Essas funções são controladas por versão, construídas e implantadas junto com seu site, tornando o processo de desenvolvimento e implantação contínuo entre frontend e backend.
Vamos começar a construir nossas APIs de backend usando Funções Netlify.
Primeiro, precisamos criar um diretório de funções dentro do diretório netlify do projeto, depois criar um arquivo hello.ts:
Quando visitamos https://<your-site-name>.netlify.app/.netlify/functions/hello, esta função será chamada e retornará "Olá, mundo!".
Se você achar que o caminho /.netlify/functions/hello parece um pouco estranho, você pode configurar um redirecionamento para invocar a função adicionando uma regra de redirecionamento no arquivo public/_redirects:
Dessa forma, quando visitamos https://<your-site-name>.netlify.app/api/hello, ele chamará nossa função e retornará "Olá, mundo!". Esta é, na verdade, a maneira comum de criar APIs usando funções Netlify.
E podemos acessar essa API no nosso projeto frontend utilizando fetch:
Agora que temos uma API de backend, precisamos garantir que apenas usuários autenticados possam acessá-la. Vamos proteger nossas funções Netlify usando o mecanismo de autenticação do Logto.
Para proteger nossos endpoints de API:
Crie um Recurso de API no Console Logto para representar nossa API de backend:
Vá para "Recursos de API" no Console Logto e crie uma nova API
Defina um nome e um identificador de API (por exemplo, https://api.backend.com)
Anote o identificador de API na página de detalhes do recurso de API, pois precisaremos dele mais tarde
Configure seu aplicativo para usar esse recurso de API adicionando o identificador às suas variáveis de ambiente do Netlify:
Atualize sua configuração Logto para incluir esse recurso de API:
Ao fazer solicitações para endpoints protegidos, seu frontend precisa incluir um token de acesso válido. Veja como solicitar e usá-lo:
Agora, vamos implementar a validação do token em nosso backend para garantir que apenas solicitações com tokens de acesso válidos sejam processadas.
Primeiro, precisamos instalar a dependência jose para nos ajudar a verificar o token JWT:
Então, podemos implementar a validação do token em nosso backend:
Agora, vamos atualizar nossa função Netlify para usar a função verifyLogtoToken:
É isso! Agora, nossa função Netlify está protegida pelo Logto e apenas solicitações com tokens de acesso válidos serão processadas.
Este guia demonstra como integrar a autenticação Logto em um aplicativo web implantado no Netlify.
Ao configurar aplicações e recursos de API do Logto, implementamos autenticação frontend e protegemos endpoints de funções Netlify.
Para controle de acesso mais granular, você pode aproveitar as capacidades de RBAC (Controle de Acesso Baseado em Papéis) do Logto, definindo papéis e permissões no Console Logto e validando papéis de usuários dentro das Funções Netlify.
