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

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

Confira a prévia da demonstração online.

Pré-requisitos#

Estas são as coisas que você precisará configurar antes de iniciar este tutorial:

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

Criar um aplicativo React com Vite#

Siga o Guia de Introdução do Vite para criar um aplicativo React.

De acordo com o guia de criação, selecione sua pilha de tecnologia desejada. Neste artigo, escolheremos React + TypeScript.

Em seguida, entre no diretório raiz do projeto, instale as dependências de acordo com o guia e execute o aplicativo.

Implantar o aplicativo usando o Netlify#

Siga os guias Comece com o Netlify para implantar seu aplicativo.

Assim que tiver implantado seu aplicativo, você poderá ver o site ao vivo em https://<your-site-name>.netlify.app.

Faça uma anotação deste URL, pois precisaremos dele mais tarde para configurar o Logto.

Integrar Logto ao seu aplicativo#

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

1. Navegue até a página "Aplicações" no Console Logto
2. 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
3. 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
4. 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.

Criar APIs de backend com funções Netlify#

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:

Proteger suas funções Netlify com Logto#

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:

1. 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

2. Configure seu aplicativo para usar esse recurso de API adicionando o identificador às suas variáveis de ambiente do Netlify:

3. Atualize sua configuração Logto para incluir esse recurso de API:

4. 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.

Testando nossa demonstração#

Agora, implante seu aplicativo no Netlify e teste! Você pode consultar a prévia da demonstração online aqui.

1. Visite o site ao vivo em https://<your-site-name>.netlify.app
2. Clique no botão "Entrar" na barra de navegação
3. Faça login com uma conta de usuário do Logto, e você verá que está logado.
4. Clique na aba "Recurso Protegido" na barra de navegação, e você será redirecionado para a página protegida.
5. Clique no botão "Ver Recurso Protegido", e você verá os dados de resposta do endpoint api/hello.
6. Clique no botão "Sair" na barra de navegação, e você será redirecionado para a página inicial.

Conclusão#

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.