Como Construir um Aplicativo de Autenticação Full-Stack
August 24, 2023
A maioria das aplicações web precisa de um recurso de cadastro e login. Mas para iniciantes, isso pode ser desafiador. Até mesmo desenvolvedores experientes preferem usar serviços externos para lidar com a autenticação desde o início. Quando falamos sobre um fluxo de autenticação full-stack, significa configurar o login e o registro de usuários no frontend e também proteger a API do backend. Portanto, você precisa trabalhar em ambas as partes.
Este post vai guiá-lo na construção de um aplicativo de autenticação full-stack com Apache APISIX, Authgear e OpenID Connect (OIDC). Você pode encontrar o código-fonte do projeto no GitHub. Para um início rápido com o aplicativo, basta clonar o repositório e executar o exemplo de código, seguindo as etapas fornecidas no arquivo README.md.
Objetivo de aprendizagem
Este conteúdo tem como objetivo mostrar a todos como configurar a autenticação tanto no backend quanto no frontend. Além disso, ele foi projetado para ajudar tanto iniciantes quanto desenvolvedores experientes que desejam se tornar desenvolvedores full-stack.
O papel do APISIX, Authgear e OIDC na autenticação
Antes de mergulhar no guia, vamos apresentar brevemente as ferramentas que usaremos.
-
OIDC (OpenID Connect) é uma camada de identidade simples construída sobre o protocolo OAuth 2.0. Ele permite que aplicativos de terceiros verifiquem usuários e obtenham informações básicas de perfil de maneira padronizada.
-
APISIX se destaca como um dos gateways de API de código aberto mais populares. Ele foi projetado não apenas para o gerenciamento de APIs, mas também para garantir a segurança e proteção dessas APIs. Uma das características mais proeminentes em seu arsenal de segurança é o suporte para OIDC usando seu plugin.
-
Authgear é uma plataforma de identidade como serviço (IDaaS) altamente adaptável para aplicativos web e móveis. Seus usuários podem fazer login no seu aplicativo por meio de uma interface de usuário integrada (você não precisa construir uma interface para o fluxo de registro e login dos usuários), que oferece uma experiência de login segura e baseada em padrões, que você pode personalizar com sua própria marca e vários métodos de autenticação, como e-mail, logins sociais, autenticação sem senha, logins biométricos, senha de uso único (OTP) com SMS/WhatsApp e autenticação multifator (MFA). Ele usa OpenID Connect (OIDC) e OAuth 2.0 para identificar quem é um usuário e conceder autorização para recursos protegidos.
O fluxo de autenticação
Aqui está um diagrama arquitetônico de alto nível de como o processo de autenticação se parece:
As etapas mostradas no diagrama são explicadas em detalhes abaixo:
No diagrama acima, o Cliente é qualquer aplicação web, o Gateway de API é o APISIX, o Provedor de Identidade é o Authgear e o Upstream é uma API de backend.
- Um aplicativo web pode assumir várias formas, desde Aplicativos de Página Única (SPA) construídos com React, Vue ou Angular, até aplicativos web padrão criados usando frameworks como Express, NextJS e plataformas semelhantes. O aplicativo web é nosso aplicativo cliente com frontend que envia uma solicitação para um Provedor de Identidade (Authgear) com um ID do cliente e um segredo do cliente para coletar um token de acesso como JSON Web Tokens (JWT).
- Se as credenciais fornecidas estiverem corretas, o Authgear responde com um token JWT para o aplicativo web. Você pode criar quantos usuários quiser para o seu aplicativo no portal do Authgear e os usuários podem fazer login usando páginas de UI hospedadas pelo Authgear.
- Após obter o token JWT, o cliente envia uma solicitação para um Gateway de API (APISIX) com o token de acesso e as APIs de backend protegidas pelo gateway.
- Antes de processar a solicitação, o APISIX precisa garantir que o token fornecido seja válido, não tenha expirado e tenha os escopos corretos para os dados ou serviços solicitados. Se o APISIX não puder validar o token localmente, ele envia uma solicitação de introspecção do token para o servidor de autorização do Authgear. Essa solicitação é normalmente feita para o endpoint
introspectiondo servidor. - O Authgear recebe a solicitação de introspecção e a processa. O servidor verifica seus registros para determinar a validade do token, sua expiração e os escopos associados, e após determinar o estado do token, ele responde ao APISIX.
- Com base na resposta de introspecção do token do Authgear, o APISIX pode então tomar uma decisão informada. Se o token for válido, ele encaminha a solicitação para a API de backend, caso contrário, ele rejeita a solicitação do cliente com um código de status HTTP não autorizado.
- O APISIX envia a resposta da API de backend com os recursos solicitados.
Aplicativo de autenticação full-stack com APISIX, Authgear e OIDC.
Para o projeto de demonstração, usamos o Docker para instalar e executar 3 componentes (backend, Gateway de API e frontend) com um único comando. Empregamos ExpressJS para o aplicativo web frontend, hospedando nosso aplicativo de página única em localhost:3000. O Gateway APISIX pode ser acessado em localhost:9080, enquanto nossa API de backend (pode ser qualquer API que você construir usando Python, Java, NodeJS, etc.) está configurada em localhost:9081.
Pré-requisitos
Antes de começar, você precisará do seguinte:
- Uma conta gratuita do Authgear. Cadastre-se se ainda não tiver uma.
- Docker é usado para instalar todos os serviços.
Configurar o Authgear
Para usar os serviços do Authgear, você precisará configurar um aplicativo no Painel do Authgear e obter as informações do Cliente OIDC do Authgear. Essa configuração permite que os usuários no Authgear façam login no aplicativo web automaticamente após serem autenticados pelo Authgear.
Passo 1: Criar um aplicativo no Authgear
Para configurar o aplicativo, navegue até a Interface do Portal do Authgear e selecione Aplicativos na barra de navegação à esquerda. Use o seletor interativo para criar um novo Aplicativo Cliente OIDC do Authgear.
Passo 2: Copiar as credenciais do aplicativo
Cada aplicativo no Authgear recebe um ID DO CLIENTE e um SEGREDO DO CLIENTE alfanuméricos e únicos que o código do seu aplicativo usará para chamar as APIs do Authgear no aplicativo web. Registre o EMISSOR do Authgear gerado (por exemplo, https://example-auth.authgear-apps.com), o ID DO CLIENTE e o SEGREDO DO CLIENTE da saída. Você usará esses valores na próxima etapa para a configuração do aplicativo web.
Passo 3: Configurar o URI de Redirecionamento
Um URI de Redirecionamento Autorizado do seu aplicativo é a URL para a qual o Authgear redirecionará após o usuário ter sido autenticado, para que o middleware OpenID Connect complete o processo de autenticação. No nosso caso, será a página inicial do nosso frontend e será executada em http://localhost:3000.
Defina o seguinte http://localhost:3000 no campo URIs de Redirecionamento Autorizados. ****Se não for definido, os usuários não serão retornados ao seu aplicativo após o login.
Passo 4: Habilitar o Token de Acesso
Além disso, habilite a opção Emitir JWT como token de acesso na seção Token de Acesso da configuração do aplicativo:
Passo 5: Escolher um método de login
Após criar o aplicativo Authgear, você escolhe como os usuários precisam autenticar na página de login. Na aba Autenticação, navegue até Métodos de Login, você pode escolher um método de login entre várias opções, incluindo por e-mail, celular ou social, apenas usando um nome de usuário ou o método personalizado que você especificar. Para esta demonstração, escolhemos a abordagem E-mail+Sem Senha, onde nossos usuários são solicitados a registrar uma conta e fazer login usando seus e-mails. Eles receberão uma senha de uso único (OTP) em seus e-mails e verificarão o código para usar o aplicativo.
Configurar e executar o projeto de demonstração
Com o Authgear configurado com sucesso, agora podemos trazer o repositório do GitHub, configurar as variáveis de ambiente e executar os serviços:
Comece clonando o projeto na sua máquina local:
git clone https://github.com/Boburmirzo/apisix-authgear-oidc-full-stack-auth.git
Torne o diretório do projeto o seu diretório de trabalho atual:
cd apisix-authgear-oidc-full-stack-auth
No diretório raiz do seu projeto, onde está o arquivo yaml do Docker compose, crie um arquivo .env com as seguintes variáveis de ambiente:
CLIENT_ID={AUTHGEAR_APP_CLIENT_ID}
CLIENT_SECRET={AUTHGEAR_APP_CLIENT_SECRET}
ISSUER={AUTHGEAR_ISSUER}
REDIRECT_URI=http://localhost:3000
Substitua os valores entre colchetes pelos valores das configurações do seu aplicativo Authgear da seção Configurar o Authgear acima, como Emissor, ID do Cliente, Segredo do Cliente.
Após adicionar o arquivo de ambiente, execute o comando docker compose up a partir do diretório raiz.
Testar o fluxo de autenticação
Para a demonstração, usamos o Docker para instalar e executar 3 componentes (backend, Gateway de API e frontend) com um único comando. Empregamos o ExpressJS para o aplicativo web frontend, hospedando nosso aplicativo de página única em localhost:3000. O Gateway APISIX pode ser acessado em localhost:9080, enquanto nossa API de backend (pode ser qualquer API que você construir usando Python, Java, NodeJS, etc.) está configurada em localhost:9081.
Após se cadastrar usando seu e-mail, você receberá uma senha de uso único (OTP):
Depois de autenticado, você está autorizado a solicitar recursos da API e recebe uma resposta do serviço de backend:
O APISIX aplicou a autenticação OIDC com o Authgear e forneceu um fluxo de autenticação seguro e simplificado com configuração fácil.
Próximos passos
Essa combinação de ferramentas que usamos garantiu a segurança, permitindo que os desenvolvedores se concentrassem na lógica de negócios principal em vez das complexidades do processo de autenticação. A partir de agora, com o recurso de autenticação habilitado, você pode começar a construir sua interface para a página inicial, mostrar dados da API e desenvolver outras páginas.