@clavisco/login NPM

Acerca de @clavisco/login

Token: Login

Este componente permite solicitar un token a un api y a su vez almancenar la sesión respondida por el api.

¿Qué resuelve?

Estandariza el formato y arquitectura de las pantalla de login, al mismo tiempo que, reduce considerablemente el tiempo de implementación.

Dependencias

@clavisco/core
@clavisco/linker
@clavisco/alerts
@clavisco/overlay
ng-recaptcha

Resumen de versión

Características (Features)

Posibilidad de deshabilitar la validación de la longitud de la contraseña

Correcciones (Fixes)

No se mostraba mensaje cuando contraseña de formulario de login tenia una logitud menor a 8 caracteres

Login

Está compuesta por un módulo y su respectivo componente visual cl-login a continuacion se detalla sus diferentes atributos:
ShouldResolve: boolean(Opcional): por defecto se inicializa en verdadero, esto indica que el componente por defecto va resolver todas las peticiones. Por ejemplo, mostrar todas las alertas o errores que se generen en el backend
ApiUrl: string(Requerido): es la url que el componente usará para hacer el consumo del api. Debe tener el siguiente formato. https://miurl.com/
PathToRedirect: string(Requerido): es la ruta que el componente usará para redirigirse en caso de ser exitosa la resolución. Por ejemplo, home
SesionName: string(Opcional): es el nombre que se le asignará a la variable que contiene la información en el local storage.
En caso de no suministar ningún nombre el componente le asignará uno por defecto
~~OverlayMessage~~: string(Opcional) Deprecated: Este es el mensaje que aparecerá cuando se levante el overlay siempre y cuando no este la configuración global.
En caso de no suministrar ningún mensaje el componente asignará uno por defecto
LogoPath: string(Opcional): Logo de la compañía que será mostrado en la cabecera del componente.
En caso de no suministrar ningún logo se asignará uno por defecto. (Importante posicionar el recurso en la carpeta de assets)
Id:string(Requerido): Identificador de componente login
DotNetApiType: 'FRAMEWORK' | 'CORE': Permite indicar cual tipo de api utilizara al realizar login, en el caso de utilizar FRAMEWORK (valor por defecto) este envia los datos por medio de x-www-form-urlencoded; en caso de utilizar CORE los datos se envia como JSON.
UseReCaptcha: boolean(Opcional): Indica si utilizará Google reCaptcha para validar si las transacciones son realizadas por bots, por defecto esta desactivado
EnforcePasswordPolicy: boolean(Opcional): Indica si se valida la longitud de la contraseña, por defecto es true

Configuraciones globales

Este componente posee soporte para las siguientes configuraciones globales:
'Shared': Con este token se podra configurar el 'apiUrl' al cual se conectara el login.

Configurar apiUrl

Para configurar el apiUrl se tiene que establecer la configuracion global en el app.component.ts de la siguiente manera
   Repository.Behavior.SetTokenConfiguration({
     token: 'Shared', 
     setting: 'apiUrl',
     value: 'http://localhost:56671/'
  });
Los siguientes namespaces Repository.Behavior.SetTokenConfiguration se obtienen del paquete @clavisco/core.

Configurar Recuperación de contraseña

Para esta funcionalidad tambien se tiene que configurar el API con CL.AUTH.
Se recomienda agregar estas configuraciones en el app.component.ts.
Envio de correo de recuperación de contraseña
Para configurar la funcionalidad de envio de correo de recuperación de contraseña, se debe agregar la siguiente configuración global
Repository.Behavior.SetTokenConfiguration({
  token: Structures.Enums.TOKENS.LOGN,
  setting: 'sendRecoverPasswordEmail',
  value: {
    urlVariableToReplaceWithEmail: '#EMAIL', // Variable que se utilizara para agregar el correo del usuario
    endpointToRequest: 'api/Users/#EMAIL/RecoverPassword' // Endpoint para solicitar correo de recuperacion de contraseña
  } as Login.Structures.ISendRecoverPasswordEmailConfig
})
Recuperación de contraseña
Para habilitar y configurar la funcionalidad de recuperación de contraseña se debe agregar la siguiente configuración global
Repository.Behavior.SetTokenConfiguration({
  token: Structures.Enums.TOKENS.LOGN,
  setting: 'recoverPassword',
  value: {
    endpointToRequest: '<endpoint para recuperacion de contraseña>'
  }  as Login.Structures.IChangePasswordConfig
})

Configurar cambio de contrasaña

