> For the complete documentation index, see [llms.txt](https://docs.facephi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.facephi.com/sdks/sdk-web/componentes/guia-rapida.md).

# Guía rápida

El SDK Provider es un componente personalizado que incluye una colección de widgets para su uso. Esos widgets también son componentes personalizados.

***

## Componentes SDK Web

Con la integración del SDK Web de Facephi se puede conseguir una aplicación de Onboarding o Autenticación completamente personalizable a través de los componentes que la librería ofrece.

En el siguiente ejemplo vemos una breve implementación de un flujo de Onboarding, donde el usuario comenzará el flujo capturando su documento de identidad con SelphID y finalizará con la captura del patrón facial en Selphi con una configuración mínima.

```jsx
import { TypeFamily, TrackingSteps } from '@facephi/sdk-web-wc';

<facephi-sdk-provider
  apikey={process.env.FACEPHI_SDK_APIKEY}
  type={TypeFamily.onboarding}
  steps={`${TrackingSteps.start},${TrackingSteps.selphidWidget},${TrackingSteps.selphiWidget},${TrackingSteps.finish}`}
  customerId={uniqueUserId}
  onEmitData={(event) => {
    console.log('Facephi SDK Provider:', event.detail);
    startSelphID();
  }}
/>
```

Si necesitas montar los widgets de forma dinámica (sin JSX), asigna las propiedades en JavaScript:

```typescript
const sdkProvider = document.querySelector('facephi-sdk-provider');

function startSelphID() {
  const selphidWidget = document.createElement('facephi-selphid-widget');
  selphidWidget.disableTutorial = true;
  selphidWidget.addEventListener('extractionFinish', (event) => {
    console.log('Facephi SelphID Widget', event.detail);
    startSelphi();
  });
  sdkProvider.innerHTML = '';
  sdkProvider.appendChild(selphidWidget);
}

function startSelphi() {
  const selphiWidget = document.createElement('facephi-selphi-widget');
  selphiWidget.disableTutorial = true;
  selphiWidget.addEventListener('extractionFinish', (event) => {
    console.log('Facephi Selphi Widget', event.detail);
    sdkProvider.innerHTML = 'Onboarding completed';
  });
  sdkProvider.innerHTML = '';
  sdkProvider.appendChild(selphiWidget);
}
```

{% hint style="info" %}
Facephi recomienda utilizar herramientas como Frameworks y enrutadores para una implementación más sencilla y modular.

En una implementación real se recomienda tener en cuenta el resto de eventos de los widgets.
{% endhint %}

***

## TypeScript

Todos los componentes de Facephi están tipados para ser utilizados en entornos TypeScript (ya sea TypeScript puro o integrado en frameworks).

Esta configuración será útil durante la implementación de la biblioteca. Estos tipos funcionarán en cualquier framework, pero su uso puede diferir dependiendo del entorno.

#### Ejemplo de uso

Este es un ejemplo de uso simple para un entorno TS puro. Los tipos ofrecidos por los diferentes componentes pueden ser utilizados en cualquier framework con integración TS. Esto proporcionará correcciones y funciones de autocompletado en el IDE.

```typescript
const facephiSdkProvider: HTMLFacephiSdkProviderElement = document.createElement('facephi-sdk-provider');
facephiSdkProvider.apikey = process.env.FACEPHI_SDK_APIKEY;
facephiSdkProvider.addEventListener('emitData', handleEmitData);
```

> Los tipos de ayuda en un IDE podrían no mostrarse en algunas secciones de HTML en frameworks. Para aprovechar estas características, se recomienda implementar la configuración de los diversos componentes en la sección de código.

***

## Integración en frameworks

El equipo de desarrollo de Facephi recomienda la integración de la librería en frameworks para potenciar y facilitar la implementación de la misma.

Algunas ventajas son:

* Facilidad de integración y sintaxis.
* Uso nativo de TypeScript y entorno de pruebas.
* Componetización de los productos de la librería para ofrecer modularidad.
* Uso de herramientas como *routers*.

Para más información sobre integraciones en frameworks es posible consultar la sección [Frameworks y Samples](/sdks/sdk-web/frameworks-y-samples.md).

***

## Compatibilidad con iframes

El SDK Web es compatible con el uso de iframes.

Solo es necesario activar el foco en el contenedor del iframe cuando se vaya a utilizar los componentes Facephi. Ésto se puede conseguir de varias formas, como por ejemplo:

* Haciendo que el usuario interaccione dentro del iframe antes de la carga del SDK Web con un botón o enlace.
* De manera programática cuando se cargue el iframe (útil si el usuario no va a interaccionar con la aplicación).<br>

  ```typescript
  const iframe = document.getElementById('my-iframe');
  iframe.addEventListener('load', () => {
      iframe.focus();
  });
  ```

{% hint style="info" %}
**Nota**: Éste proceso puede ser necesario sobre todo si se utilizan servicios de *antispoofing* (Prevención de suplantación de identidad).
{% endhint %}

***

## Cómo usar

Los widgets deben estar contenidos por el componente SDK Provider y ser ejecutados uno por uno en orden.

Esta lógica se puede implementar de varias maneras:

* **Implementación Vanilla**: Una implementación vanilla de los diferentes productos usando código HTML y JavaScript. Ésta opción es la menos recomendada.
* **Componentes de framework**: Usando un framework para implementar los productos como componentes personalizados.
* **Enrutadores de componentes**: Usando un enrutador para cargar un componente específico (producto) según un parámetro en la URL.
* **Métodos combinados**: Implementar los productos de Facephi usando todos los métodos anteriores. El equipo de Facephi recomienda el uso de un framework para implementar el widget como componentes personalizados que se cargarán con un enrutador.