luis cespedes 01b93eca37 funcionando v1

2025-05-13 15:21:24 -04:00

22 KiB

Raw Blame History

Tutorial: Implementación de Keycloak con LDAP para Angular

Este tutorial explica cómo configurar un sistema de autenticación completo utilizando Keycloak como proveedor de identidad, OpenLDAP como directorio de usuarios y una aplicación Angular que consume estos servicios.

Índice

Preparación del entorno Ubuntu
Instalación y configuración de OpenLDAP
Crear estructura LDAP para correos.com
Instalación y configuración de Keycloak
Configuración de Keycloak en la interfaz web
Configuración de una aplicación Angular
Arquitectura del sistema
Resolución de problemas comunes
Verificación y prueba del sistema
Resumen

1. Preparación del entorno Ubuntu

Primero, actualizamos el sistema e instalamos Java:

sudo apt update
sudo apt upgrade -y
sudo apt install openjdk-17-jdk -y

Verifica la instalación de Java:

java -version

2. Instalación y configuración de OpenLDAP

Instalar OpenLDAP y utilidades

sudo apt install slapd ldap-utils -y

Durante la instalación, se te pedirá configurar una contraseña de administrador para LDAP.

Reconfigurar LDAP con el dominio correcto

sudo dpkg-reconfigure slapd

En la configuración:

"¿Omitir configuración del servidor LDAP?" → No
"Nombre de dominio DNS:" → correos.com
"Nombre de la organización:" → Correos Org
"Contraseña de administrador:" → [tu contraseña segura]
"Confirmar contraseña:" → [repetir la contraseña]
"Motor de base de datos:" → MDB
"¿Quiere que se elimine la base de datos cuando se purgue slapd?" → No
"¿Mover la base de datos antigua?" → Sí

Verificar que LDAP se esté ejecutando correctamente

sudo systemctl status slapd

Comprobar la conexión LDAP básica

ldapsearch -x -H ldap://localhost -b dc=correos,dc=com -D "cn=admin,dc=correos,dc=com" -W

Instalar phpLDAPadmin para la gestión gráfica

sudo apt install phpldapadmin -y

Configurar phpLDAPadmin

Edita el archivo de configuración:

sudo nano /etc/phpldapadmin/config.php

Busca y modifica las siguientes líneas:

$servers->setValue('server','host','127.0.0.1');
$servers->setValue('server','base',array('dc=correos,dc=com'));
$servers->setValue('login','bind_id','cn=admin,dc=correos,dc=com');

Y cambia esta línea:

$servers->setValue('login','anon_bind',true);

por:

$servers->setValue('login','anon_bind',false);

Reinicia el servidor web:

sudo systemctl restart apache2

3. Crear estructura LDAP para correos.com

Crear unidades organizativas

Crea un archivo para las unidades organizativas:

nano ~/ou.ldif

Con el siguiente contenido:

dn: ou=grupos,dc=correos,dc=com
objectClass: organizationalUnit
ou: grupos

dn: ou=usuarios,dc=correos,dc=com
objectClass: organizationalUnit
ou: usuarios

Aplica los cambios:

ldapadd -x -D cn=admin,dc=correos,dc=com -W -f ~/ou.ldif

Crear grupos LDAP

Crea un archivo para los grupos:

nano ~/grupos.ldif

Con el siguiente contenido:

dn: cn=administradores,ou=grupos,dc=correos,dc=com
objectClass: posixGroup
cn: administradores
gidNumber: 1000

dn: cn=desarrolladores,ou=grupos,dc=correos,dc=com
objectClass: posixGroup
cn: desarrolladores
gidNumber: 1001

dn: cn=usuarios,ou=grupos,dc=correos,dc=com
objectClass: posixGroup
cn: usuarios
gidNumber: 1002

Aplica los cambios:

ldapadd -x -D cn=admin,dc=correos,dc=com -W -f ~/grupos.ldif

Crear usuarios LDAP

Primero, genera contraseñas encriptadas para los usuarios:

slappasswd -s "password123"

Anota el hash resultante para usarlo en el siguiente archivo.

Crea un archivo para los usuarios:

nano ~/usuarios.ldif

Con el siguiente contenido (reemplazando {HASH} con el hash que generaste):

dn: uid=admin,ou=usuarios,dc=correos,dc=com
objectClass: inetOrgPerson
objectClass: posixAccount
objectClass: shadowAccount
uid: admin
sn: Admin
givenName: Admin
cn: Admin User
displayName: Admin User
uidNumber: 1000
gidNumber: 1000
userPassword: {HASH}
loginShell: /bin/bash
homeDirectory: /home/admin
mail: admin@correos.com

