Creación de flujo de autenticación para consumo desde un iframe o ingreso directo al cliente por medio de web componets

Se requiere realizar la Creación de flujo de autenticación para consumo desde un iframe o ingreso directo al cliente por medio de web componets

Sub Tareas

[x] Realizar la integración del web componets desarrollado en el repositorio https://github.com/udistrital/web-components para el proceso de autenticación en el cliente, tener presente el flujo actual de los clientes o el cliente de planeación https://github.com/udistrital/planeacion_cliente
[x] Realizar el flujo de identificación de parámetros desde el iframe para la autenticación automática con el access token del cliente padre, si no se identifica se debe redireccionar al web component de autenticación

Criterios de aceptación

[x] Implementación de flujo de autenticación

Requerimientos

No aplica

Definition of Ready - DoR

[x] Está refinada y estimada en puntos de historia por el equipo.
[x] Incluye la descripción y criterios de aceptación, con el detalle funcional y especificaciones técnicas, de forma entendible por cualquier miembro del equipo.
[x] No tiene bloqueos que impidan su ejecución.
[x] Las dependencias entán identificadas y resueltas.
[x] Puede ser probada dentro del Sprint.

Definition of Done - DoD - Desarrollo

[x] Desarrollo en local.
[x] Push en Feature.
[x] Pruebas locales (funcionales).
[x] PR a Develop.
[x] Criterios de aceptación cumplidos.
[x] Documentación de issue realizada.
[x] Aprobada por SM/Líder técnico.

Implementación de autenticación con web component y iframe

Puesto que el cliente de syllabus estará embebido en otros clientes o tiene la posibilidad de acceder a el en solitario, es necesario manejar el proceso de autenticación de manera diferente.

Autenticación propia: Para este flujo se implementa el web_component de autenticación de la siguiente forma:

Se agrega la etiqueta ng-uui-oas, a la cual se le pasa el entorno en el cual se le esta ejecutando:
```
<ng-uui-oas  *ngIf="!loaded" [environment]="environment"></ng-uui-oas>
```

Se agrega el siguiente script en el index.html

<script src="https://pruebasassets.portaloas.udistrital.edu.co/web-components.js" defer=""></script>  <noscript>Please enable JavaScript to continue using this application.</noscript>

Se agregan las siguientes variables en el environment

{
production: false,
entorno: 'test',
autenticacion: true,
notificaciones: false,
menuApps: false,
appname: 'sga',
appMenu: 'sga
}

Se importa el siguiente modulo de angular/core y se agrega la propiedad esquemas del NgModule

import { CUSTOM_ELEMENTS_SCHEMA,NgModule } from '@angular/core';

@NgModule({
 ...
 schemas: [CUSTOM_ELEMENTS_SCHEMA]
 ...
})

En el controlador del componente principal o donde este la etiqueda ng-uui-oas se agrega la siguientes funcionalidades

const oas = document.querySelector('ng-uui-oas');
      if(!this.loaded){
        this.loaded = false;
      }

      oas?.addEventListener('user', (event: any) => {
        console.log(event)
        if (event.detail) {
          this.loadRouting = true;
          this.userService.updateUser(event.detail);
        }
      });

      oas?.addEventListener('option', (event: any) => {
        if (event.detail) {
          setTimeout(() => (this.router.navigate([event.detail.Url])), 50)
            ;
        }
      });

      oas?.addEventListener('logout', (event: any) => {
        if (event.detail) {
          console.log(event.detail);
        }
      });
    }

ejemplo:

Autenticación compartida de sistema padre: Para la autenticacion compartida se define un HostListener a la espera de un evento de tipo message que emite el padre al cargar le iframe con la información de autenticación:

@HostListener('window:message', ['$event']) onPostMessage(e:any) {
console.log('Message received',e);
if (e.data.type == 'authinfo') {
  console.log("Message received from the parent: ", e.data); // Message received from parent
  this.loaded = true;
  this.loadRouting=true;
} else {
  const oas = document.querySelector('ng-uui-oas');
  if(!this.loaded){
    this.loaded = false;
  }

  oas?.addEventListener('user', (event: any) => {
    console.log(event)
    if (event.detail) {
      this.loadRouting = true;
      this.userService.updateUser(event.detail);
      console.log(this.loadRouting);
    }
  });

  oas?.addEventListener('option', (event: any) => {
    if (event.detail) {
      setTimeout(() => (this.router.navigate([event.detail.Url])), 50)
        ;
    }
  });

  oas?.addEventListener('logout', (event: any) => {
    if (event.detail) {
      console.log(event.detail);
    }
  });
}
}

de igual forma se maneja la variable loaded para indicar si se carga el menú nativo, en caso de ser cargado desde un iframe, y también cambiar la clase del contenedor para adaptarse a la visualización. ejemplo:

udistrital / sga_cliente

Creación de flujo de autenticación para consumo desde un iframe o ingreso directo al cliente por medio de web componets #1400

Implementación de autenticación con web component y iframe