Asegura tu aplicación Angular con Keycloak y el patrón BFF

Este artículo muestra cómo construir una aplicación web segura utilizando el patrón Backend for Frontend (BFF), integrando Keycloak y Angular. Para evitar el almacenamiento de datos sensibles en el navegador, los flujos de autenticación con Keycloak son manejados completamente por un servidor BFF dedicado. El BFF actúa como un intermediario seguro entre Keycloak y la aplicación Angular, gestionando los flujos OAuth2 y PKCE, almacenando tokens de forma segura y previniendo que operaciones sensibles (como la renovación de tokens) lleguen al navegador. La aplicación Angular interactúa únicamente con los endpoints simplificados proporcionados por el BFF, eliminando la comunicación directa con Keycloak. El artículo detalla la configuración de Keycloak, la configuración del servidor BFF (utilizando Express.js) y el desarrollo de la aplicación Angular, destacando los beneficios de seguridad de esta arquitectura.