Skip to main content

🚀 Alta una Nueva Aplicación en Keycloak para uso OAuth 2.0

Este documento explica cómo crear una nueva aplicación en Keycloak para implementar OAuth 2.0.

1. Accede a la Consola de Administración​

  1. Abre tu navegador y accede a:

    http://<host>:8080/admin

  2. Inicia sesión con tu usuario administrador.

2. Crear un Nuevo Realm(Reyno)​

Si ya tienes un realm configurado, salta al paso 3.

  1. En el menú izquierdo, selecciona Add Realm.
  2. Ingresa un nombre para el Realm (por ejemplo, microfrontend-apps).
  3. Haz clic en Create.

3. Crear un Nuevo Cliente (Aplicación)​

  1. Dentro del realm en el que estás trabajando, selecciona Clients en el menú lateral izquierdo.
  2. Haz clic en Create.

Configuración del Cliente (Aplicación):​

  • Client ID: Ingresa un nombre único para tu aplicación (por ejemplo, angular-dashboard).
  • Client Protocol: Selecciona openid-connect.
  • Root URL: Ingresa la URL principal (por ejemplo, http://localhost:4200).
  • Haz clic en Save.

4. Configuración del Cliente OAuth 2.0​

Después de guardar, configura estos parámetros en la pestaña Settings:

  1. Access Type: Selecciona Public (para una SPA de Angular).
  2. Valid Redirect URIs:
    • Agrega: http://localhost:4200/*.
  3. Web Origins:
    • Agrega: http://localhost:4200.

Haz clic en Save.

5. Crear un Rol y Configurar el Alcance (Scope)​

  1. En el menú del cliente, selecciona Roles.
  2. Haz clic en Add Role y crea un rol (por ejemplo, user).
  3. Ve a Mappers → Create y configura:
    • Name: roles
    • Mapper Type: User Realm Role
    • Token Claim Name: roles
    • Activa Add to access token y guarda los cambios.

6. Crear un Usuario para la Prueba​

  1. Selecciona Users → Add User.
  2. Ingresa un Username (por ejemplo, demo-user) y haz clic en Save.
  3. En la pestaña Credentials, establece una contraseña.
  4. Asigna el rol user en Role Mappings.

7. Obtener el Endpoint OAuth 2.0​

  1. Ve a Realm Settings → OpenID Endpoint Configuration.
  2. Copia los Authorization y Token Endpoints.

8. Configuración en el Frontend (Angular)​

Instalar la Librería de Keycloak​

npm install keycloak-js

Configurar Keycloak en Angular​

keycloak.service.ts​

import Keycloak from 'keycloak-js';

const keycloak = new Keycloak({
  url: 'http://localhost:8080',
  realm: 'microfrontend-apps',
  clientId: 'angular-dashboard',
});

export function initializeKeycloak(): () => Promise<void> {
  return () =>
    keycloak.init({
      onLoad: 'login-required',
    });
}

export { keycloak };

app.module.ts​

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { initializeKeycloak, keycloak } from './keycloak.service';

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

app.component.ts​

import { Component } from '@angular/core';
import { keycloak } from './keycloak.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Bienvenido a la Aplicación Angular</h1>
    <button (click)="logout()">Cerrar Sesión</button>
  `,
})
export class AppComponent {
  logout() {
    keycloak.logout();
  }
}

9. Prueba de la Configuración​

  1. Inicia tu aplicación Angular: 
    ng serve
  2. Ve a http://localhost:4200. Deberías ser redirigido a Keycloak para iniciar sesión.
  3. Inicia sesión con tu usuario de prueba.
  4. Serás redirigido de nuevo a tu aplicación Angular.

Conclusión​

Siguiendo estos pasos, habrás configurado correctamente una aplicación en Keycloak para autenticación con OAuth 2.0.