Para esta funcionalidad tambien se tiene que configurar el API con CL.AUTH.
Se recomienda agregar estas configuraciones en el app.component.ts.
Configuración global de cambio de contraseña
Para habilitar y configurar la funcionalidad de cambio de contraseña se debe agreagar la siguiente configuración global
Repository.Behavior.SetTokenConfiguration({
  token: Structures.Enums.TOKENS.LOGN,
  setting: 'changePassword',
  value: {
    endpointToRequest: '<endpoint para cambio de contraseña>'
  } as Login.Structures.IChangePasswordConfig
})

Configurar reCaptcha

Instalar el ng-recaptcha indicado en las dependencia del componente y agregar el atributo UseReCaptcha en verdadero
Configurar Key en provider
Configurar en el modulo principal del app el siguiente provider con la site key requerida
...
{
  provide: RECAPTCHA_V3_SITE_KEY,
  useValue: "<SiteKey>"
}
...
El token generado por captcha es enviado en el login como otro parametro con el nombre reCaptchaToken y debe ser validado con el endpoint indicado en la documentacion de reCaptcha
POST https://www.google.com/recaptcha/api/siteverify
Accept application/json
Content-Type application/x-www-form-urlencoded

secret={{secretToken}}&response={{responseToken}}

Configuración de mensajes de overlays en consultas

Se debe agregar la configuracion global overlaysConfiguration en el app.component.ts

Repository.Behavior.SetTokenConfiguration({
  token: Structures.Enums.TOKENS.LOGN,
  setting: 'overlaysConfiguration',
  value: JSON.stringify({
    loginMessage: 'My message',
    changePasswordMessage: 'My message',
    sendRecoverEmailMessage: 'My message',
    recoverPasswordMessage: 'My message'
  } as Login.Structures.IOverlaysGlobalConfiguration)
});

¿Cómo se usa?

Primero debemos cumplir las depencias mencionadas al inicio de este documento
Ejecutar el comando npm i @clavisco/login en el directorio root del proyecto
Importar el módulo LoginModule en el app.module.ts o en el módulo donde desea utilizar el login.
Inyectar el servicio de Linker en el controlador para realizar la comunicación con el componente constructor(@Inject('LinkerService') private linkerervice: LinkerService)
Ejemplo de implementacion del componente en el template html
<cl-login 
  [Id]="LoginId"
  [ShouldResolve]="ShouldResolve"
  [ApiUrl]="ApiUrl"
  [PathToRedirect]="PathToRedirect"
  [SesionName]="SesionName"
  [OverlayMessage]="OverlayMessage"
  [LogoPath]="LogoPath"
  [DotNetApiType]="DotNetApiType"
  [UseReCaptcha]="UseReCaptcha">
</cl-login>
Si desea definir de forma personalizada como se presentan el overlay al intentar iniciar sesión, puede registrar un evento de tipo OVERLAY_ON asignando la siguiente función como se muestra en el ejemplo:
ngOnInit(): void {
  Register<CL_CHANNEL>(this.LoginId, CL_CHANNEL.OVERLAY_ON, this.RaiseBlockUI, this.callbacks);
}

RaiseBlockUI = (_event: ICLEvent): void => {
  if (_event) {
    // Code to do on overlay up
  }
}
Si desea definir de forma personalizada como se detiene el overlay al finalizar el proceso de sesión, puede registrar un evento de tipo OVERLAY_OFF asignando la siguiente función como se muestra en el ejemplo:
ngOnInit(): void {
  Register<CL_CHANNEL>(this.LoginId, CL_CHANNEL.OVERLAY_OFF, this.DropBlockUI, this.callbacks);
}

DropBlockUI = (_event: ICLEvent): void => {
  if (_event) {
    // Code to do on overlay down
  }
}
Nota: Los puntos 6 y 7 requieren que la propiedad ShouldResolve se encuentre desactivada 8. Puede obtener la respuesta del inicio de sesión registando un evento de tipo OUTPUT y asignando la siguiente funcion como se muestra en el ejemplo:
ngOnInit(): void {
  Register<CL_CHANNEL>(this.LoginId, CL_CHANNEL.OUTPUT, this.TransactionResult, this.callbacks);
}

TransactionResult = (_event: ICLEvent): void => {
  if (_event) {
    const SESION_RESULT = JSON.parse(_event.Data);
  }
}
Puede obtener los errores ocurridos durante el inicio de sesión registando un evento de tipo ERROR y asignando la siguiente función como se muestra en el ejemplo:
ngOnInit(): void {
  Register<CL_CHANNEL>(this.LoginId, CL_CHANNEL.ERROR, this.LoginError, this.callbacks);
}

LoginError = (_event: ICLEvent): void => {
  if (_event) {
    const ERROR_RESULT = JSON.parse(_event.Data);
  }
}
Ya con esto tenemos una implementación básica del componente login