> 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-fr/integrations-web/web-sdk-quick-guide/web-sdk-quick-guide.md).

# Intégration du workflow

## Vue d'ensemble

Ce guide vous accompagne dans l'intégration du SDK Web avec ComplyCube [flux de travail](/documentation/product-guides/product-guide-fr/studio-de-conformite/workflows.md).

{% hint style="info" %}
Pour un exemple rapide à copier-coller, utilisez notre [assistant d’intégration](https://portal.complycube.com/developers).
{% endhint %}

## Flux d'intégration

Le SDK Web s'exécute dans votre frontend, mais s'appuie sur votre backend pour créer **des jetons sécurisés**. Voici comment cela fonctionne :

{% stepper %}
{% step %}

#### **Créer un client**

Enregistrez un nouveau **client** (c.-à-d. le client) en utilisant l'API ComplyCube
{% endstep %}

{% step %}

#### **Générez un jeton SDK**

Votre backend demande un **jeton JWT** lié à ce client.
{% endstep %}

{% step %}

#### **Importez et montez le SDK**

Ajoutez les fichiers JS et CSS, puis montez le SDK dans votre application web.
{% endstep %}

{% step %}

#### Capturez des documents, des vidéos et des selfies

Le SDK guide votre client à travers les étapes requises.
{% endstep %}

{% step %}

#### Effectuer les contrôles de vérification

Les données capturées sont envoyées en toute sécurité à ComplyCube pour les vérifications, et les résultats sont fournis en temps réel via l’API ou les webhooks.
{% endstep %}
{% endstepper %}

<figure><img src="/files/94aecee17f5c654a6e1b6506cfcfd0077afeec04" alt=""><figcaption><p>Guide d'intégration du SDK Web via les flux de travail</p></figcaption></figure>

## Guide d'intégration

{% stepper %}
{% step %}

#### Créer un client

Chaque flux de vérification commence par un **client** (c.-à-d. client). Utilisez l'API pour [créer le client](/documentation/api-reference/core-resources/clients/create-a-client.md).

**Exemple de requête**

{% 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 %}

**Exemple de réponse**

La réponse contiendra un `id` (l'ID du client). Il est requis pour l'étape suivante.

```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" %}
Voir [Référence de l'API Clients](/documentation/api-reference/core-resources/clients.md) pour en savoir plus.
{% endhint %}
{% endstep %}

{% step %}

#### Générer un jeton SDK

Votre backend doit créer un **jeton SDK** pour chaque nouveau flux. Ce jeton associe la session du SDK au client. Les jetons sont de courte durée et ne doivent pas être réutilisés.

**Exemple de requête**

{% 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 %}

**Exemple de réponse**

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

{% hint style="info" %}
Voir [Référence de l'API des jetons SDK](/documentation/api-reference/other-resources/tokens.md) pour en savoir plus.
{% endhint %}
{% endstep %}

{% step %}

#### Importer le SDK

Pour importer notre SDK Web, vous devez l'inclure dans le HTML de votre page cible :

```html
<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- Importation de la bibliothèque JavaScript -->
    <script src="complycube.min.js"></script>

    <!-- Importation du CSS par défaut -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
     <!-- C'est ici que le SDK Web sera monté -->
    <div id="complycube-mount"></div>
  </body>
</html>
```

<details>

<summary><strong>Chargement du SDK avec intégrité</strong> <em>(Facultatif)</em></summary>

Pour plus de sécurité, vous pouvez charger le SDK Web ComplyCube de manière facultative à l’aide de **Intégrité des sous-ressources (SRI)**. Cela permet au navigateur de vérifier que les fichiers JavaScript et CSS n’ont pas été modifiés en les validant à l’aide de sommes de contrôle cryptographiques.

#### **Récupérer les dernières valeurs d’intégrité du SDK**

Pour vous assurer d’utiliser toujours la dernière version prise en charge du SDK et les derniers hachages d’intégrité, récupérez les métadonnées des ressources depuis le point de terminaison d’informations du SDK Web.

**Exemple de requête**

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

**Exemple de réponse**

La réponse inclut les URL et les valeurs d’intégrité correspondantes pour les ressources JavaScript et 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 %}

#### **Importer le SDK à l’aide d’attributs d’intégrité**

Utilisez les valeurs renvoyées pour charger le SDK dans votre HTML avec `integrity` et `crossorigin` attributs :

```html
<!DOCTYPE html>
<html>
  ...
  <head>
    <!-- Importation de la bibliothèque JavaScript -->
    <script
      src="<JAVASCRIPT_ASSET_URL>/sdk.min.js"
      integrity="sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
      crossorigin="anonymous">
    </script>

    <!-- Importation du CSS par défaut -->
    <link
      rel="stylesheet"
      href="<CSS_ASSET_URL>/style.css"
      integrity="sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
      crossorigin="anonymous">
  </link>
  </head>
  
  <!-- C'est ici que le SDK Web sera monté -->
  <body>
    <div id="complycube-mount"></div>
  </body>
</html>
```

{% hint style="info" %}

#### Remarques

* L’utilisation du SRI est ***facultative***, mais recommandée pour les environnements avec des exigences de sécurité plus strictes.
* L’attribut crossorigin="anonymous" est requis lors de l’utilisation de SRI avec des ressources servies depuis une origine différente.
* Les valeurs d’intégrité peuvent changer lorsque le SDK est mis à jour. Récupérez toujours les dernières valeurs depuis le point de terminaison.
  {% endhint %}

</details>

{% hint style="info" %}
Les liens vers `complycube.min.js` et `style.css` peuvent être trouvés dans votre [portail développeurs](https://portal.complycube.com/developers/webSdk).
{% endhint %}
{% endstep %}

{% step %}

#### Monter le SDK

Dans le cadre du montage du SDK Web, vous devez spécifier un [ID du modèle de flux de travail](https://portal.complycube.com/workflowTemplates). Le SDK exécutera automatiquement la **active** version du flux de travail sélectionné.

Une fois le flux de vérification terminé, les clients sont redirigés vers l'URL de retour que vous spécifiez.

Avec le jeton généré, le SDK Web peut être initialisé dans votre frontend à l'aide du code JavaScript suivant :

```javascript
ComplyCube.mount({
  token: '<YOUR_WEB_SDK_TOKEN>',
  containerId: 'complycube-mount',
  workflowTemplateId: "WORKFLOW_TEMPLATE_ID",
  onComplete: function(data) {    
    // Demandez à votre backend d'avertir ComplyCube une fois le flux de travail terminé
    // afin de déclencher les contrôles de vérification
    console.info('Capture terminée');
  },
  onModalClose: function() {
    // Gérer la tentative de fermeture de la fenêtre modale
  },
  onError: function ({ type, message }) {
    if (type === 'token_expired') {
      // Demander un nouveau jeton SDK
    } else {
      // Gérer les autres erreurs
      console.error(message);
    }
  }
});
```

{% hint style="info" %}
Les paramètres de montage du SDK sont décrits dans la [section Paramètres du SDK](#settings) ci-dessous.
{% endhint %}

{% hint style="info" %}

#### Politique de référent

Pour permettre une communication réussie entre le SDK et nos serveurs, l'en-tête de votre page web **Politique de référent** doit être défini sur `strict-origin-when-cross-origin`. Cela garantit que les informations de référent sont transmises de manière sécurisée lors des requêtes HTTP.

Vous pouvez soit le faire par programmation, soit l'ajouter directement à la page web comme suit :\
`<meta name="referrer" content="strict-origin-when-cross-origin">`
{% endhint %}
{% endstep %}

{% step %}

#### Effectuer les contrôles de vérification

Une fois que votre client démarre le flux, une [session de flux de travail](/documentation/product-guides/product-guide-fr/studio-de-conformite/workflows.md#workflow-session) est automatiquement créée. Cette session contient toutes les données capturées (documents, images et vidéos), ainsi que le suivi de la progression. Vous pouvez les consulter via la [page des sessions de flux de travail](https://portal.complycube.com/workflowSessions) sur le portail ou via l'API.

Lorsque le flux se termine, le SDK déclenche le `onComplete` rappel. Le rappel fournit un `objet de données` qui inclut le `workflowSessionId`. Votre backend doit utiliser cet ID pour informer ComplyCube que le [flux de travail est terminé](/documentation/api-reference/core-resources/workflow-sessions/complete-a-workflow-session.md), ce qui déclenche à son tour les contrôles de vérification définis dans le flux de travail.

Si vous avez [configuré des webhooks ](https://docs.complycube.com/api-reference/other-resources/webhooks/create-a-webhook)comme décrit dans notre [guide sur les webhooks](https://docs.complycube.com/documentation/guides/webhooks), vous serez averti une fois qu'une session de flux de travail sera terminée.

Vous pouvez récupérer les détails d'une session de flux de travail en appelant la [requête de récupération de session de flux de travail](/documentation/api-reference/core-resources/workflow-sessions/get-a-workflow-session.md).

**Exemple d'une requête complète de session de flux de travail**

{% 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 %}

## Référence du SDK

Cette section décrit tous les paramètres configurables, les rappels, les méthodes du cycle de vie et les options de personnalisation de marque disponibles dans le SDK Web ComplyCube.

### Paramètres

<table><thead><tr><th width="218.09765625">Option</th><th>Description</th></tr></thead><tbody><tr><td><code>jeton</code></td><td>Le jeton SDK généré par votre backend. C'est <strong>obligatoire</strong>.<br><br><strong>Type</strong>: <code>chaîne</code></td></tr><tr><td><code>workflowTemplateId</code></td><td><p>L'ID du <a href="https://portal.complycube.com/workflowTemplates">modèle de flux de travail</a> à charger pour cette session. C'est <strong>obligatoire</strong>.</p><p><strong>Type :</strong> <code>chaîne</code></p></td></tr><tr><td><code>containerId</code></td><td><p>L'ID de l'élément conteneur où le SDK s'intègre. Celui-ci doit être un élément vide.</p><p><strong>Type :</strong> <code>chaîne</code><br><strong>Valeur par défaut</strong>: <code>complycube-mount</code></p></td></tr><tr><td><code>useModal</code></td><td>Définit si les écrans de l'interface utilisateur se chargent dans une fenêtre modale plutôt qu'en ligne.<br><br><strong>Type :</strong> <code>booléen</code><br><strong>Valeur par défaut</strong>: <code>true</code></td></tr><tr><td><code>useFullScreen</code></td><td>Définit si le SDK se charge en mode plein écran.<br><br><strong>Type :</strong> <code>booléen</code><br><strong>Valeur par défaut</strong>: <code>false</code></td></tr><tr><td><code>disableClientAnalytics</code></td><td><p>Définit si nous suivons ou non les statistiques client.<br></p><p><strong>Type :</strong> <code>booléen</code><br><strong>Valeur par défaut</strong>: <code>false</code></p></td></tr></tbody></table>

### Rappel

Les rappels vous permettent de réagir aux événements du cycle de vie du SDK.

<table><thead><tr><th width="218.0234375">Option</th><th>Description</th></tr></thead><tbody><tr><td><code>onComplete</code></td><td>Déclenché après que le client a terminé le flux de vérification. Cela sert à invoquer une <a href="/spaces/kAhgmUKSf8CFUFVL3GEe/pages/8efGZrnBQn2JW1xDuW7Y">requête de finalisation de session de flux de travail</a>.</td></tr><tr><td><code>onError</code></td><td><p>Déclenché lorsqu'une erreur se produit. L'objet erreur comporte deux attributs :</p><ul><li><p><code>type</code> : cela peut être :</p><ul><li><code>exception</code></li><li><code>token_expired</code>  : indique que le jeton a expiré. Dans ce cas, un nouveau <strong>jeton SDK doit être fourni</strong>.</li></ul></li><li><code>message</code> : description de l'erreur.</li></ul></td></tr><tr><td><code>onExit</code></td><td>Ce rappel est déclenché lorsque votre client quitte avant de terminer le flux. Il renverra la raison de la sortie, par ex., <code>USER_CONSENT_NOT_GRANTED</code>.</td></tr><tr><td><code>onModalClose</code></td><td>Déclenché lorsque le client tente de fermer la fenêtre modale. Vous pouvez autoriser ou empêcher la fermeture en mettant à jour l'attribut <code>isModalOpen</code> à l'aide de <a href="#updating-settings">updateSettings</a>.</td></tr></tbody></table>

### Mise à jour des paramètres

Un certain nombre de paramètres peuvent être mis à jour à l’exécution comme suit :

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

// Remplacer le jeton SDK
complycube.updateSettings({ token: "NEW_SDK_TOKEN" });
...
// Ouvrir la fenêtre modale
complycube.updateSettings({ isModalOpen: true });

//Fermer la fenêtre modale
complycube.updateSettings({ isModalOpen: false });

```

### Démontage du SDK

Si vous utilisez le SDK dans une application monopage (SPA), vous pouvez appeler la fonction unmount pour supprimer le SDK et réinitialiser son état.

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

## Identité visuelle

Vous pouvez personnaliser les couleurs, les logos et d’autres éléments de marque via la [page des paramètres de l’image de marque](https://portal.complycube.com/settings/branding), si cette option est disponible dans votre forfait.


---

# 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-fr/integrations-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.