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

# Integración de workflows

## Descripción general

Esta guía te muestra cómo integrar el Web SDK con ComplyCube [flujos de trabajo](/documentation/product-guides/product-guide-es/compliance-studio/workflows.md).

{% hint style="info" %}
Para un ejemplo rápido de copiar y pegar, usa nuestro [asistente de integración](https://portal.complycube.com/developers).
{% endhint %}

## Flujo de integración

El SDK web se ejecuta como parte de tu frontend, pero depende de tu backend para crear **tokens seguros**. Así es como funciona:

{% stepper %}
{% step %}

#### **Crear un cliente**

Registrar un nuevo **cliente** (es decir, cliente) usando la API de ComplyCube
{% endstep %}

{% step %}

#### **Genera un token del SDK**

Tu backend solicita un **token JWT** vinculado a ese cliente.
{% endstep %}

{% step %}

#### **Importa y monta el SDK**

Añade los archivos JS y CSS, luego monta el SDK en tu aplicación web.
{% endstep %}

{% step %}

#### Captura documentos, vídeos y selfies

El SDK guía a tu cliente a través de los pasos requeridos.
{% endstep %}

{% step %}

#### Realizar comprobaciones de verificación

Los datos capturados se envían de forma segura a ComplyCube para las comprobaciones de verificación, y los resultados se entregan en tiempo real a través de la API o de webhooks.
{% endstep %}
{% endstepper %}

<figure><img src="/files/898f4313114a7c147240b1fab386ab42992c2797" alt=""><figcaption><p>Guía de integración del Web SDK mediante Workflows</p></figcaption></figure>

## Guía de integración

{% stepper %}
{% step %}

#### Crear un cliente

Cada flujo de verificación comienza con un **cliente** (es decir, cliente). Usa la API para [crear el cliente](/documentation/api-reference/core-resources/clients/create-a-client.md).

**Ejemplo de solicitud**

{% tabs %}
{% tab title="cURL" %}

```bash
curl -X POST https://api.complycube.com/v1/clients \
     -H 'Authorization: <YOUR_API_KEY>' \
     -H 'Content-Type: application/json' \
     -d '{
          "type": "person",
          "email": "john.doe@example.com",
          "personDetails":{
               "firstName": "John",
               "lastName" :"Doe"
          }
        }'
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
const { ComplyCube } = require("@complycube/api");

const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });

const client = await complycube.client.create({
  type: "person",
  email: "john.doe@example.com",
  personDetails: {
    firstName: "John",
    lastName: "Doe"
  }
});
```

{% endtab %}

{% tab title="Python" %}

```python
from complycube import ComplyCubeClient
cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')

new_client = {
    'type':'person',
    'email':'john.doe@example.com',
    'personDetails': {
        'firstName':'John',
        'lastName':'Doe'
    }
}

client = cc_api.clients.create(**new_client)
```

{% endtab %}

{% tab title="PHP" %}

```php
use ComplyCube\ComplyCubeClient;

$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');

$result = $ccapi->clients()->create([
    'type' => 'person',
    'email' => 'john@doe.com',
    'personDetails' => [
        'firstName' => 'John',
        'lastName' => 'Doe'
    ]
]);
```

{% endtab %}

{% tab title=".NET" %}

```csharp
using ComplyCube.Net;
using ComplyCube.Net.Resources.Clients;

var clientApi = new ClientApi(new ComplyCubeClient("<YOUR_API_KEY>"));
var newClient = new ClientRequest {
  type = "person",
  email = "john@doe.com",
  personDetails = new PersonDetails {
    firstName = "John",
    lastName = "Doe"
  }
}

var client = await clientApi.CreateAsync(newClient);
```

{% endtab %}
{% endtabs %}

**Ejemplo de respuesta**

La respuesta contendrá un `id` (el ID del cliente). Es necesario para el siguiente paso.

```json
{
    "id": "5eb04fcd0f3e360008035eb1",
    "type": "person",
    "email": "john.doe@example.com",
    "personDetails": {
        "firstName": "John",
        "lastName": "Doe"
    },
    "createdAt": "2020-01-04T17:24:29.146Z",
    "updatedAt": "2020-01-04T17:24:29.146Z"
}
```

{% hint style="info" %}
Consulta [Referencia de la API de clientes](/documentation/api-reference/core-resources/clients.md) para obtener más información.
{% endhint %}
{% endstep %}

{% step %}

#### Genera un token de SDK

Tu backend debe crear un **token de SDK** para cada nuevo flujo. Este token vincula la sesión del SDK con el cliente. Los tokens tienen una vida útil corta y no deben reutilizarse.

**Ejemplo de solicitud**

{% tabs %}
{% tab title="cURL" %}

```bash
curl -X POST https://api.complycube.com/v1/tokens \
     -H 'Authorization: <YOUR_API_KEY>' \
     -H 'Content-Type: application/json' \
     -d '{
          "clientId":"CLIENT_ID",
          "referrer": "https://www.example.com/*"
        }'
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
const { ComplyCube } = require("@complycube/api");

const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });

const token = await complycube.token.generate("CLIENT_ID", {
    referrer: "https://www.example.com/*"
});
```

{% endtab %}

{% tab title="Python" %}

```python
from complycube import ComplyCubeClient

cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')

token = cc_api.tokens.create('CLIENT_ID','https://www.example.com/*')
```

{% endtab %}

{% tab title="PHP" %}

```php
 use ComplyCube\ComplyCubeClient;

$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');

$report = $ccapi->tokens()->generate('CLIENT_ID', 'https://www.example.com/*');
```

{% endtab %}

{% tab title=".NET" %}

```csharp
using ComplyCube.Net;
using ComplyCube.Net.Resources.SDKTokens;

var sdkTokenApi = new SDKTokenApi(new ComplyCubeClient("<YOUR_API_KEY>"));

var sdkTokenRequest = {
  clientId = "CLIENT_ID",
  referrer = "https://www.example.com/*"
}

var sdkToken = await sdkTokenApi.GenerateToken(sdkTokenRequest);
```

{% endtab %}
{% endtabs %}

**Ejemplo de respuesta**

```json
{
    "token": "<CLIENT_TOKEN>"
}
```

{% hint style="info" %}
Consulta [Referencia de la API de tokens de SDK](/documentation/api-reference/other-resources/tokens.md) para obtener más información.
{% endhint %}
{% endstep %}

{% step %}

#### Importa el SDK

Para importar nuestro Web SDK, debes incluirlo en el HTML de la página de destino:

```html
<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- Importando la biblioteca de JavaScript -->
    <script src="complycube.min.js"></script>

    <!-- Importando el CSS predeterminado -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
     <!-- Aquí es donde se montará el Web SDK -->
    <div id="complycube-mount"></div>
  </body>
</html>
```

<details>

<summary><strong>Cargando el SDK con integridad</strong> <em>(Opcional)</em></summary>

Para mayor seguridad, puedes cargar opcionalmente el ComplyCube Web SDK usando **Subresource Integrity (SRI)**. Esto permite al navegador verificar que los archivos JavaScript y CSS no hayan sido modificados validándolos frente a sumas de comprobación criptográficas.

#### **Recupera los últimos valores de integridad del SDK**

Para asegurarte de usar siempre la última versión compatible del SDK y los hashes de integridad más recientes, recupera los metadatos del recurso desde el endpoint de información del Web SDK.

**Ejemplo de solicitud**

```bash
curl -X POST https://api.complycube.com/v1/webSdk/latest \\
     -H 'Authorization: <YOUR_API_KEY>'
```

**Ejemplo de respuesta**

La respuesta incluye las URL y los valores de integridad correspondientes tanto para los recursos de JavaScript como para los de CSS.

{% code overflow="wrap" %}

```json
{
  "js": {
    "url": "<JAVASCRIPT_ASSET_URL>/complycube.min.js",
    "integrity": "sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
  },
  "css": {
    "url": "<CSS_ASSET_URL>/style.css",
    "integrity": "sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
  }
}
```

{% endcode %}

#### **Importa el SDK usando atributos de integridad**

Usa los valores devueltos para cargar el SDK en tu HTML con `integridad` y `crossorigin` atributos:

```html
<!DOCTYPE html>
<html>
  ...
  <head>
    <!-- Importando la biblioteca JavaScript -->
    <script
      src="<JAVASCRIPT_ASSET_URL>/sdk.min.js"
      integrity="sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
      crossorigin="anonymous">
    </script>

    <!-- Importando el CSS predeterminado -->
    <link
      rel="stylesheet"
      href="<CSS_ASSET_URL>/style.css"
      integrity="sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
      crossorigin="anonymous">
  </link>
  </head>
  
  <!-- Aquí es donde se montará el Web SDK -->
  <body>
    <div id="complycube-mount"></div>
  </body>
</html>
```

{% hint style="info" %}

#### Notas

* Usar SRI es ***opcional***, pero se recomienda para entornos con requisitos de seguridad más estrictos.
* El atributo crossorigin="anonymous" es necesario cuando se usa SRI con recursos servidos desde un origen diferente.
* Los valores de integridad pueden cambiar cuando el SDK se actualiza. Recupera siempre los valores más recientes desde el endpoint.
  {% endhint %}

</details>

{% hint style="info" %}
Los enlaces a `complycube.min.js` y `style.css` se pueden encontrar en tu [portal de desarrolladores](https://portal.complycube.com/developers/webSdk).
{% endhint %}
{% endstep %}

{% step %}

#### Montar el SDK

Como parte del montaje del Web SDK, debes especificar un [ID de plantilla de flujo de trabajo](https://portal.complycube.com/workflowTemplates). El SDK ejecutará automáticamente la **activa** versión del flujo de trabajo seleccionado.

Una vez completado el flujo de verificación, los clientes son redirigidos de vuelta a la URL de retorno que especifiques.

Con el token generado, el Web SDK se puede inicializar en tu frontend usando el siguiente código JavaScript:

```javascript
ComplyCube.mount({
  token: '<YOUR_WEB_SDK_TOKEN>',
  containerId: 'complycube-mount',
  workflowTemplateId: "WORKFLOW_TEMPLATE_ID",
  onComplete: function(data) {    
    // Haz que tu backend notifique a ComplyCube una vez que el flujo de trabajo haya finalizado
    // para activar las comprobaciones de verificación
    console.info('Capture complete');
  },
  onModalClose: function() {
    // Gestiona el intento de cierre del modal
  },
  onError: function ({ type, message }) {
    if (type === 'token_expired') {
      // Solicita un nuevo token de SDK
    } else {
      // Gestiona otros errores
      console.error(message);
    }
  }
});
```

{% hint style="info" %}
Los parámetros de montaje del SDK se describen en la [Configuración del SDK](#settings) sección siguiente.
{% endhint %}

{% hint style="info" %}

#### Política de referrer

Para habilitar una comunicación correcta entre el SDK y nuestros servidores, la **Política de referrer** cabecera debe establecerse en `strict-origin-when-cross-origin`. Esto garantiza que la información del referrer se transmita de forma segura durante las solicitudes HTTP.

Puedes hacerlo programáticamente o añadirlo directamente a la página web de la siguiente manera:\
`<meta name="referrer" content="strict-origin-when-cross-origin">`
{% endhint %}
{% endstep %}

{% step %}

#### Realizar comprobaciones de verificación

Una vez que tu cliente inicie el flujo, una [sesión de flujo de trabajo](/documentation/product-guides/product-guide-es/compliance-studio/workflows.md#workflow-session) se crea automáticamente. Esta sesión contiene todos los datos capturados (documentos, imágenes y videos), así como el seguimiento del progreso. Puedes verlos todos a través de la [página de sesiones de flujo de trabajo](https://portal.complycube.com/workflowSessions) en el portal o a través de la API.

Cuando el flujo termina, el SDK activa la `onComplete` función de devolución de llamada. La devolución de llamada proporciona un `data` objeto que incluye el `workflowSessionId`. Tu backend debe usar este ID para notificar a ComplyCube que el [flujo de trabajo ha finalizado](/documentation/api-reference/core-resources/workflow-sessions/complete-a-workflow-session.md), lo que a su vez ejecuta las comprobaciones de verificación definidas en el flujo de trabajo.

Si has [configurado webhooks ](https://docs.complycube.com/api-reference/other-resources/webhooks/create-a-webhook)como se describe en nuestra [guía de webhooks](https://docs.complycube.com/documentation/guides/webhooks), recibirás una notificación cuando se complete una sesión de flujo de trabajo.

Puedes recuperar los detalles de una sesión de flujo de trabajo llamando a la [solicitud para recuperar la sesión de flujo de trabajo](/documentation/api-reference/core-resources/workflow-sessions/get-a-workflow-session.md).

**Ejemplo de una solicitud completa de sesión de flujo de trabajo**

{% tabs %}
{% tab title="cURL" %}

```javascript
curl -X POST https://api.complycube.com/v1/workflowSessions/{:wfSessionId}/complete \
     -H 'Authorization: <YOUR_API_KEY>' \
     -H 'Content-Type: application/json'
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
const { ComplyCube } = require("@complycube/api");

const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });

const wfSession = await complycube.workflowSession.complete("WORKFLOW_SESSION_ID");
```

{% endtab %}

{% tab title="Python" %}

```python
from complycube import ComplyCubeClient

cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')

workflow_session = cc_api.workflowsessions.complete('WORKFLOW_SESSION_ID')
```

{% endtab %}

{% tab title="PHP" %}

```php
use ComplyCube\ComplyCubeClient;

$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');

$workflowSession = $ccapi->workflowSessions()->complete('WORKFLOW_SESSION_ID');
```

{% endtab %}

{% tab title=".NET" %}

```csharp
using ComplyCube.Net;
using ComplyCube.Net.Resources.WorkflowSessions;

var wfSessionApi = new WorkflowSessionApi(new ComplyCubeClient("<YOUR_API_KEY>"));

var workflowSession = await wfSessionApi.CompleteAsync("WORKFLOW_SESSION_ID");
```

{% endtab %}
{% endtabs %}
{% endstep %}
{% endstepper %}

## Referencia del SDK

En esta sección se describen todos los ajustes configurables, callbacks, métodos del ciclo de vida y opciones de personalización de marca disponibles en el Web SDK de ComplyCube.

### Configuración

<table><thead><tr><th width="218.09765625">Opción</th><th>Descripción</th></tr></thead><tbody><tr><td><code>token</code></td><td>El token de SDK generado por tu backend. Esto es <strong>obligatorio</strong>.<br><br><strong>Tipo</strong>: <code>cadena</code></td></tr><tr><td><code>workflowTemplateId</code></td><td><p>El ID de la <a href="https://portal.complycube.com/workflowTemplates">plantilla de flujo de trabajo</a> que se cargará para esta sesión. Esto es <strong>obligatorio</strong>.</p><p><strong>Tipo:</strong> <code>cadena</code></p></td></tr><tr><td><code>containerId</code></td><td><p>El ID del elemento contenedor donde se monta el SDK. Debe ser un elemento vacío.</p><p><strong>Tipo:</strong> <code>cadena</code><br><strong>Valor predeterminado</strong>: <code>complycube-mount</code></p></td></tr><tr><td><code>useModal</code></td><td>Esto define si las pantallas de la interfaz se cargan en un modal en lugar de integradas en línea.<br><br><strong>Tipo:</strong> <code>booleano</code><br><strong>Valor predeterminado</strong>: <code>verdadero</code></td></tr><tr><td><code>useFullScreen</code></td><td>Esto define si el SDK se carga en modo de pantalla completa.<br><br><strong>Tipo:</strong> <code>booleano</code><br><strong>Valor predeterminado</strong>: <code>falso</code></td></tr><tr><td><code>disableClientAnalytics</code></td><td><p>Esto define si rastreamos o no la analítica del cliente.<br></p><p><strong>Tipo:</strong> <code>booleano</code><br><strong>Valor predeterminado</strong>: <code>falso</code></p></td></tr></tbody></table>

### Callback

Los callbacks te permiten responder a los eventos del ciclo de vida del SDK.

<table><thead><tr><th width="218.0234375">Opción</th><th>Descripción</th></tr></thead><tbody><tr><td><code>onComplete</code></td><td>Se activa después de que el cliente complete el flujo de verificación. Se utiliza para invocar una <a href="/spaces/kAhgmUKSf8CFUFVL3GEe/pages/8efGZrnBQn2JW1xDuW7Y">solicitud de finalización de sesión de flujo de trabajo</a>.</td></tr><tr><td><code>onError</code></td><td><p>Se activa cuando ocurre un error. El objeto de error tiene dos atributos:</p><ul><li><p><code>type</code>: Puede ser:</p><ul><li><code>excepción</code></li><li><code>token_expired</code> : indica que el token ha expirado. Cuando esto ocurra, se debe proporcionar un nuevo <strong>token de SDK</strong>.</li></ul></li><li><code>message</code>: Descripción del error.</li></ul></td></tr><tr><td><code>onExit</code></td><td>Esta callback se activa cuando tu cliente sale antes de completar el flujo. Devolverá el motivo de salida, por ejemplo, <code>USER_CONSENT_NOT_GRANTED</code>.</td></tr><tr><td><code>onModalClose</code></td><td>Se activa cuando el cliente intenta cerrar el modal. Puedes permitir o impedir el cierre actualizando el <code>isModalOpen</code> atributo usando <a href="#updating-settings">updateSettings</a>.</td></tr></tbody></table>

### Actualizando la configuración

Varios ajustes pueden actualizarse en tiempo de ejecución de la siguiente manera:

```javascript
complycube = ComplyCube.mount({...});

// Reemplazar el token del SDK
complycube.updateSettings({ token: "NEW_SDK_TOKEN" });
...
// Abrir el modal
complycube.updateSettings({ isModalOpen: true });

//Cerrar el modal
complycube.updateSettings({ isModalOpen: false });

```

### Desmontando el SDK

Si está utilizando el SDK en una aplicación de una sola página (SPA), puede llamar a la función unmount para eliminar el SDK y restablecer su estado.

```javascript
complycube = ComplyCube.mount({...});
...
complycube.unmount()
```

## Identidad de marca

Puedes personalizar los colores, los logotipos y otros elementos de marca a través de la [página de configuración de la marca](https://portal.complycube.com/settings/branding), si está disponible en tu plan.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.complycube.com/documentation/sdks/sdks-es/integraciones-web/web-sdk-quick-guide/web-sdk-quick-guide.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.