dn: uid=developer,ou=usuarios,dc=correos,dc=com
objectClass: inetOrgPerson
objectClass: posixAccount
objectClass: shadowAccount
uid: developer
sn: Developer
givenName: Dev
cn: Dev User
displayName: Developer User
uidNumber: 1001
gidNumber: 1001
userPassword: {HASH}
loginShell: /bin/bash
homeDirectory: /home/developer
mail: developer@correos.com

dn: uid=user,ou=usuarios,dc=correos,dc=com
objectClass: inetOrgPerson
objectClass: posixAccount
objectClass: shadowAccount
uid: user
sn: User
givenName: Normal
cn: Normal User
displayName: Normal User
uidNumber: 1002
gidNumber: 1002
userPassword: {HASH}
loginShell: /bin/bash
homeDirectory: /home/user
mail: user@correos.com

Aplica los cambios:

ldapadd -x -D cn=admin,dc=correos,dc=com -W -f ~/usuarios.ldif

Asociar usuarios a grupos

Crea un archivo para las membresías:

nano ~/miembros.ldif

Con el siguiente contenido:

dn: cn=administradores,ou=grupos,dc=correos,dc=com
changetype: modify
add: memberUid
memberUid: admin

dn: cn=desarrolladores,ou=grupos,dc=correos,dc=com
changetype: modify
add: memberUid
memberUid: developer

dn: cn=usuarios,ou=grupos,dc=correos,dc=com
changetype: modify
add: memberUid
memberUid: user

Aplica los cambios:

ldapmodify -x -D cn=admin,dc=correos,dc=com -W -f ~/miembros.ldif

Verificar la estructura LDAP

ldapsearch -x -H ldap://localhost -b dc=correos,dc=com -D "cn=admin,dc=correos,dc=com" -W

4. Instalación y configuración de Keycloak

Descargar e instalar Keycloak

# Crear directorio para Keycloak
mkdir -p ~/keycloak
cd ~/keycloak

# Descargar la última versión de Keycloak
wget https://github.com/keycloak/keycloak/releases/download/21.1.1/keycloak-21.1.1.tar.gz

# Extraer el archivo
tar -xvzf keycloak-21.1.1.tar.gz

# Mover a una ubicación más adecuada
sudo mv keycloak-21.1.1 /opt/keycloak

# Crear un usuario para Keycloak
sudo useradd -r -s /sbin/nologin keycloak

# Asignar permisos
sudo chown -R keycloak:keycloak /opt/keycloak

Configurar usuario administrador inicial para Keycloak

Crea un archivo de propiedades:

sudo nano /opt/keycloak/conf/keycloak.conf

Agrega estas líneas:

# Configuración básica
http-port=8080
https-port=8443
hostname=localhost

# Configuración de administrador inicial
http-enabled=true

Iniciar Keycloak en modo desarrollo

cd /opt/keycloak
export KEYCLOAK_ADMIN=admin
export KEYCLOAK_ADMIN_PASSWORD=admin
sudo -u keycloak bin/kc.sh start-dev

Esto iniciará Keycloak con un usuario administrador "admin" y contraseña "admin".

Configurar Keycloak como servicio

En otra terminal, crea un archivo de servicio systemd:

sudo nano /etc/systemd/system/keycloak.service

Con el siguiente contenido:

[Unit]
Description=Keycloak Application Server
After=network.target

[Service]
Type=idle
User=keycloak
Group=keycloak
Environment="KEYCLOAK_ADMIN=admin"
Environment="KEYCLOAK_ADMIN_PASSWORD=admin"
ExecStart=/opt/keycloak/bin/kc.sh start-dev
TimeoutStartSec=600
TimeoutStopSec=600

[Install]
WantedBy=multi-user.target

En el futuro, podrás habilitar e iniciar el servicio con:

sudo systemctl daemon-reload
sudo systemctl enable keycloak
sudo systemctl start keycloak

5. Configuración de Keycloak en la interfaz web

Ahora puedes acceder a la consola de administración de Keycloak en http://localhost:8080/admin/ e iniciar sesión con:

Usuario: admin
Contraseña: admin

Crear un nuevo Reino (Realm)

Haz clic en el menú desplegable superior izquierdo que dice "master"
Selecciona "Create Realm"
Ingresa el nombre: angular-app
Haz clic en "Create"

Configurar la Federación de Usuarios LDAP

