iframe-bridge-angular

Componente Angular para integración de KYC mediante iframe y comunicación segura entre aplicaciones.

Instalación

Puedes instalar la librería de dos maneras:

1. Desde npm

npm install iframe-bridge-angular

2. Desde el repositorio de Bitbucket

npm install git+https://bitbucket.org/ENTURA/wdi_kyc_sdk_angular.git

Nota: Si el repositorio es privado, asegúrate de tener configuradas tus credenciales de Bitbucket.

Uso básico

1. Importa el componente standalone en tu componente principal:

import { IframeBridgeAngularComponent } from 'iframe-bridge-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.html',
  styleUrl: './app.css',
  imports: [IframeBridgeAngularComponent],
})
export class App {
   // Lógica cuando el iframe solicita salir
  onExitRequest(event: any) {
    console.log('Exit request:', event);
  }

   onCompleteRequest(event: any) {
    console.log('Complete request:', event);
  }
}

2. Agrega el selector en tu template:

<iframe-bridge-angular
  [allowedOrigins]="['https://remkyc-x.wdi.net/kyc']"
  [iframeBaseUrl]="'https://remkyc-x.wdi.net/kyc'"
  [entity]="{
    id: '1234',
    apiKey: '1234asd'
  }"
  (exitRequest)="onExitRequest($event)"
  (completeRequest)="onCompleteRequest($event)"
></iframe-bridge-angular>

Inputs

• allowedOrigins: string[]
  Lista de orígenes permitidos para la comunicación con el iframe.

• iframeBaseUrl: string
  URL base del iframe que se va a cargar.

• entity: any
  Objeto con los datos que se enviarán al iframe (por ejemplo, id y apiKey).

Outputs

• exitRequest:
  Evento emitido cuando el iframe solicita cerrar o salir del flujo.
• CompleteRequest:
  Evento emitido cuando se completa el flujo del Iframe.

Ejemplo de integración

// app.ts
import { IframeBridgeAngularComponent } from 'iframe-bridge-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.html',
  styleUrl: './app.css',
  imports: [IframeBridgeAngularComponent],
})
export class App {
  onExitRequest(event: any) {
    // Tu lógica aquí
  }

  onCompleteRequest(event: any) {
    // Tu lógica aquí
  }
}

<!-- app.html -->
<iframe-bridge-angular
  [allowedOrigins]="['https://remkyc-x.wdi.net/kyc']"
  [iframeBaseUrl]="'https://remkyc-x.wdi.net/kyc'"
  [entity]="{
    id: '1234',
    apiKey: '1234asd'
  }"
  (exitRequest)="onExitRequest($event)"
  (completeRequest)="onCompleteRequest($event)"
></iframe-bridge-angular>

Licencia

MIT