Crear autenticación personalizada usando Appsmith y APISIX
June 5, 2023
El flujo de autenticación es una parte fundamental de las aplicaciones web. Garantiza la seguridad y privacidad de los datos del usuario mientras utilizan tu aplicación. Aunque existen muchas soluciones de autenticación listas para usar, construir un sistema de autenticación utilizando una plataforma de desarrollo de UI de bajo código y una solución de gestión de API te permite crear aplicaciones web seguras con facilidad. Puedes crear una aplicación sin necesidad de tener conocimientos tanto de tecnologías y herramientas de frontend como de backend. No necesitas saber Python, Java, HTML, CSS u otros frameworks de JavaScript. En este post, aprenderás cómo construir un flujo de inicio de sesión personalizado y páginas en la interfaz de usuario para asegurar tu aplicación utilizando Appsmith, Apache APISIX, y JWT.
Appsmith es una potente plataforma de desarrollo de bajo código que permite a los usuarios crear fácilmente aplicaciones web y paneles de control. Proporciona una interfaz visual y un conjunto completo de componentes preconstruidos, lo que la hace accesible tanto para desarrolladores como para no desarrolladores.
Objetivos de aprendizaje
A lo largo del artículo aprenderás lo siguiente:
- Diseñar un proceso de autenticación en un entorno de bajo código.
- Configurar la API de autenticación en el backend con APISIX.
- Crear páginas de UI utilizando widgets en Appsmith.
- Habilitar la autenticación basada en tokens.
Diseñar la arquitectura de autenticación
Antes de sumergirnos en la implementación, es importante diseñar primero la arquitectura del sistema de autenticación para tu aplicación. Considera los componentes clave como el registro de usuarios, el inicio de sesión, la contraseña, la gestión de sesiones y la autenticación basada en tokens JWT. Define el flujo de información entre Appsmith y APISIX, asegurando un flujo de trabajo de autenticación claro y eficiente.
Vamos a construir una aplicación móvil simple que tiene 3 páginas: Registro, Inicio de sesión y Principal. Las tareas se dividen en dos partes. En la primera parte, configuraremos la API del backend con el API Gateway de Apache APISIX que manejará las solicitudes de autenticación. Utilizamos los endpoints existentes del API Gateway para lograr los flujos de registro de usuarios, inicio de sesión y generación de tokens. En la segunda parte, usamos la interfaz de arrastrar y soltar de Appsmith con componentes de UI listos para construir las páginas de Registro, Inicio de sesión y Principal y, finalmente, las conectamos a la API para manejar los envíos de formularios. Comencemos a construir estos componentes en las siguientes secciones.
Parte 1: Configurar la API de autenticación en el backend
Comenzamos configurando la API del backend que manejará las solicitudes de autenticación de la aplicación móvil. APISIX puede utilizarse para aplicar la autenticación y proteger los endpoints de la API. APISIX te permite validar las credenciales del usuario, emitir tokens de autenticación y controlar el acceso a tus APIs. Al integrar APISIX en tu sistema de autenticación móvil, puedes agregar una capa adicional de seguridad y asegurarte de que solo los usuarios autenticados puedan acceder a tus recursos protegidos.
Requisitos previos
- Docker se utiliza para instalar etcd y APISIX en contenedores.
- curl se utiliza para enviar solicitudes a la API de administración de APISIX. También puedes usar herramientas como Postman para interactuar con la API.
Paso 1: Instalar Apache APISIX
APISIX puede instalarse y ejecutarse fácilmente con el siguiente script de inicio rápido:
curl -sL https://run.api7.ai/apisix/quickstart | sh
Paso 2: Configurar el servicio backend (upstream)
A continuación, configuramos nuestro servicio backend. Para fines de demostración, puede ser cualquier servicio de API que sirva nuestra lógica de backend. Puedes reemplazarlo con tu propio servicio. Yo uso un servidor público simulado http://httpbin.org/ que genera respuestas aleatorias. Para simplificar, tendremos un solo endpoint que devuelve la dirección IP pública de nuestra máquina en este endpoint http://httpbin.org/ip.
Para enrutar las solicitudes al servicio backend para la API simulada, debes configurarlo agregando un servidor upstream en Apache APISIX a través de la API de administración.
curl http://127.0.0.1:9180/apisix/admin/upstreams/1 -X PUT -d '
{
"name":"Mock API upstream",
"desc":"Register Mock API as the upstream",
"nodes":{
"httpbin.org:80":1
}
}'
Paso 3: Crear una nueva configuración de plugin
Este paso implica configurar un plugin (usando el objeto Plugin Config) para una ruta que crearemos en el siguiente paso. Entonces, APISIX habilita el plugin JWT para asegurar nuestros endpoints. Cada vez que solicitamos el endpoint, verifica las credenciales JWT en el encabezado de la solicitud.
curl http://127.0.0.1:9180/apisix/admin/plugin_configs/1 -X PUT -d '
{
"plugins":{
"jwt-auth": {}
}
}'
Paso 4: Crear una Ruta para la API del backend
Creamos un nuevo objeto Ruta en APISIX que intercepta todas las solicitudes GET a la URI /ip, y utiliza las configuraciones existentes de upstream y plugin para habilitar el mecanismo de enrutamiento y las políticas de autenticación. Verifica el plugin JWT en el encabezado, y si existe y es válido, reenvía la solicitud a nuestro servidor simulado. De lo contrario, devuelve un error de no autorizado inmediatamente y la solicitud no llegará al servicio real.
curl -i http://127.0.0.1:9180/apisix/admin/routes/1 -X PUT -d '
{
"name":"Mock API server route",
"desc":"Create a new route in APISIX for the mock server endpoint",
"methods":[
"GET"
],
"uri":"/ip",
"upstream_id":"1",
"plugin_config_id":1
}'
Paso 5: Crear una Ruta para firmar el token JWT
Implementamos la autenticación basada en tokens para nuestra API. APISIX también puede actuar como un proveedor de identidad para generar y validar tokens. Para hacerlo, debes configurar una Ruta para un nuevo endpoint de API que firme el token utilizando el 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"
}
}
}'
Al ejecutar el comando curl anterior, registramos una nueva ruta llamada login con la ruta URI /login que firma un nuevo token cada vez que un usuario existente intenta iniciar sesión desde la página de inicio de sesión en la aplicación móvil utilizando sus correos electrónicos.
Parte 2: Crear formularios de registro e inicio de sesión en Appsmith
Utilizando la interfaz de bajo código de Appsmith, podemos crear formularios de registro e inicio de sesión de usuarios. Appsmith proporciona una amplia gama de widgets preconstruidos que se pueden personalizar fácilmente. Diseña los formularios con campos de entrada para el nombre de usuario, la contraseña y cualquier información adicional que requieras en el panel.
Antes de comenzar
Voy a omitir la parte de instalación de Appsmith en tu máquina. Puedes aprender cómo instalar Appsmith usando Docker en el sitio web de Appsmith. Asegúrate de que hayas instalado Appsmith y puedas acceder a él en http://localhost. Cuando implementas y ejecutas Appsmith, se agrega una aplicación titulada My first application por defecto. Puedes usar esta aplicación para construir tu primera app.
Paso 1: Crear una página de registro
En nuestro caso, un nuevo usuario primero se registra en la aplicación móvil desde la página de registro. Comienza creando una nueva página llamada RegistrationPage en tu aplicación. Agrega widgets de entrada para el correo electrónico (llamado EmailInput), el nombre de usuario (llamado UsernameInput) y la contraseña (PasswordInput). También, agrega botones de Registro (llamado RegisterButton) e Inicio de sesión (llamado LoginButton) widgets de botón al tablero de dibujo. El resultado final se ve así:
Cuando un usuario presiona el botón de registro con los detalles de entrada proporcionados, necesitarás una consulta para manejar la comunicación con el endpoint de la API de administración de APISIX para registrar un nuevo consumidor de API en el API Gateway. Crea una consulta API (llamada APISIX_Admin_Add_Consumer_API) con el endpoint URI de consumidores de APISIX /apisix/admin/consumers. Coloca el texto de los widgets de entrada en el cuerpo de tu consulta. Acceder a los widgets de entrada debería verse algo así:
Ten en cuenta que usamos la dirección de
host.docker.internalen lugar de localhost porque APISIX se está ejecutando dentro de su propio contenedor en una red docker diferente a la de Appsmith.
Después de que la consulta se envía a APISIX, registra el nuevo consumidor, y el objeto de consumidor usará el plugin jwt-auth con clave y secreto. Puedes probar si el consumidor se registró en el sistema con éxito obteniendo el consumidor especificado por el nombre de usuario appsmithuser. Ejecuta este comando curl:
curl http://127.0.0.1:9180/apisix/admin/consumers/appsmithuser
Mientras que los usuarios existentes pueden ir directamente a la página de inicio de sesión. Ver en la siguiente sección.
Paso 2: Crear una página de inicio de sesión
De vuelta en el lienzo de la aplicación, agrega una nueva página llamada Login page y configura el formulario de inicio de sesión con widgets de entrada (para ingresar el correo electrónico del usuario) y botón (para iniciar sesión).
Luego crea una consulta API (llamada login_api) para la ruta URI de inicio de sesión de APISIX /login y establece el parámetro key en {{EmailInput.text}}. Si pruebas la consulta y presionas el botón de ejecución, en una respuesta exitosa, nuestro endpoint de API Gateway de autenticación debería devolver un token de acceso válido. En el ejemplo a continuación, la clave jwt es un token que indica que el usuario ha sido autenticado en el lado de APISIX.
Para ejecutar la consulta login_api a través del botón Iniciar sesión, debes establecer la propiedad onClick de la consulta.
También es posible almacenar el token JWT en el almacén de Appsmith y luego llevar al usuario a la MainPage. Para hacerlo, inserta el siguiente código en la acción login_api de la Login page en la propiedad onClick:
{{login_api.run(() => {
const jwt = login_api?.data;
if (jwt) {
storeValue('jwt', jwt);
navigateTo('MainPage', {});
} else {
showAlert('Inicio de sesión fallido!', 'error');
}
})}}
Si el usuario no se autentica con APISIX, muestra un mensaje de alerta como una devolución de llamada para informar al usuario que hubo un error.
Paso 3: Crear una página principal
Finalmente, ahora es el momento de configurar la MainPage de la aplicación móvil para permitir el acceso a los usuarios que han iniciado sesión y mostrar algunos datos. Puedes usar el mismo lienzo para construir tu UI a partir de widgets. Una vez que el usuario ha iniciado sesión correctamente, nuestra lógica navega a MainPage, y en la primera carga de la página, realiza una llamada API automáticamente a la ruta http://127.0.0.1:9080/ip en APISIX utilizando la consulta que agregaste (llamada main_page_data_api) y recupera la dirección IP del servidor upstream (que creamos en la Parte 1 y en el paso 2).
Puedes notar en el encabezado Authorization el valor {{appsmith.store.jwt}} el valor jwt que guardamos en el almacén de Appsmith en el paso anterior, que se utiliza para demostrar a tu aplicación que el usuario está reconocido. Si el valor jwt no existe en el almacén de Appsmith, mostramos un error de no autorizado al usuario.
En mi caso, agregué dos widgets de texto a la MainPage y establecí el valor del campo de texto del segundo en {{main_page_data_api.data}}, que simplemente es la salida de datos de la llamada main_page_data_api. Mira el resultado.
Próximos pasos
También puedes agregar una página de no autorizado para redirigir a los usuarios no autorizados a esa página, mostrar el error y sugerirles que inicien sesión o se registren para crear una nueva cuenta. Proporciona a tus usuarios la capacidad de cerrar sesión en tu aplicación con un widget de botón cuando hayan terminado, lo que puede ayudar a aumentar la seguridad de tus datos.
Conclusión
Siguiendo los pasos anteriores, creamos el sistema de autenticación personalizado utilizando Appsmith y APISIX. Appsmith es adecuado para una amplia gama de casos de uso, desde la construcción de herramientas internas y paneles de administración hasta la creación de prototipos y el desarrollo de aplicaciones completas. Con APISIX, no solo puedes aplicar la autenticación para tus usuarios, sino también introducir medidas de seguridad adicionales como la limitación de tasa, el bloqueo de IP y la restricción de consumidores para mantener la seguridad de nuestra solución de autenticación personalizada.