Crie Autenticação Personalizada Usando Appsmith e APISIX
June 5, 2023
O fluxo de autenticação é uma parte fundamental das aplicações web. Ele garante a segurança e a privacidade dos dados do usuário enquanto eles estão usando seu aplicativo. Embora existam muitas soluções de autenticação prontas disponíveis, construir um sistema de autenticação usando uma plataforma de desenvolvimento de UI de baixo código e uma solução de gerenciamento de API permite que você crie aplicações web seguras com facilidade. Você pode criar uma aplicação sem precisar de conhecimento em tecnologias e ferramentas de frontend e backend. Você não precisa saber Python, Java, HTML, CSS ou outros frameworks JavaScript. Neste post, você aprenderá como construir um fluxo de login simples e personalizado e páginas na UI para proteger sua aplicação usando Appsmith, Apache APISIX e JWT.
Appsmith é uma poderosa plataforma de desenvolvimento de baixo código que permite aos usuários criar facilmente aplicações web e dashboards. Ele fornece uma interface visual e um conjunto abrangente de componentes pré-construídos, tornando-o acessível para desenvolvedores e não desenvolvedores.
Objetivos de aprendizagem
Você aprenderá o seguinte ao longo do artigo:
- Projetar um processo de autenticação em um ambiente de baixo código.
- Configurar a API de autenticação backend com APISIX.
- Criar páginas de UI usando widgets no Appsmith.
- Habilitar autenticação baseada em token.
Projetar a Arquitetura de Autenticação
Antes de mergulhar na implementação, é importante primeiro projetar a arquitetura do seu sistema de autenticação para sua aplicação. Considere os componentes-chave, como registro de usuário, login, senha, gerenciamento de sessão e autenticação baseada em token JWT. Defina o fluxo de informações entre o Appsmith e o APISIX, garantindo um fluxo de autenticação claro e eficiente.
Vamos construir um aplicativo móvel simples que tem 3 páginas: Registro, Login e Principal. As tarefas que faremos são divididas em duas partes. Na primeira parte, vamos configurar a API backend com o Apache APISIX API Gateway, que lidará com as solicitações de autenticação. Usamos endpoints existentes do API Gateway para alcançar os fluxos de registro de usuário, login e geração de token. Na segunda parte, usamos a interface de arrastar e soltar do Appsmith com componentes de UI prontos para construir as páginas de Registro, Login e Principal e, finalmente, conectamos elas à API para lidar com o envio de formulários. Vamos começar a construir esses componentes nas seções a seguir.
Parte 1: Configurar a API de autenticação backend
Começamos configurando a API backend que lidará com as solicitações de autenticação do aplicativo móvel. O APISIX pode ser utilizado para impor autenticação e proteger os endpoints da API. O APISIX permite validar as credenciais do usuário, emitir tokens de autenticação e controlar o acesso às suas APIs. Ao integrar o APISIX ao seu sistema de autenticação móvel, você pode adicionar uma camada adicional de segurança e garantir que apenas usuários autenticados possam acessar seus recursos protegidos.
Pré-requisitos
- Docker é usado para instalar o etcd e o APISIX em contêineres.
- curl é usado para enviar solicitações à API Admin do APISIX. Você também pode usar ferramentas como Postman para interagir com a API.
Passo 1: Instalar o Apache APISIX
O APISIX pode ser facilmente instalado e iniciado com o seguinte script de início rápido:
curl -sL https://run.api7.ai/apisix/quickstart | sh
Passo 2: Configurar o serviço backend (upstream)
Em seguida, configuramos nosso serviço backend. Para fins de demonstração, pode ser qualquer serviço de API que sirva nossa lógica backend. Você pode substituí-lo pelo seu serviço também. Eu uso um servidor público mock http://httpbin.org/ que gera respostas aleatórias. Para simplificar, teremos um único endpoint que retorna o endereço IP público da nossa máquina neste endpoint http://httpbin.org/ip.
Para rotear solicitações para o serviço backend da API mock, você precisará configurá-lo adicionando um servidor upstream no Apache APISIX via a API Admin.
curl http://127.0.0.1:9180/apisix/admin/upstreams/1 -X PUT -d '
{
"name":"Mock API upstream",
"desc":"Registrar Mock API como o upstream",
"nodes":{
"httpbin.org:80":1
}
}'
Passo 3: Criar uma nova configuração de plugin
Este passo envolve configurar um plugin (usando o objeto Plugin Config) para uma rota que criaremos no próximo passo. Assim, o APISIX habilita o plugin JWT para proteger nossos endpoints. Cada vez que solicitamos o endpoint, ele verifica as credenciais JWT no cabeçalho da solicitação.
curl http://127.0.0.1:9180/apisix/admin/plugin_configs/1 -X PUT -d '
{
"plugins":{
"jwt-auth": {}
}
}'
Passo 4: Criar uma Rota para a API backend
Criamos um novo objeto Route no APISIX que intercepta todas as solicitações GET para o URI /ip e usa as configurações de upstream e plugin existentes para habilitar o mecanismo de roteamento e as políticas de autenticação. Ele verifica o plugin JWT no cabeçalho e, se ele existir e for válido, encaminha a solicitação para nosso servidor mock. Caso contrário, retorna um erro de não autorizado imediatamente e a solicitação não chegará ao serviço real.
curl -i http://127.0.0.1:9180/apisix/admin/routes/1 -X PUT -d '
{
"name":"Rota do servidor Mock API",
"desc":"Criar uma nova rota no APISIX para o endpoint do servidor mock",
"methods":[
"GET"
],
"uri":"/ip",
"upstream_id":"1",
"plugin_config_id":1
}'
Passo 5: Criar uma Rota para assinar o token JWT
Implementamos a autenticação baseada em token para nossa API. O APISIX também pode atuar como um provedor de identidade para gerar e validar tokens. Para fazer isso, você precisa configurar uma Rota para um novo endpoint de API que assina o token usando o plugin public-api:
curl http://127.0.0.1:9180/apisix/admin/routes/login -X PUT -d '
{
"uri": "/login",
"plugins": {
"public-api": {
"uri": "/apisix/plugin/jwt/sign"
}
}
}'
Ao executar o comando curl acima, registramos uma nova rota chamada login com o caminho URI /login que assina um novo token sempre que um usuário existente tentar fazer login na página de Login do aplicativo móvel usando seus e-mails.
Parte 2: Criar Formulários de Registro e Login no Appsmith
Usando a interface de baixo código do Appsmith, podemos criar formulários de registro e login de usuários. O Appsmith fornece uma ampla gama de widgets pré-construídos que podem ser facilmente personalizados. Projete os formulários com campos de entrada para nome de usuário, senha e qualquer informação adicional que você precise no painel.
Antes de começar
Vou pular a parte da instalação do Appsmith na sua máquina. Você pode aprender como instalar o Appsmith usando Docker no site do Appsmith. Certifique-se de que você instalou o Appsmith e pode acessá-lo em http://localhost. Quando você implanta e executa o Appsmith, um aplicativo intitulado Meu primeiro aplicativo é adicionado por padrão. Você pode usar este aplicativo para construir seu primeiro app.
Passo 1: Criar uma página de Registro
No nosso caso, um novo usuário primeiro se registra em um aplicativo móvel na página de Registro. Comece criando uma nova página chamada PáginaDeRegistro em seu aplicativo. Adicione widgets de entrada para e-mail (nomeado EntradaDeEmail), nome de usuário (nomeado EntradaDeNomeDeUsuario) e senha (EntradaDeSenha). Além disso, adicione os widgets de Botão Registrar (nomeado BotãoDeRegistro) e Login (nomeado BotãoDeLogin) ao quadro de desenho. O resultado final ficará assim:
Quando um usuário pressiona o botão Registrar com os detalhes de entrada fornecidos, você precisará de uma consulta para lidar com a comunicação com o endpoint da API Admin do APISIX para registrar um novo consumidor de API no API Gateway. Crie uma consulta de API (nomeada API_Admin_Adicionar_Consumidor_API) com o endpoint de consumidores do APISIX /apisix/admin/consumers. Coloque o texto dos widgets de entrada no corpo da sua consulta. Acessar os widgets de entrada deve parecer algo assim:
Observe que usamos o endereço de
host.docker.internalem vez de localhost porque o APISIX está sendo executado dentro de seu próprio contêiner em uma rede docker diferente do Appsmith.
Após a consulta ser enviada ao APISIX, ele registra o novo consumidor, e o objeto do consumidor usará o plugin jwt-auth com chave e segredo. Você pode testar se o consumidor foi registrado no sistema com sucesso, mas buscando o consumidor especificado pelo nome de usuário appsmithuser. Execute este comando curl:
curl http://127.0.0.1:9180/apisix/admin/consumers/appsmithuser
Enquanto os usuários existentes podem ir diretamente para a página de Login. Veja na próxima seção.
Passo 2: Criar uma página de Login
De volta à tela do aplicativo, adicione uma nova página chamada PáginaDeLogin e configure o Formulário de Login com widgets de Entrada (para inserir o e-mail do usuário) e Botão (para login).
Em seguida, crie uma consulta de API (nomeada api_de_login) para o caminho URI da rota de login do APISIX /login e defina o parâmetro key como {{EntradaDeEmail.text}}. Se você testar a consulta e pressionar o botão de execução, em uma resposta bem-sucedida, nosso endpoint de API Gateway de autenticação deve retornar um token de acesso válido. No exemplo abaixo, a chave jwt é um token que indica que o usuário foi autenticado no lado do APISIX.
Para executar a consulta api_de_login via o botão Login, você precisa definir a propriedade onClick da consulta.
Também é possível armazenar o token JWT no armazenamento do Appsmith e, em seguida, levar o usuário para a PáginaPrincipal. Para fazer isso, insira o código abaixo na ação api_de_login da PáginaDeLogin na propriedade onClick:
{{api_de_login.run(() => {
const jwt = api_de_login?.data;
if (jwt) {
storeValue('jwt', jwt);
navigateTo('PáginaPrincipal', {});
} else {
showAlert('Login falhou!', 'error');
}
})}}
Se o usuário falhar em autenticar com o APISIX, mostre uma mensagem de alerta como um retorno para informar ao usuário que houve um erro.
Passo 3: Criar uma Página Principal
Finalmente, agora é hora de configurar a PáginaPrincipal do aplicativo móvel para permitir o acesso a usuários logados e mostrar alguns dados. Você pode usar a mesma tela para construir sua UI a partir de widgets. Uma vez que o usuário fez login com sucesso, nossa lógica navega para a PáginaPrincipal, e no primeiro carregamento da página, ele faz uma chamada de API automaticamente para a rota http://127.0.0.1:9080/ip no APISIX usando a consulta que você adicionou (nomeada api_de_dados_da_pagina_principal) e recupera o endereço IP do servidor upstream (que criamos na Parte 1 e no passo 2).
Você pode notar no cabeçalho Authorization o valor {{appsmith.store.jwt}} o valor jwt que salvamos no armazenamento do Appsmith no passo anterior, que é usado para provar para sua aplicação que o usuário é reconhecido. Se o valor jwt não existir no armazenamento do Appsmith, mostramos um erro de não autorizado para o usuário.
No meu caso, adicionei dois widgets de Texto à PáginaPrincipal e defini o valor do campo de texto do segundo como {{api_de_dados_da_pagina_principal.data}} que é simplesmente a saída de dados da chamada api_de_dados_da_pagina_principal. Veja o resultado.
Próximos passos
Você também pode adicionar uma Página de Não Autorizado para redirecionar usuários não autorizados para essa página, mostrar o erro e sugerir que eles façam login ou se registrem para criar uma nova conta. Forneça aos seus usuários a capacidade de fazer logout do seu aplicativo com um widget de botão quando eles terminarem, o que pode ajudar a aumentar a segurança dos seus dados.
Conclusão
Seguindo os passos acima, criamos o sistema de autenticação personalizado usando Appsmith e APISIX. O Appsmith é adequado para uma ampla gama de casos de uso, desde a construção de ferramentas internas e painéis de administração até a prototipagem e o desenvolvimento de aplicativos completos. Com o APISIX, você não só pode impor a autenticação para seus usuários, mas também introduzir medidas de segurança adicionais, como limitação de taxa, bloqueio de IP e restrição de consumidor para manter a segurança da nossa solução de autenticação personalizada.