Fge-auth-component NPM

FGE-AUTH-COMPONENT-VITE

Componente

Recommended IDE Setup

VS Code + Volar

How to use

1.- Install component

$ npm i fge-auth-component

Dependencias requeridas con sus respectivas versiones que fuuncionan en el componente:
 "axios": "^1.4.0",
 "crypto-js": "^4.2.0",
 "luxon": "^3.4.4",
 "pinia": "^2.1.7",
 "pinia-plugin-store": "^2.1.33",
 "uuid": "^9.0.1",
 "vee-validate": "^4.12.6",
 "vue": "^3.0.0",
 "yup": "^1.3.3"

El componente utiliza la fuente 'Roboto' y 'Roboto Condensed' que deben ser agregados en el proyecto que se utilizara para el correcto visualizado

2.- En main.ts file del proyecto de vue

import FgeAuthPlugin from 'fge-auth-component';
import '../node_modules/fge-auth-component/dist/fge-auth-component.css';

...

app.use(FgeAuthPlugin, {
   useYupLocale?: boolean; //false
   baseUrl: string; -> URL BASE DE LOS SERVICIOS DE SEGURIDAD - https://url
   aplicacion: string; -> Identificador de la aplicacion
   rrhhUrl: string; -> url de rrhh de donde salen las fotos  https://url/api
   API_SERVER_REDIRECT: string, -> URL DE REDIRECCION DE CIUDADANIA DIGITAL
   ENABLE_CHANGE_PASSWORD: false -> false por default -> habilita que se muestre el mensaje de cambio de contraseña
   ENABLE_FORCE_CHANGE_PASSWORD: false -> false por default -> habilita o deshabilita que se fuerce el cambio de password
  }
);

Componentes

FgeLoginComponent
Añadir el componente dentro de una página en blanco.

 <FgeLoginComponent @onLogin="function"/>

 - El componente envia por el evento @onLogin la señal cuando se ha realizado un inicio de
 sesión correcto ya sea por ciudadanía digital o el login normal.
 - El componente envia el evento @onError cuando existe algun tipo de error.

FgeAuthMenuComponent
Menu que contiene la información del usuario logeado y los botones de ver perfil y cerrar sesión. <FgeAuthMenuComponent @onLogout="redirectOnLogout"/>

 - El componente envia por el evento @onLogout la señal cuando se ha realizado la
 acción de cerrar sesión.

useFgeAuthLoginStore

El store de pinia que contiene toda la información del usuario logueado

 const store = useFgeAuthLoginStore();

 // store.userState
 interface{
    token: string | undefined;
    refreshToken: string | undefined;
    user -> información del usuario
    funcionario: any; -> informacion del funcionario, si es que existe o undefined
    isAuth: boolean;
    binnacleId?: string | undefined; -> binnacleId de ciudadania digital
    apps: string[];
    roles: string[];
    permisos: string[];
 }