Cómo Construir una Aplicación de Autenticación Full-Stack

La mayoría de las aplicaciones web necesitan una función de registro e inicio de sesión. Pero para los principiantes, esto puede ser un desafío. Incluso los desarrolladores expertos prefieren utilizar servicios externos para manejar la autenticación desde el principio. Cuando hablamos de un flujo de autenticación full-stack, significa configurar el inicio de sesión y registro de usuarios en el frontend y también asegurar la API del backend. Por lo tanto, tienes que trabajar en ambas partes.

Esta publicación te guiará a través de la construcción de una aplicación de autenticación full-stack con Apache APISIX, Authgear y OpenID Connect (OIDC). Puedes encontrar el código fuente del proyecto en GitHub. Para un inicio rápido con la aplicación, simplemente clona el repositorio y ejecuta el código de ejemplo, siguiendo los pasos proporcionados en el archivo README.md.

Objetivo de aprendizaje

Este contenido tiene como objetivo mostrar a todos cómo configurar la autenticación tanto en el backend como en el frontend. Además, está diseñado para ayudar tanto a principiantes como a desarrolladores experimentados que deseen convertirse en desarrolladores full-stack.

El papel de APISIX, Authgear y OIDC en la autenticación

Antes de sumergirnos en la guía, presentemos brevemente las herramientas que utilizaremos.

• OIDC (OpenID Connect) es una capa de identidad simple construida sobre el protocolo OAuth 2.0. Permite que aplicaciones de terceros verifiquen a los usuarios y obtengan información básica del perfil de manera estandarizada.

• APISIX se destaca como una de las puertas de enlace de API de código abierto más populares. Está diseñado no solo para la gestión de API, sino también para garantizar la seguridad y protección de estas API. Una de las características más destacadas en su arsenal de seguridad es el soporte para OIDC utilizando su plugin.

• Authgear es una plataforma altamente adaptable de identidad como servicio (IDaaS) para aplicaciones web y móviles. Tus usuarios pueden iniciar sesión en tu aplicación a través de una interfaz de usuario integrada (no necesitas construir una interfaz de usuario para el flujo de registro e inicio de sesión de los usuarios), lo que les proporciona una experiencia de inicio de sesión segura y basada en estándares que puedes personalizar con tu propia marca y varios métodos de autenticación, como correo electrónico, inicios de sesión sociales, sin contraseña, inicios de sesión biométricos, contraseña de un solo uso (OTP) con SMS/WhatsApp y autenticación multifactor (MFA). Utiliza OpenID Connect (OIDC) y OAuth 2.0 para identificar quién es un usuario y otorgar autorización a recursos protegidos.

El flujo de autenticación

Aquí hay un diagrama arquitectónico de alto nivel de cómo se ve el proceso de autenticación:

Los pasos mostrados en el diagrama se explican en detalle a continuación:

En el diagrama anterior, el Cliente es cualquier aplicación web, API Gateway es APISIX y Proveedor de identidad es Authgear y Upstream es una API de backend.

1. Una aplicación web puede tomar varias formas, desde aplicaciones de una sola página (SPA) construidas con React, Vue o Angular, hasta aplicaciones web estándar creadas utilizando frameworks como Express, NextJS y plataformas similares. La aplicación web es nuestra aplicación cliente con frontend que envía una solicitud a un Proveedor de Identidad (Authgear) con un ID de cliente, un secreto de cliente para obtener un token de acceso como JSON Web Tokens (JWT).
2. Si las credenciales proporcionadas son correctas, Authgear responde con un token JWT a la aplicación web. Puedes crear tantos usuarios como desees para tu aplicación en el portal de Authgear y los usuarios pueden iniciar sesión utilizando páginas de UI alojadas por Authgear.
3. Después de obtener el token JWT, el cliente envía una solicitud a una API Gateway (APISIX) con el token de acceso, y las API de backend protegidas por la puerta de enlace.
4. Antes de procesar la solicitud, APISIX necesita asegurarse de que el token proporcionado sea válido, no haya expirado y tenga los alcances correctos para los datos o servicios solicitados. Si APISIX no puede validar el token localmente, envía la solicitud de introspección del token al servidor de autorización de Authgear. Esta solicitud generalmente se realiza al punto final introspection del servidor.
5. Authgear recibe la solicitud de introspección y la procesa. El servidor verifica sus registros para determinar la validez del token, su expiración y los alcances asociados, y después de determinar el estado del token, responde a APISIX.
6. Basándose en la respuesta de introspección del token de Authgear, APISIX puede tomar una decisión informada. Si el token es válido, reenvía la solicitud a la API de backend; de lo contrario, rechaza la solicitud del cliente con un código de estado HTTP no autorizado.
7. APISIX envía la respuesta de la API de backend con los recursos solicitados.

Aplicación de autenticación full-stack con APISIX, Authgear y OIDC.

Para el proyecto de demostración, utilizamos Docker para instalar y ejecutar 3 componentes (backend, API Gateway y frontend) con un solo comando. Utilizamos ExpressJS para la aplicación web frontend, alojando nuestra aplicación de una sola página en localhost:3000. La API Gateway de APISIX se puede acceder en localhost:9080, mientras que nuestra API de backend (puede ser cualquier API que construyas usando Python, Java, NodeJS, etc.) está configurada en localhost:9081.

