# 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
<facephi-sdk-provider
    id="facephiSdkProvider"
    apikey="PRIVATE_APIKEY"
    type="ONBOARDING"
    steps="START,SELPHID_WIDGET,SELPHI_WIDGET,FINISH"
    customer="UNIQUE_USER_ID"
></facephi-sdk-provider>

<script>
const sdkProvider = document.getElementById("facephiSdkProvider");

function startOnboarding() {
    sdkProvider.addEventListener("emitData", (event) => {
        console.log("Facephi SDK Provider:", event.detail);
        // Capture document with SelphID.
        startSelphID();
    });
}

function startSelphID() {
    const selphidWidget = document.createElement("facephi-selphid-widget");
    selphidWidget.setAttribute("disableTutorial", true);
    selphidWidget.addEventListener("extractionFinish", () => {
        console.log("Facephi SelphID Widget", event.detail);
        // Capture facial template with Selphi.
        startSelphi();
    });
    sdk.provider.innerHTML = "";
    sdkProvider.appendCild(selphidWidget);
}
    
function startSelphi() {
    const selphiWidget = document.createElement("facephi-selphi-widget");
    selphidWidget.setAttribute("disableTutorial", true);
    selphidWidget.addEventListener("extractionFinish", () => {
        console.log("Facephi Selphi Widget", event.detail);
        // Onboarding has finished. Continue with next steps.
        sdkProvider.innerHTML = "Onboarding completed";
    });
    sdkProvider.appendCild(selphidWidget);
}

startOnboarding();
</script>  
```

{% 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_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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.facephi.com/sdks/sdk-web/componentes/guia-rapida.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.