En el menú lateral izquierdo, selecciona "User Federation"
Haz clic en "Add provider" → "ldap"
Completa los siguientes campos:
- Console Display Name: LDAP
- Vendor: Other
- Connection URL: ldap://localhost:389
- Enable StartTLS: OFF
- Bind Type: simple
- Bind DN: cn=admin,dc=correos,dc=com
- Bind Credential: (la contraseña de admin LDAP)
- Edit Mode: WRITABLE
- Users DN: ou=usuarios,dc=correos,dc=com
- Username LDAP attribute: uid
- RDN LDAP attribute: uid
- UUID LDAP attribute: entryUUID
- User Object Classes: inetOrgPerson, posixAccount
- Custom User LDAP Filter: (dejar en blanco)
- Search Scope: One Level
Haz clic en "Test connection" y "Test authentication" para verificar
Guarda la configuración
En la pantalla del proveedor LDAP, ve a la pestaña "Synchronization"
Haz clic en "Sync all users"

Configurar el Mapeo de Grupos LDAP

En la pantalla del proveedor LDAP, ve a la pestaña "Mappers"
Haz clic en "Create"
Completa:
- Name: group-mapper
- Mapper Type: group-ldap-mapper
- LDAP Groups DN: ou=grupos,dc=correos,dc=com
- Group Object Classes: posixGroup
- Membership LDAP Attribute: memberUid
- Group Name LDAP Attribute: cn
- User Roles Retrieve Strategy: LOAD_GROUPS_BY_MEMBER_ATTRIBUTE
- Member-Of LDAP Attribute: memberOf
- Mapped Group Attributes: (dejar en blanco)
- Drop non-existing groups during sync: ON
Haz clic en "Save"
En la pantalla del mapper, haz clic en "Sync LDAP Groups to Keycloak"

Crear un Cliente para Angular

En el menú lateral izquierdo, selecciona "Clients"
Haz clic en "Create client"
Completa:
- Client type: OpenID Connect
- Client ID: angular-app
- Name: Angular Application
- Haz clic en "Next"
En la siguiente pantalla:
- Client authentication: ON
- Authorization: OFF
- Haz clic en "Next"
En la siguiente pantalla:
- Root URL: http://localhost:4200
- Home URL: /
- Valid redirect URIs: http://localhost:4200/*
- Web origins: http://localhost:4200
- Haz clic en "Save"
En la pestaña "Credentials" del cliente, copia el "Client secret" (lo necesitarás para la aplicación Angular)

6. Configuración de una aplicación Angular

Primero, instala Node.js y npm:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

Crear una aplicación Angular

# Instalar Angular CLI
npm install -g @angular/cli

# Crear una nueva aplicación
ng new angular-keycloak-app
cd angular-keycloak-app

# Instalar la biblioteca para integrar Keycloak
npm install keycloak-angular keycloak-js

Configurar Keycloak en Angular

Crea un archivo de configuración en src/assets/keycloak.json:

{
  "realm": "angular-app",
  "auth-server-url": "http://localhost:8080/",
  "resource": "angular-app",
  "credentials": {
    "secret": "TU_CLIENT_SECRET_AQUÍ"
  }
}

Modifica el archivo src/app/app.module.ts:

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: 'http://localhost:8080',
        realm: 'angular-app',
        clientId: 'angular-app'
      },
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          window.location.origin + '/assets/silent-check-sso.html'
      }
    });
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    KeycloakAngularModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Crea un archivo src/assets/silent-check-sso.html:

<html>
<body>
  <script>
    parent.postMessage(location.href, location.origin);
  </script>
</body>
</html>

Crear un servicio de autenticación

ng generate service auth

Edita src/app/auth.service.ts:

import { Injectable } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';
import { KeycloakProfile } from 'keycloak-js';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private keycloak: KeycloakService) { }

  public getLoggedUser(): Promise<KeycloakProfile | null> {
    return this.keycloak.loadUserProfile();
  }

  public login(): void {
    this.keycloak.login();
  }

  public logout(): void {
    this.keycloak.logout();
  }

  public isLoggedIn(): Promise<boolean> {
    return this.keycloak.isLoggedIn();
  }

  public getRoles(): string[] {
    return this.keycloak.getUserRoles();
  }
}

Crear un guardia para rutas protegidas

ng generate guard auth

