Componente
npm install fge-auth-componentComponente
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
}
);
`
- FgeLoginComponent
Añadir el componente dentro de una página en blanco.
`
- 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.
`
- 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[];
}
`
- Cambiar version
- npm run build
- npm login
- npm publish
`
``