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

# Guide du SDK Web

### Vue d'ensemble <a href="#overview" id="overview"></a>

Le **ComplyCube Web SDK** est une bibliothèque JavaScript légère qui vous permet d’intégrer directement des parcours de vérification d’identité et de KYC dans vos applications web. Elle fournit un widget prêt à l’emploi et facile à utiliser pour capturer des documents, des selfies et des justificatifs de domicile, tout en gérant en coulisses la détection de qualité et les signaux de fraude.

### Démo interactive

{% @arcade/embed url="<https://app.arcade.software/share/kjtci521jMvvMXDZIr7o>" flowId="kjtci521jMvvMXDZIr7o" fullWidth="false" %}

### Étapes d'intégration

Le Web SDK peut être intégré de deux manières : via [des workflows](/documentation/product-guides/product-guide-fr/studio-de-conformite/workflows.md) pour des parcours de vérification complets, ou avec **une intégration pilotée par les contrôles** pour un contrôle granulaire.

Les étapes ci-dessous montrent comment ajouter le Web SDK à votre application web.

{% stepper %}
{% step %}

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

Tout parcours 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 %}

La réponse contiendra un `id` (l’ID du client). Il est requis pour l’étape suivante.
{% endstep %}

{% step %}

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

**Les jetons** permettent aux clients d’envoyer des données personnelles à ComplyCube en toute sécurité via nos SDK. Utilisez le [point de terminaison de génération de jetons](/documentation/api-reference/other-resources/tokens.md) pour obtenir un jeton SDK et initialiser ensuite le Web SDK.

{% 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": "*://*/*"
        }'
```

{% 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: "*://*/*"
});
```

{% endtab %}

{% tab title="Python" %}

```python
from complycube import ComplyCubeClient

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

token = cc_api.tokens.create('CLIENT_ID','*://*/*')
```

{% endtab %}

{% tab title="PHP" %}

```php
 use ComplyCube\ComplyCubeClient;

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

$report = $ccapi->tokens()->generate('CLIENT_ID', '*://*/*');
```

{% 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 = "*://*/*" }

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

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

{% step %}

#### Intégrer le SDK

Pour intégrer notre Web SDK, vous devez l’inclure sur votre page cible, comme indiqué ci-dessous.

```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>
  
  <script>
    var complycube = {};
    function startVerification() {
      complycube = ComplyCube.mount({
        token: "<YOUR_WEB_SDK_TOKEN>",
        onComplete: function(data) {
          console.log("Capture terminée", data)
        },
      });
    }
  </script>
  
  <body>
    <!-- C’est ici que le Web SDK sera intégré -->
    <div id="complycube-mount"></div>

    <!-- En cliquant sur le bouton, vous lancerez l’interface de vérification ComplyCube -->
    <button onClick="startVerification()">Démarrer la vérification</button>
  </body>
  
</html>

```

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

### Étapes suivantes

Suivez le guide complet d’intégration du [Web SDK](/documentation/sdks/sdks-fr/integrations-web/web-sdk-quick-guide.md) pour découvrir ses fonctionnalités et **de personnalisation** options.


---

# 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/documentation/documentation-fr/guides-rapides/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.