@clavisco/login

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

Correcciones (Fixes)

• Ahora la propiedad EnforcePasswordPolicy aplica de manera correcta la validacion de login

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?

1. Primero debemos cumplir las depencias mencionadas al inicio de este documento
2. Ejecutar el comando npm i @clavisco/login en el directorio root del proyecto
3. Importar el módulo LoginModule en el app.module.ts o en el módulo donde desea utilizar el login.
4. Inyectar el servicio de Linker en el controlador para realizar la comunicación con el componente constructor(@Inject('LinkerService') private linkerervice: LinkerService)
5. 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>

6. 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
  }
}

7. 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);
  }
}

9. 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);
  }
}

10. Ya con esto tenemos una implementación básica del componente login

Recomendaciones

• Visitar Video explicativo sobre el uso de @clavisco/login
• Visitar Google reCaptcha docs para validar token en backend

---

ClavisCo ©