Requisitos previos

Antes de comenzar, necesitarás lo siguiente:

• Una cuenta gratuita de Authgear. Regístrate si aún no tienes una.
• Docker se utiliza para instalar todos los servicios.

Configurar Authgear

Para utilizar los servicios de Authgear, necesitarás tener una aplicación configurada en el Panel de control de Authgear y obtener la información del Cliente OIDC de Authgear. Esta configuración permite que los usuarios en Authgear inicien sesión en la aplicación web automáticamente una vez que estén autenticados por Authgear.

Paso 1: Crear una aplicación en Authgear

Para configurar la aplicación, navega a la Interfaz de usuario del Portal de Authgear y selecciona Aplicaciones en la barra de navegación izquierda. Usa el selector interactivo para crear una nueva Aplicación de Cliente OIDC de Authgear.

Paso 2: Copiar las credenciales de la aplicación

Cada aplicación en Authgear tiene asignado un CLIENT ID y un CLIENT Secret alfanuméricos y únicos que tu código de aplicación utilizará para llamar a las API de Authgear en la aplicación web. Registra el ISSUER generado por Authgear (por ejemplo, https://example-auth.authgear-apps.com), CLIENT ID, CLIENT SECRET de la salida. Utilizarás estos valores en el siguiente paso para la configuración de la aplicación web.

Paso 3: Configurar URI de redirección

Un URI de redirección autorizado de tu aplicación es la URL a la que Authgear redirigirá después de que el usuario se haya autenticado para que el middleware de OpenID Connect complete el proceso de autenticación. En nuestro caso, será la página de inicio de nuestro frontend y se ejecutará en http://localhost:3000.

Configura lo siguiente http://localhost:3000 en el campo URIs de redirección autorizados. Si no se configura, los usuarios no serán devueltos a tu aplicación después de iniciar sesión.

Paso 4: Habilitar Token de Acceso

Además, habilita la opción Emitir JWT como token de acceso en la sección Token de Acceso de la configuración de la aplicación:

Paso 5: Elegir un método de inicio de sesión

Después de crear la aplicación de Authgear, elige cómo los usuarios deben autenticarse en la página de inicio de sesión. Desde la pestaña Autenticación, navega a Métodos de inicio de sesión, puedes elegir un método de inicio de sesión entre varias opciones, incluyendo por correo electrónico, móvil o social, solo usando un nombre de usuario o el método personalizado que especifiques. Para esta demostración, elegimos el enfoque Correo electrónico+Sin contraseña donde se les pide a nuestros usuarios que registren una cuenta e inicien sesión utilizando sus correos electrónicos. Recibirán una contraseña de un solo uso (OTP) en sus correos electrónicos y verificarán el código para usar la aplicación.

Configurar y ejecutar el proyecto de demostración

Con Authgear configurado con éxito, ahora podemos traer el repositorio de GitHub, configurar las variables de entorno y ejecutar los servicios:

Comienza clonando el proyecto en tu máquina local:

git clone https://github.com/Boburmirzo/apisix-authgear-oidc-full-stack-auth.git

Haz que el directorio del proyecto sea tu directorio de trabajo actual:

cd apisix-authgear-oidc-full-stack-auth

En el directorio raíz de tu proyecto donde se encuentra el archivo Docker compose yaml, crea un archivo .env con las siguientes variables de entorno:

CLIENT_ID={AUTHGEAR_APP_CLIENT_ID}
CLIENT_SECRET={AUTHGEAR_APP_CLIENT_SECRET}
ISSUER={AUTHGEAR_ISSUER}
REDIRECT_URI=http://localhost:3000

Reemplaza los valores entre corchetes con los valores de configuración de tu aplicación de Authgear de la sección Configurar Authgear anterior, como Issuer, ClientId, ClientSecret.

Después de agregar el archivo de entorno, ejecuta el comando docker compose up desde el directorio raíz.

Probar el flujo de autenticación

Para la demostración, utilizamos Docker para instalar y ejecutar 3 componentes (backend, API Gateway y frontend) con un solo comando. Utilizamos ExpressJS para la aplicación web frontend, alojando nuestra aplicación de una sola página en localhost:3000. La API Gateway de APISIX se puede acceder en localhost:9080, mientras que nuestra API de backend (puede ser cualquier API que construyas usando Python, Java, NodeJS, etc.) está configurada en localhost:9081.

Después de registrarte utilizando tu correo electrónico, recibirás una contraseña de un solo uso (OTP):

Una vez que te hayas autenticado, se te permitirá solicitar recursos de la API y obtendrás una respuesta del servicio de backend:

APISIX aplicó la autenticación OIDC con Authgear y proporcionó un flujo de autenticación seguro y simplificado con una configuración fácil.

Próximos pasos

Esta combinación de herramientas que utilizamos aseguró la seguridad, permitiendo a los desarrolladores centrarse en la lógica del negocio en lugar de las complejidades del proceso de autenticación. A partir de ahora, tienes la función de autenticación habilitada, puedes comenzar a construir tu interfaz de usuario para la página de inicio, mostrar datos de la API y desarrollar otras páginas.

Recursos relacionados

Política de autorización de Apache APISIX: Protege tus API

Configurar SSO con OIDC y Keycloak