Edita src/app/auth.guard.ts:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard extends KeycloakAuthGuard {
  
  constructor(
    protected override readonly router: Router,
    protected readonly keycloak: KeycloakService
  ) {
    super(router, keycloak);
  }
  
  public async isAccessAllowed(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean | UrlTree> {
    
    // Verifica si el usuario está autenticado
    if (!this.authenticated) {
      await this.keycloak.login({
        redirectUri: window.location.origin + state.url,
      });
      return false;
    }

    // Obtiene los roles requeridos desde la ruta
    const requiredRoles = route.data['roles'];

    // Permite el acceso si no hay roles requeridos
    if (!requiredRoles || requiredRoles.length === 0) {
      return true;
    }

    // Verifica si el usuario tiene al menos uno de los roles requeridos
    return requiredRoles.some((role: string) => this.roles.includes(role));
  }
}

Configurar las rutas con protección

Modifica src/app/app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { AppComponent } from './app.component';

const routes: Routes = [
  {
    path: 'admin',
    component: AppComponent,
    canActivate: [AuthGuard],
    data: { roles: ['administradores'] }
  },
  {
    path: 'developer',
    component: AppComponent,
    canActivate: [AuthGuard],
    data: { roles: ['desarrolladores'] }
  },
  {
    path: 'user',
    component: AppComponent,
    canActivate: [AuthGuard],
    data: { roles: ['usuarios'] }
  },
  {
    path: '',
    component: AppComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Modificar el componente principal

Edita src/app/app.component.ts:

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';
import { KeycloakProfile } from 'keycloak-js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'angular-keycloak-app';
  isLoggedIn = false;
  userProfile: KeycloakProfile | null = null;
  userRoles: string[] = [];

  constructor(private authService: AuthService) {}

  async ngOnInit() {
    this.isLoggedIn = await this.authService.isLoggedIn();
    
    if (this.isLoggedIn) {
      this.userProfile = await this.authService.getLoggedUser();
      this.userRoles = this.authService.getRoles();
    }
  }

  login() {
    this.authService.login();
  }

  logout() {
    this.authService.logout();
  }
}

Edita src/app/app.component.html:

<div class="container mt-5">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h2>Demo Keycloak con LDAP - Correos.com</h2>
        </div>
        <div class="card-body">
          <div *ngIf="isLoggedIn; else loginButton">
            <h3>Bienvenido, {{ userProfile?.firstName }} {{ userProfile?.lastName }}</h3>
            <p>Email: {{ userProfile?.email }}</p>
            <p>Nombre de Usuario: {{ userProfile?.username }}</p>
            
            <h4>Tus Roles:</h4>
            <ul>
              <li *ngFor="let role of userRoles">{{ role }}</li>
            </ul>
            
            <button class="btn btn-danger" (click)="logout()">Cerrar Sesión</button>
          </div>
          
          <ng-template #loginButton>
            <p>Por favor inicia sesión para acceder al sistema</p>
            <button class="btn btn-primary" (click)="login()">Iniciar Sesión</button>
          </ng-template>
        </div>
      </div>
    </div>
  </div>
</div>

Agrega Bootstrap a src/index.html:

<head>
  <!-- Otras etiquetas -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

Ejecutar la aplicación

ng serve

Abre http://localhost:4200 en tu navegador.

7. Arquitectura del sistema

La arquitectura del sistema está compuesta por los siguientes componentes:

OpenLDAP: Directorio de usuarios y grupos (puerto 389)
phpLDAPadmin: Interfaz gráfica para administrar LDAP (puerto 80)
Keycloak: Servidor de autenticación y autorización (puerto 8080)
Aplicación Angular: Cliente que utiliza el SSO de Keycloak (puerto 4200)

La estructura del directorio LDAP para correos.com es:

dc=correos,dc=com (raíz del directorio)
- ou=usuarios (unidad organizativa para usuarios)
  - uid=admin (usuario administrador)
  - uid=developer (usuario desarrollador)
  - uid=user (usuario normal)
- ou=grupos (unidad organizativa para grupos)
  - cn=administradores (grupo de administradores)
  - cn=desarrolladores (grupo de desarrolladores)
  - cn=usuarios (grupo de usuarios)

8. Resolución de problemas comunes

Problema: "ldap_bind: Invalid credentials (49)"

Este error ocurre cuando intentas conectarte a LDAP con credenciales incorrectas. Para resolverlo:

Verifica que estás usando el dominio correcto: dc=correos,dc=com
Asegúrate de usar el DN correcto: cn=admin,dc=correos,dc=com
Comprueba que la contraseña de administrador es correcta

Si olvidaste la contraseña, puedes restablecerla:

sudo dpkg-reconfigure slapd

O también:

sudo slappasswd
# Copia el hash generado
sudo nano /etc/ldap/slapd.d/cn=config/olcDatabase={1}mdb.ldif
# Busca olcRootPW y reemplaza el valor con el nuevo hash
sudo systemctl restart slapd

Problema: No puedes conectarte a LDAP en absoluto

# Verifica que el servicio esté ejecutándose
sudo systemctl status slapd

# Reinicia el servicio si es necesario
sudo systemctl restart slapd

# Verifica que el puerto esté abierto
sudo netstat -tulpn | grep 389

Problema: Keycloak no se inicia

# Verifica los logs
sudo journalctl -u keycloak

# Asegúrate de que Java esté instalado correctamente
java -version

# Verifica los permisos
sudo ls -la /opt/keycloak

Problema: La aplicación Angular no puede conectarse a Keycloak

Verifica que Keycloak esté en ejecución
Comprueba la URL del servidor Keycloak en la configuración de Angular
Asegúrate de que el cliente esté correctamente configurado en Keycloak
Verifica el Client Secret
Comprueba las URLs de redirección

9. Verificación y prueba del sistema

Verificar que Keycloak esté sincronizando correctamente con LDAP

Inicia sesión en la consola de administración de Keycloak (http://localhost:8080/admin/)
Navega a "Users" en el reino "angular-app"
Deberías ver los usuarios de LDAP: admin, developer y user
Navega a "Groups" y verifica que los grupos de LDAP estén presentes

Probar la aplicación Angular

Asegúrate de que Keycloak esté ejecutándose
Inicia la aplicación Angular con ng serve
Navega a http://localhost:4200
Haz clic en "Iniciar Sesión"
Deberías ser redirigido a la pantalla de inicio de sesión de Keycloak
Inicia sesión con uno de los usuarios LDAP:
- Usuario: admin, Contraseña: password123
- Usuario: developer, Contraseña: password123
- Usuario: user, Contraseña: password123
Después de iniciar sesión, serás redirigido de vuelta a la aplicación
La aplicación mostrará tu perfil y roles

10. Resumen

Esta configuración proporciona un sistema completo de gestión de identidades y acceso con:

Autenticación centralizada: Los usuarios solo necesitan recordar un conjunto de credenciales
Gestión de usuarios unificada: Todos los usuarios se administran en LDAP
Control de acceso basado en roles: Las rutas y funcionalidades pueden ser protegidas según los roles del usuario
Experiencia de inicio de sesión único (SSO): Una vez autenticado, el usuario puede acceder a todas las aplicaciones integradas

Este sistema es adecuado para entornos empresariales donde se requiere un control de acceso detallado y una gestión centralizada de usuarios.

La implementación es nativa en un sistema Ubuntu, lo que la hace ideal para despliegues en servidores VPS o entornos similares sin necesidad de contenedores.

22 KiB Raw Blame History

Tutorial: Implementación de Keycloak con LDAP para Angular

Índice

1. Preparación del entorno Ubuntu

2. Instalación y configuración de OpenLDAP

Instalar OpenLDAP y utilidades

Reconfigurar LDAP con el dominio correcto

Verificar que LDAP se esté ejecutando correctamente

Comprobar la conexión LDAP básica

Instalar phpLDAPadmin para la gestión gráfica

Configurar phpLDAPadmin

3. Crear estructura LDAP para correos.com

Crear unidades organizativas

Crear grupos LDAP

Crear usuarios LDAP

Asociar usuarios a grupos

Verificar la estructura LDAP

4. Instalación y configuración de Keycloak

Descargar e instalar Keycloak

Configurar usuario administrador inicial para Keycloak

Iniciar Keycloak en modo desarrollo

Configurar Keycloak como servicio

5. Configuración de Keycloak en la interfaz web

Crear un nuevo Reino (Realm)

Configurar la Federación de Usuarios LDAP

Configurar el Mapeo de Grupos LDAP

Crear un Cliente para Angular

6. Configuración de una aplicación Angular

Crear una aplicación Angular

Configurar Keycloak en Angular

Crear un servicio de autenticación

Crear un guardia para rutas protegidas

Configurar las rutas con protección

Modificar el componente principal

Ejecutar la aplicación

7. Arquitectura del sistema

8. Resolución de problemas comunes

Problema: "ldap_bind: Invalid credentials (49)"

Problema: No puedes conectarte a LDAP en absoluto

Problema: Keycloak no se inicia

Problema: La aplicación Angular no puede conectarse a Keycloak

9. Verificación y prueba del sistema

Verificar que Keycloak esté sincronizando correctamente con LDAP

Probar la aplicación Angular

10. Resumen

22 KiB

Raw Blame History