Skip to main content

Flujo de Autenticación y Autorización con PKCE, Keycloak y API Manager

Bienvenido a esta guía técnica donde explicamos paso a paso cómo implementar un flujo de autenticación seguro y moderno en aplicaciones frontend utilizando OAuth 2.0 con PKCE, Keycloak y un API Gateway.

🎯 Visión General​

Este documento describe detalladamente un flujo de autenticación y autorización OAuth 2.0 utilizando el grant type authorization_code con la extensión PKCE (Proof Key for Code Exchange).

El flujo implementa Single Sign-On (SSO) mediante Keycloak como Proveedor de Identidad (IdP), con consumo de APIs protegidas a través de un API Gateway (API Manager) y validación final en un servicio de backend.

El objetivo es garantizar la seguridad de los tokens, asegurar la autorización basada en suscripciones y validar correctamente las peticiones desde el frontend Angular.

🧩 Componentes Involucrados​

🖥️ Cliente (Frontend - Angular)​

Aplicación pública que inicia el flujo de autenticación y consume APIs.

  • Genera code_verifier y code_challenge.
  • Interactúa con Keycloak para login.
  • Almacena tokens de forma segura.
  • Invoca APIs protegidas con tokens.

🛡️ Proveedor de Identidad (Keycloak)​

Sistema centralizado de identidad.

  • Valida credenciales del usuario.
  • Emite authorization_code, access_token, refresh_token.
  • Expone endpoints para validación de tokens.

🚪 API Gateway (API Manager)​

Punto de control y validación para el acceso a APIs.

  • Verifica suscripciones de aplicaciones.
  • Valida tokens en ALP_AUTH.
  • Redirige tráfico autorizado al backend.

🧠 Servicio Backend (API de Negocio)​

Servicio real que ejecuta la lógica del negocio.

  • Valida el token del header Authorization contra Keycloak.
  • Procesa y responde la transacción.

🔐 Flujo Detallado de Operaciones​

Parte 1: Autenticación del Usuario (Flujo PKCE)​

  1. Angular genera code_verifier y code_challenge.
  2. Redirige al navegador hacia Keycloak con parámetros de autorización.
  3. El usuario ingresa sus credenciales.
  4. Keycloak redirige con el authorization_code.
  5. Angular recibe el código y lo intercambia por tokens usando el code_verifier.
  6. Angular almacena tokens y activa la sesión autenticada.

Parte 2: Consumo de API Protegida​

  1. Angular realiza solicitudes a APIs protegidas.
  2. Se incluyen dos headers: Authorization y ALP_AUTH.
  3. El API Gateway valida suscripciones y el token de ALP_AUTH.
  4. Si es válido, reenvía la solicitud al backend.
  5. El backend valida el token contra Keycloak.
  6. El backend responde con el resultado al cliente.

📊 Diagramas de Secuencia​

Diagrama 1: Autenticación de Usuario (Flujo PKCE)​





Diagrama 2: Llamada a API Autorizada​





✅ Conclusiones​


Este diseño ofrece un enfoque robusto y escalable para manejar la autenticación y autorización en arquitecturas modernas. Proporciona:


    

  • Protección segura sin necesidad de client_secret.
    • 

  • Control granular de acceso y trazabilidad.
    • 

  • Compatibilidad con SSO y estándares OAuth 2.0.
    •