@mh-dinafi-frmk/shared-lib-angular

Librería compartida de Angular para el Ministerio de Hacienda - DINAFI.

Instalación

npm install @mh-dinafi-frmk/shared-lib-angular

Configuración

Configuración Básica (Requerida)

La librería requiere que configures los valores críticos del servidor de configuración y el identificador del frontend. Esto se hace durante la inicialización de tu aplicación.

Opción 1: Usando provideFrmkConfig() en app.config.ts (Recomendado)

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideFrmkConfig } from '@mh-dinafi-frmk/shared-lib-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... otros providers
    provideFrmkConfig({
      configServerHost: 'config-server.tu-dominio.com',  // URL del Config Server
      frontendId: 'mi-aplicacion-frontend',               // ID del frontend en el Config Server
      
      // Opcionales (tienen valores por defecto):
      configServicePath: '/configuration',                // Path del servicio de configuración
      realm: 'DINAFI',                                    // Realm de Keycloak
      production: false,                                  // Modo producción
      requireHttps: true,                                 // Requerir HTTPS
      showDebugInformation: false                         // Mostrar información de debug
    })
  ]
};

Opción 2: Inicialización Manual (Para casos especiales)

// main.ts o app.component.ts
import { initializeLibraryConfig } from '@mh-dinafi-frmk/shared-lib-angular';

// Inicializar antes de usar cualquier servicio de la librería
initializeLibraryConfig({
  configServerHost: 'config-server.tu-dominio.com',
  frontendId: 'mi-aplicacion-frontend'
});

Verificar si la Librería está Configurada

import { isLibraryConfigured, getLibraryConfig } from '@mh-dinafi-frmk/shared-lib-angular';

if (isLibraryConfigured()) {
  const config = getLibraryConfig();
  console.log('Config Server:', config.configServerHost);
  console.log('Frontend ID:', config.frontendId);
}

Uso de Servicios

AuthService

import { Component, inject } from '@angular/core';
import { AuthService } from '@mh-dinafi-frmk/shared-lib-angular';

@Component({
  selector: 'app-root',
  template: `...`
})
export class AppComponent {
  private authService = inject(AuthService);

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

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

  get isAuthenticated(): boolean {
    return this.authService.isAuthenticated();
  }

  get userName(): string | null {
    return this.authService.getUserName();
  }
}

AuthorizationService

import { Component, inject } from '@angular/core';
import { AuthorizationService } from '@mh-dinafi-frmk/shared-lib-angular';

@Component({
  selector: 'app-menu',
  template: `...`
})
export class MenuComponent {
  private authorizationService = inject(AuthorizationService);

  async loadMenu() {
    const menu = await this.authorizationService.getMenuHierarchy({
      applicationId: 'mi-app',
      userId: 'user123'
    });
    console.log('Menu items:', menu);
  }
}

ConfigService

import { Component, inject, OnInit } from '@angular/core';
import { ConfigService } from '@mh-dinafi-frmk/shared-lib-angular';

@Component({
  selector: 'app-config',
  template: `...`
})
export class ConfigComponent implements OnInit {
  private configService = inject(ConfigService);

  ngOnInit() {
    this.configService.loadConfiguration().subscribe(config => {
      console.log('Configuración cargada:', config);
    });
  }
}

Componentes

LoginComponent

import { Component } from '@angular/core';
import { LoginComponent } from '@mh-dinafi-frmk/shared-lib-angular';

@Component({
  selector: 'app-login-page',
  standalone: true,
  imports: [LoginComponent],
  template: `
    <frmk-login 
      [config]="loginConfig"
      (onLogin)="handleLogin($event)"
      (onError)="handleError($event)">
    </frmk-login>
  `
})
export class LoginPageComponent {
  loginConfig = {
    title: 'Mi Aplicación',
    logoUrl: '/assets/logo.png',
    backgroundImageUrl: '/assets/background.jpg'
  };

  handleLogin(event: any) {
    console.log('Login exitoso:', event);
  }

  handleError(error: any) {
    console.error('Error en login:', error);
  }
}

DashboardComponent

import { Component } from '@angular/core';
import { DashboardComponent, DashboardConfig } from '@mh-dinafi-frmk/shared-lib-angular';

@Component({
  selector: 'app-dashboard-page',
  standalone: true,
  imports: [DashboardComponent],
  template: `
    <frmk-dashboard [config]="dashboardConfig"></frmk-dashboard>
  `
})
export class DashboardPageComponent {
  dashboardConfig: DashboardConfig = {
    title: 'Dashboard Principal',
    showWelcomeMessage: true
  };
}

Guards

authGuard

// app.routes.ts
import { Routes } from '@angular/router';
import { authGuard } from '@mh-dinafi-frmk/shared-lib-angular';

export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard/dashboard.component'),
    canActivate: [authGuard]
  },
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component'),
    canActivate: [authGuard]
  }
];

Interfaces de Configuración

FrmkLibraryConfig

interface FrmkLibraryConfig {
  /** Host del Config Server (ej: 'config-server.dominio.com') */
  configServerHost: string;
  
  /** Identificador del frontend en el Config Server */
  frontendId: string;
  
  /** Path del servicio de configuración (default: '/configuration') */
  configServicePath?: string;
  
  /** Realm de Keycloak (default: 'DINAFI') */
  realm?: string;
  
  /** Modo producción (default: false) */
  production?: boolean;
  
  /** Requerir HTTPS (default: true) */
  requireHttps?: boolean;
  
  /** Mostrar información de debug de OAuth (default: false) */
  showDebugInformation?: boolean;
}

Scripts de Desarrollo

# Build de la librería
npm run build

# Ejecutar tests
npm run test

# Ejecutar tests con coverage
npm run test:ci

# Análisis de SonarQube
npm run sonar

# Publicar a Nexus
npm run publish:nexus

Licencia

Ministerio de Hacienda - DINAFI © 2024