lxluxo23/sacg-cronogramas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates tutorial for clarity and consistency

Browse Source 
Refines the tutorial document by standardizing list formatting,
correcting minor typographical errors, and updating outdated
references, thereby enhancing readability and ensuring technical
accuracy for users setting up the authentication system.
This commit is contained in:
luis cespedes 2025-05-20 11:56:11 -04:00
parent 6b351ff5b3
commit 04b7840341
1 changed files with 219 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
tutorial-keycloak-completo.md
View File

@ -6,21 +6,21 @@ Este tutorial comprensivo explica cómo configurar un sistema de autenticación
## Índice ## Índice
1. [Fundamentos de Autenticación Empresarial](#fundamentos-de-autenticación-empresarial-ldap-keycloak-y-angular) 1. [Fundamentos de Autenticación Empresarial](#fundamentos-de-autenticaci%C3%B3n-empresarial-ldap-keycloak-y-angular)
2. [Preparación del entorno](#1-preparación-del-entorno) 2. [Preparación del entorno](#1-preparaci%C3%B3n-del-entorno)
3. [Instalación y configuración de OpenLDAP](#2-instalación-y-configuración-de-openldap) 3. [Instalación y configuración de OpenLDAP](#2-instalaci%C3%B3n-y-configuraci%C3%B3n-de-openldap)
4. [Crear estructura LDAP para usuarios y grupos](#3-crear-estructura-ldap-para-usuarios-y-grupos) 4. [Crear estructura LDAP para usuarios y grupos](#3-crear-estructura-ldap-para-usuarios-y-grupos)
5. [Instalación y configuración de Keycloak](#4-instalación-y-configuración-de-keycloak) 5. [Instalación y configuración de Keycloak](#4-instalaci%C3%B3n-y-configuraci%C3%B3n-de-keycloak)
6. [Configuración de Keycloak en la interfaz web](#5-configuración-de-keycloak-en-la-interfaz-web) 6. [Configuración de Keycloak en la interfaz web](#5-configuraci%C3%B3n-de-keycloak-en-la-interfaz-web)
7. [Integración con Angular: Enfoque básico](#6-integración-con-angular-enfoque-básico) 7. [Integración con Angular: Enfoque básico](#6-integraci%C3%B3n-con-angular-enfoque-b%C3%A1sico)
8. [Integración con Angular 19: Enfoque moderno](#7-integración-con-angular-19-enfoque-moderno) 8. [Integración con Angular 19: Enfoque moderno](#7-integraci%C3%B3n-con-angular-19-enfoque-moderno)
9. [Servicios de autenticación avanzados](#8-servicios-de-autenticación-avanzados) 9. [Servicios de autenticación avanzados](#8-servicios-de-autenticaci%C3%B3n-avanzados)
10. [Guardias de ruta e interceptores HTTP](#9-guardias-de-ruta-e-interceptores-http) 10. [Guardias de ruta e interceptores HTTP](#9-guardias-de-ruta-e-interceptores-http)
11. [Componentes de UI para login/logout](#10-componentes-de-ui-para-loginlogout) 11. [Componentes de UI para login/logout](#10-componentes-de-ui-para-loginlogout)
12. [Arquitectura del sistema](#11-arquitectura-del-sistema) 12. [Arquitectura del sistema](#11-arquitectura-del-sistema)
13. [Consideraciones de seguridad y buenas prácticas](#12-consideraciones-de-seguridad) 13. [Consideraciones de seguridad y buenas prácticas](#12-consideraciones-de-seguridad)
14. [Resolución de problemas comunes](#13-resolución-de-problemas-comunes) 14. [Resolución de problemas comunes](#13-resoluci%C3%B3n-de-problemas-comunes)
15. [Verificación y prueba del sistema](#14-verificación-y-prueba-del-sistema) 15. [Verificación y prueba del sistema](#14-verificaci%C3%B3n-y-prueba-del-sistema)
16. [Recursos adicionales](#15-recursos-adicionales) 16. [Recursos adicionales](#15-recursos-adicionales)
17. [Resumen](#16-resumen) 17. [Resumen](#16-resumen)
@ -55,7 +55,7 @@ Keycloak es una solución de código abierto para gestión de identidad y acceso
### Características principales de Keycloak: ### Características principales de Keycloak:
- **SSO (Single Sign-On)**: Permite a los usuarios autenticarse una vez y acceder a múltiples aplicaciones - **SSO (Single Sign-On)**: Permite a los usuarios autenticarse una vez y acceder a múltiples aplicaciones
- **Federation de identidades**: Puede integrar múltiples fuentes de usuarios (como LDAP, Active Directory, bases de datos) - **Federación de identidades**: Puede integrar múltiples fuentes de usuarios (como LDAP, Active Directory, bases de datos)
- **Autenticación multifactor**: Soporta verificación en dos pasos y otros métodos de autenticación avanzados - **Autenticación multifactor**: Soporta verificación en dos pasos y otros métodos de autenticación avanzados
- **Protocolos estándar**: Implementa OAuth 2.0, OpenID Connect, SAML 2.0 - **Protocolos estándar**: Implementa OAuth 2.0, OpenID Connect, SAML 2.0
- **Administración centralizada**: Interfaz web para gestionar usuarios, roles, permisos y aplicaciones - **Administración centralizada**: Interfaz web para gestionar usuarios, roles, permisos y aplicaciones
@ -81,24 +81,24 @@ Esta combinación crea una solución robusta donde LDAP almacena los datos de us
## Problemas que soluciona esta arquitectura ## Problemas que soluciona esta arquitectura
### 1. Fragmentación de identidades ### 1. Fragmentación de identidades
**Problema**: En organizaciones grandes, es común tener usuarios duplicados en diferentes sistemas.
**Solución**: LDAP centraliza la información de usuarios, mientras Keycloak expone estos datos a aplicaciones modernas. **Problema**: En organizaciones grandes, es común tener usuarios duplicados en diferentes sistemas. **Solución**: LDAP centraliza la información de usuarios, mientras Keycloak expone estos datos a aplicaciones modernas.
### 2. Experiencia de usuario deficiente ### 2. Experiencia de usuario deficiente
**Problema**: Obligar a los usuarios a iniciar sesión en cada aplicación por separado.
**Solución**: Single Sign-On a través de Keycloak permite autenticarse una sola vez para acceder a múltiples aplicaciones. **Problema**: Obligar a los usuarios a iniciar sesión en cada aplicación por separado. **Solución**: Single Sign-On a través de Keycloak permite autenticarse una sola vez para acceder a múltiples aplicaciones.
### 3. Seguridad inconsistente ### 3. Seguridad inconsistente
**Problema**: Cada aplicación implementa su propia seguridad, con diferentes estándares y posibles vulnerabilidades.
**Solución**: Keycloak implementa prácticas de seguridad modernas de forma centralizada. **Problema**: Cada aplicación implementa su propia seguridad, con diferentes estándares y posibles vulnerabilidades. **Solución**: Keycloak implementa prácticas de seguridad modernas de forma centralizada.
### 4. Dificultad para implementar autenticación robusta ### 4. Dificultad para implementar autenticación robusta
**Problema**: Implementar OAuth2, OpenID Connect o SAML desde cero es complejo y propenso a errores.
**Solución**: Keycloak proporciona estas implementaciones listas para usar. **Problema**: Implementar OAuth2, OpenID Connect o SAML desde cero es complejo y propenso a errores. **Solución**: Keycloak proporciona estas implementaciones listas para usar.
### 5. Gestión compleja de accesos ### 5. Gestión compleja de accesos
**Problema**: Administrar quién puede acceder a qué recursos en múltiples aplicaciones.
**Solución**: Roles y grupos centralizados que se aplican consistentemente en todas las aplicaciones. **Problema**: Administrar quién puede acceder a qué recursos en múltiples aplicaciones. **Solución**: Roles y grupos centralizados que se aplican consistentemente en todas las aplicaciones.
## Arquitectura general de la solución ## Arquitectura general de la solución
@ -118,6 +118,7 @@ Esta combinación crea una solución robusta donde LDAP almacena los datos de us
| (Recursos) | | (Recursos) |
| | | |
+-------------------+ +-------------------+
``` ```
1. **OpenLDAP** actúa como almacén principal de usuarios y grupos 1. **OpenLDAP** actúa como almacén principal de usuarios y grupos
@ -193,7 +194,6 @@ Durante la instalación, se te pedirá configurar una contraseña de administrad
sudo dpkg-reconfigure slapd sudo dpkg-reconfigure slapd
``` ```
En la configuración: En la configuración:
1. "¿Omitir configuración del servidor LDAP?" → No 1. "¿Omitir configuración del servidor LDAP?" → No
@ -213,14 +213,13 @@ En la configuración:
![](https://i.ibb.co/HTk3N29Y/imagen.png) ![](https://i.ibb.co/HTk3N29Y/imagen.png)
### Verificar que LDAP se esté ejecutando correctamente ### Verificar que LDAP se esté ejecutando correctamente
```bash ```bash
sudo systemctl status slapd sudo systemctl status slapd
``` ```
![](https://i.ibb.co/RXPrQMr/imagen.png)
![](https://i.ibb.co/RXPrQMr/imagen.png)
### Comprobar la conexión LDAP básica ### Comprobar la conexión LDAP básica
@ -248,9 +247,8 @@ Busca y modifica las siguientes líneas:
$servers->setValue('server','base',array('dc=correos,dc=com')); $servers->setValue('server','base',array('dc=correos,dc=com'));
$servers->setValue('login','bind_id','cn=admin,dc=correos,dc=com'); $servers->setValue('login','bind_id','cn=admin,dc=correos,dc=com');
``` ```
![](https://i.ibb.co/20j0H35m/imagen.png)
![enter image description here](https://i.ibb.co/ycpGfxKP/imagen.png)
![](https://i.ibb.co/20j0H35m/imagen.png) ![enter image description here](https://i.ibb.co/ycpGfxKP/imagen.png)
Y cambia descomenta y cambia esta línea: Y cambia descomenta y cambia esta línea:
@ -264,9 +262,7 @@ por:
$servers->setValue('login','anon_bind',false); $servers->setValue('login','anon_bind',false);
``` ```
![](https://i.ibb.co/FkZB3mkp/imagen.png) ![](https://i.ibb.co/FkZB3mkp/imagen.png) ![](https://i.ibb.co/4w0hDZqG/imagen.png) Reinicia el servidor web:
![](https://i.ibb.co/4w0hDZqG/imagen.png)
Reinicia el servidor web:
```bash ```bash
sudo systemctl restart apache2 sudo systemctl restart apache2
@ -336,12 +332,14 @@ ldapadd -x -D cn=admin,dc=correos,dc=com -W -f ~/grupos.ldif
### Crear usuarios LDAP ### Crear usuarios LDAP
Primero, genera contraseñas encriptadas para los usuarios: Primero, genera contraseñas encriptadas para los usuarios:
> Aca usaremos la misma contraseña para todos los usuarios para temas practicos
> Aquí usaremos la misma contraseña para todos los usuarios para temas prácticos
```bash ```bash
slappasswd -s "password123" slappasswd -s "password123"
``` ```
![](https://i.ibb.co/twQFcVxH/imagen.png)
Anota el hash resultante para usarlo en el siguiente archivo. ![](https://i.ibb.co/twQFcVxH/imagen.png) Anota el hash resultante para usarlo en el siguiente archivo.
Crea un archivo para los usuarios: Crea un archivo para los usuarios:
@ -430,6 +428,7 @@ dn: cn=usuarios,ou=grupos,dc=correos,dc=com
changetype: modify changetype: modify
add: memberUid add: memberUid
memberUid: user memberUid: user
``` ```
Aplica los cambios: Aplica los cambios:
@ -468,13 +467,13 @@ sudo useradd -r -s /sbin/nologin keycloak
# Asignar permisos # Asignar permisos
sudo chown -R keycloak:keycloak /opt/keycloak sudo chown -R keycloak:keycloak /opt/keycloak
``` ```
## Configurar usuario administrador inicial para Keycloak ## Configurar usuario administrador inicial para Keycloak
Crea un archivo de propiedades: Crea un archivo de propiedades:
```bash ```bash
sudo nano /opt/keycloak/conf/keycloak.conf sudo nano /opt/keycloak/conf/keycloak.conf
``` ```
Agrega estas líneas: Agrega estas líneas:
@ -489,7 +488,6 @@ http-enabled=true
# Configuración de administrador inicial # Configuración de administrador inicial
http-enabled=true http-enabled=true
``` ```
![](https://i.ibb.co/S42YkQKg/image.png) ![](https://i.ibb.co/S42YkQKg/image.png)
@ -499,7 +497,6 @@ http-enabled=true
```bash ```bash
cd /opt/keycloak cd /opt/keycloak
sudo -u keycloak /opt/keycloak/bin/kc.sh bootstrap-admin user --username admin sudo -u keycloak /opt/keycloak/bin/kc.sh bootstrap-admin user --username admin
``` ```
En este comando preguntará para crear la contraseña del usuario "admin" que usaremos como administrador. En este comando preguntará para crear la contraseña del usuario "admin" que usaremos como administrador.
@ -510,7 +507,6 @@ Sin hacer cd, corremos el siguiente comando:
```bash ```bash
sudo -u keycloak bin/kc.sh start-dev sudo -u keycloak bin/kc.sh start-dev
``` ```
## Iniciar Keycloak en modo productivo ## Iniciar Keycloak en modo productivo
@ -564,14 +560,14 @@ sudo systemctl status keycloak
> **Nota**: si quieres ver el log del servicio usa el comando `sudo journalctl -u keycloak -f` > **Nota**: si quieres ver el log del servicio usa el comando `sudo journalctl -u keycloak -f`
## Configuración de Keycloak en la interfaz web ## 5. Configuración de Keycloak en la interfaz web
Ahora puedes acceder a la consola de administración de Keycloak en http://192.168.1.27:8080/admin/ e iniciar sesión con: Ahora puedes acceder a la consola de administración de Keycloak en http://192.168.1.27:8080/admin/ e iniciar sesión con:
- Usuario: `admin` - Usuario: `admin`
- Contraseña: la que configuraste anteriormente - Contraseña: la que configuraste anteriormente
> No necesariamente es ese login siempre, todo depende de qué usuario crearon anteriormente y su contraseña ademas de la IP del servidor. > No necesariamente es ese login siempre, todo depende de qué usuario crearon anteriormente y su contraseña además de la IP del servidor.
![](https://i.ibb.co/dwrCJ3xr/image.png) ![](https://i.ibb.co/dwrCJ3xr/image.png)
@ -625,8 +621,6 @@ Ahora puedes acceder a la consola de administración de Keycloak en http://192.1
6. En la pantalla del proveedor LDAP, ve a la pestaña "Synchronization" 6. En la pantalla del proveedor LDAP, ve a la pestaña "Synchronization"
![](https://i.ibb.co/JRq7tDB6/imagen.png) ![](https://i.ibb.co/JRq7tDB6/imagen.png)
7. Haz clic en "Sync all users" 7. Haz clic en "Sync all users"
@ -694,6 +688,7 @@ Ahora puedes acceder a la consola de administración de Keycloak en http://192.1
![](https://i.ibb.co/XHCgj5Y/imagen.png) ![](https://i.ibb.co/XHCgj5Y/imagen.png)
4. En la siguiente pantalla (para aplicaciones SPA modernas): 4. En la siguiente pantalla (para aplicaciones SPA modernas):
- Client authentication: `OFF` (para aplicaciones SPA) - Client authentication: `OFF` (para aplicaciones SPA)
- Authorization: `OFF` - Authorization: `OFF`
- Marca la casilla "Direct access grants" - Marca la casilla "Direct access grants"
@ -701,6 +696,7 @@ Ahora puedes acceder a la consola de administración de Keycloak en http://192.1
> **Importante**: La opción "Direct access grants" es esencial ya que permite realizar la autenticación directamente desde el cliente Angular mediante peticiones POST (enviando usuario y contraseña), sin necesidad de redirigir al usuario a través de la interfaz de inicio de sesión de Keycloak. > **Importante**: La opción "Direct access grants" es esencial ya que permite realizar la autenticación directamente desde el cliente Angular mediante peticiones POST (enviando usuario y contraseña), sin necesidad de redirigir al usuario a través de la interfaz de inicio de sesión de Keycloak.
![](https://i.ibb.co/0RWVKBxp/image.png) ![](https://i.ibb.co/0RWVKBxp/image.png)
5. En la siguiente pantalla: 5. En la siguiente pantalla:
@ -714,10 +710,10 @@ Ahora puedes acceder a la consola de administración de Keycloak en http://192.1
![](https://i.ibb.co/Zp0r5wXY/imagen.png) ![](https://i.ibb.co/Zp0r5wXY/imagen.png)
> **Nota**: Para aplicaciones que no son SPA, puedes habilitar "Client authentication" y obtener un client secret que deberás usar en la configuración. > **Nota**: Para aplicaciones que no son SPA, puedes habilitar "Client authentication" y obtener un client secret que deberás usar en la configuración. **Nota**: Puedes descargar un ejemplo de una máquina virtual de VirtualBox en el siguiente [enlace](https://valposystemscom-my.sharepoint.com/:u:/g/personal/luis_cespedes_valposystems_com/EepH0pHrk8ZEgeU-RmVkopgBiN6LWoPm6P8MJEzt-qdxXw?e=IZFMMg) con todo ya configurado, solo importar y usar.
> **Nota**: Puedes descargar un ejemplo de una maquina virtual de virtual box en el siguiente [enlace](https://valposystemscom-my.sharepoint.com/:u:/g/personal/luis_cespedes_valposystems_com/EepH0pHrk8ZEgeU-RmVkopgBiN6LWoPm6P8MJEzt-qdxXw?e=IZFMMg) con todo ya configurado , solo importar y usar
## Configurar cliente para incluir grupos ## Configurar cliente para incluir grupos
**Añadir un Protocol Mapper en el cliente de Keycloak:** a. Inicia sesión en la consola de administración de Keycloak b. Navega a "Clients" > selecciona tu cliente "angular-app" c. Ve a la pestaña "Client Scopes" > Selecciona el scope por defecto (normalmente es el nombre del cliente) d. Ve a la pestaña "Mappers" e. Haz clic en "Create" o "Add Mapper" y selecciona "Group Membership" f. Configura el mapper con los siguientes valores: **Añadir un Protocol Mapper en el cliente de Keycloak:** a. Inicia sesión en la consola de administración de Keycloak b. Navega a "Clients" > selecciona tu cliente "angular-app" c. Ve a la pestaña "Client Scopes" > Selecciona el scope por defecto (normalmente es el nombre del cliente) d. Ve a la pestaña "Mappers" e. Haz clic en "Create" o "Add Mapper" y selecciona "Group Membership" f. Configura el mapper con los siguientes valores:
- Name: groups - Name: groups
@ -733,18 +729,13 @@ Alternativamente, puedes crear un mapper de tipo "User Attribute" si prefieres a
![client scope](https://i.ibb.co/wr2PXT6h/imagen.png) ![client scope](https://i.ibb.co/wr2PXT6h/imagen.png)
![eleccion-mapper](https://i.ibb.co/6Rcq1TvG/imagen.png) ![eleccion-mapper](https://i.ibb.co/6Rcq1TvG/imagen.png)
![eleccion grupo membership](https://i.ibb.co/ymBxwKGV/imagen.png) ![eleccion grupo membership](https://i.ibb.co/ymBxwKGV/imagen.png)
![configuracion maper](https://i.ibb.co/TqWHYYjX/imagen.png) ![configuracion maper](https://i.ibb.co/TqWHYYjX/imagen.png)
Que logramos con esto ? facil , que en el accestoken aparezcan los grupos que pertenece el usuario , tal cual lo configuramos en ldap, esto puede ayudar para crear politicas de acceso a paginas o rutas protegidas para algun grupo en especifico mas adelante ¿Qué logramos con esto? Fácil: que en el access token aparezcan los grupos a los que pertenece el usuario, tal cual los configuramos en LDAP. Esto puede ayudar para crear políticas de acceso a páginas o rutas protegidas para algún grupo en específico más adelante. ![ejemplo json acces token ](https://i.ibb.co/jPrR0XH3/imagen.png)
![ejemplo json acces token ](https://i.ibb.co/jPrR0XH3/imagen.png)
## 11. Arquitectura del sistema ## 11. Arquitectura del sistema
@ -779,7 +770,6 @@ El flujo de autenticación funciona de la siguiente manera:
6. Los interceptores HTTP añaden automáticamente el token a las peticiones API 6. Los interceptores HTTP añaden automáticamente el token a las peticiones API
7. Las rutas protegidas verifican los roles del usuario antes de permitir el acceso 7. Las rutas protegidas verifican los roles del usuario antes de permitir el acceso
## 12. Consideraciones de seguridad ## 12. Consideraciones de seguridad
Al implementar este sistema de autenticación en un entorno de producción, es crucial tener en cuenta diversas consideraciones de seguridad: Al implementar este sistema de autenticación en un entorno de producción, es crucial tener en cuenta diversas consideraciones de seguridad:
@ -962,17 +952,19 @@ Si ves redirecciones constantes entre tu aplicación y Keycloak:
Si encuentras este error al compilar: Si encuentras este error al compilar:
1. Asegúrate de haber instalado correctamente las dependencias: 1. Asegúrate de haber instalado correctamente las dependencias:
```bash ```bash
npm install keycloak-angular keycloak-js npm install keycloak-angular keycloak-js
``` ```
2. Verifica que las versiones sean compatibles con tu versión de Angular 2. Verifica que las versiones sean compatibles con tu versión de Angular
3. Limpia la caché de npm y reinstala: 3. Limpia la caché de npm y reinstala:
```bash ```bash
npm cache clean --force npm cache clean --forcerm -rf node_modulesnpm install
rm -rf node_modules
npm install
``` ```
### Problema: El token no se adjunta a las peticiones HTTP ### Problema: El token no se adjunta a las peticiones HTTP
1. Verifica que estés utilizando el interceptor correcto 1. Verifica que estés utilizando el interceptor correcto
@ -1038,6 +1030,7 @@ En este tutorial comprensivo, hemos explorado la implementación de un sistema d
- **Flexibilidad**: La capacidad de federación de identidades de Keycloak facilita la integración con sistemas existentes y la migración gradual. - **Flexibilidad**: La capacidad de federación de identidades de Keycloak facilita la integración con sistemas existentes y la migración gradual.
### Aplicaciones prácticas: ### Aplicaciones prácticas:
Esta arquitectura es particularmente valiosa en: Esta arquitectura es particularmente valiosa en:
@ -1061,8 +1054,6 @@ El ecosistema moderno de autenticación está en constante evolución, pero esta
Con la configuración y conocimientos adquiridos en este tutorial, estarás bien posicionado para implementar y mantener un sistema de autenticación empresarial robusto, seguro y centrado en el usuario. Con la configuración y conocimientos adquiridos en este tutorial, estarás bien posicionado para implementar y mantener un sistema de autenticación empresarial robusto, seguro y centrado en el usuario.
--- ----------
*Nota final: Recuerda que la seguridad es un proceso continuo, no un estado. Mantén todos los componentes actualizados y revisa regularmente las configuraciones y políticas de seguridad para adaptarte a nuevas amenazas y requisitos.*
_Nota final: Recuerda que la seguridad es un proceso continuo, no un estado. Mantén todos los componentes actualizados y revisa regularmente las configuraciones y políticas de seguridad para adaptarte a nuevas amenazas y requisitos._