---
title: Capture web
description: Exécutez la capture d'un flux Journey dans une application web, avec le lien hébergé ou le Journeys SDK, à partir de ce que renvoie la création Human Plugin.
canonical: https://developer.unico.io/fr/human-plugin/integrations/web
locale: fr
generated_by: markdown-export
---

# Capture web

Guidez la personne dans la capture depuis un navigateur, avec le token et le lien renvoyés par Human Plugin.

Votre back-end crée le processus dans Human Plugin avec un flux Journey. La réponse `201` contient trois valeurs dont le front-end a besoin :

| Champ | Usage |
|---|---|
| `id` | L'identifiant du processus Human Plugin. Le SDK le reçoit sous le nom `transactionId`, et votre back-end lit le résultat avec lui |
| `token` | Démarre la capture dans le Journeys SDK |
| `link` | La page de capture hébergée |

`token` et `link` sont renvoyés **uniquement** par la création. Transmettez-les au front-end dans la même requête, ou conservez-les vous-même. Voir [Human Token Journey](/fr/human-plugin/integrations/human-token-journey).

## Prérequis

La capture s'exécute dans le navigateur et nécessite l'accès à la caméra.

| OS | Chrome | Firefox | Safari | Samsung Internet | Opera | Edge |
|---|---|---|---|---|---|---|
| Windows | ✅ | ✅ | N/A | N/A | ❌ | ❌ |
| macOS | ✅ | ✅ | ✅ | N/A | ❌ | ❌ |
| Android | ✅ | ❌ | N/A | ✅ | ❌ | ❌ |
| iOS | ✅ | ✅ | ✅ | N/A | ❌ | ❌ |

- Les pages doivent être servies en **HTTPS**. La caméra ne fonctionne que dans un [contexte sécurisé](https://developer.mozilla.org/fr/docs/Web/Security/Secure_Contexts).
- La navigation intégrée à une application nécessite Android 8 (API 26) ou iOS 13 ou supérieur.
- Les navigateurs intégrés aux applications de réseaux sociaux ne sont pas pris en charge.

## Choisir un modèle

| Modèle | Idéal pour |
|---|---|
| **Lien hébergé** | La configuration la plus simple. Aucune bibliothèque : la personne ouvre le `link` puis revient vers votre `callbackUri` |
| **Journeys SDK** | La capture s'ouvre dans votre page, la personne ne la quitte donc jamais |

### Lien hébergé

Envoyez `callbackUri` dans la requête de création. C'est la page vers laquelle la personne revient à la fin de la capture.

```json
{
  "flow": "humantoken",
  "clientId": "client-a",
  "correlationId": "order-1001",
  "credential": { "type": "DUI_TYPE_NG_BVN", "value": "<document number>" },
  "callbackUri": "https://app.example.com/capture/done"
}
```

Envoyez ensuite la personne vers `link`, de l'une de ces deux manières :

- **Redirection.** Naviguez vers `link`. À la fin, la personne est renvoyée vers `callbackUri`.
- **Nouvel onglet.** Ouvrez `link` avec [`window.open()`](https://developer.mozilla.org/fr/docs/Web/API/Window/open), surveillez le moment où l'onglet atteint `callbackUri`, puis fermez-le.

Quand la personne est de retour, prévenez votre back-end, qui appelle `GET /v1/processes/{id}`.

```mermaid
sequenceDiagram
  participant F as Your front-end
  participant B as Your back-end
  participant H as Human Plugin
  participant P as Hosted page
  F->>B: start the capture
  B->>H: POST /v1/processes (Journey flow, callbackUri)
  H-->>B: 201, id + token + link
  B-->>F: id + link
  F->>P: open link
  Note over P: capture
  P-->>F: back to callbackUri
  F->>B: capture ended
  B->>H: GET /v1/processes/{id}
  H-->>B: 200, final state
```

### Journeys SDK

Le SDK ouvre la capture dans une iFrame de votre page. Il fonctionne avec n'importe quel framework (React, Angular, Vue) ou avec du JavaScript pur.

Avant de commencer, demandez au support Unico d'enregistrer vos domaines. Ils doivent utiliser HTTPS.

#### 1. Installer

```bash
npm install unico-journey-sdk
```

Le SDK suit le versionnage sémantique : les mises à jour mineures et correctives peuvent être adoptées sans risque. Gardez-le à jour : les correctifs de sécurité et de bugs sont publiés dans de nouvelles versions.

#### 2. Autoriser le SDK dans vos en-têtes

Ignorez cette étape si votre page n'envoie aucun en-tête `Content-Security-Policy` ni `Permissions-Policy`. Sinon, ajoutez :

**Content-Security-Policy :**

```
frame-src https://*.unico.io https://*.unico.app;
script-src https://idpay.unico.io;
style-src https://idpay.unico.io;
connect-src https://api.cadastro.unico.app;
```

**Permissions-Policy :**

```
camera=(self "https://human-token.unico.io" "https://cadastro.unico.app" "https://id.unico.io" "https://retry.unico.io" "https://ultimatum.unico.io"),
geolocation=(self "https://human-token.unico.io" "https://cadastro.unico.app" "https://id.unico.io" "https://retry.unico.io" "https://ultimatum.unico.io")
```

#### 3. Initialiser

Appelez `init` dès que vous savez que la capture est nécessaire. Cela précharge la capture.

```javascript
import { ByUnicoSDK } from 'unico-journey-sdk';

ByUnicoSDK.init({ token });
```

#### 4. Ouvrir la capture

| Paramètre | Obligatoire | Valeur |
|---|---|---|
| `transactionId` | Oui | L'`id` Human Plugin |
| `token` | Oui | Le `token` renvoyé par la création |
| `onFinish` | Oui | Appelé lorsque la capture se termine ou que la personne la ferme |
| `onWidgetVisibilityChange` | Non | Appelé lorsque la capture est affichée ou masquée |

```javascript
ByUnicoSDK.open({
  transactionId: id, // l'id Human Plugin
  token,
  onFinish: ({ type }) => {
    if (type === 'FINISH') {
      // La capture est terminée. Demandez à votre back-end de lire le résultat.
    }
    // type === 'CLOSE' : la personne l'a fermée avant la fin.
  },
  // Facultatif : masquez vos propres superpositions pendant que la capture est visible.
  onWidgetVisibilityChange: (visible) => {},
});

// Pour la fermer vous-même :
ByUnicoSDK.close();
```

`onFinish` reçoit :

| Champ | Description |
|---|---|
| `type` | `'FINISH'` lorsque la capture est terminée, `'CLOSE'` lorsque la personne l'a fermée avant |
| `transaction.redirectUrl` | Où envoyer ensuite la personne. Présent uniquement pour `'FINISH'` |

> **Avertissement:** `onFinish` indique que la capture est terminée, pas comment. Le résultat provient uniquement de `GET /v1/processes/{id}`, appelé depuis votre back-end.

Utilisez aussi `onFinish` pour amener la personne à l'écran suivant, et pour éviter de créer immédiatement un nouveau processus si elle recommence.

```mermaid
sequenceDiagram
  participant F as Your front-end
  participant S as Journeys SDK
  participant B as Your back-end
  participant H as Human Plugin
  F->>B: start the capture
  B->>H: POST /v1/processes (Journey flow)
  H-->>B: 201, id + token + link
  B-->>F: id + token
  F->>S: init({ token })
  F->>S: open({ transactionId: id, token, onFinish })
  Note over S: capture
  S-->>F: onFinish
  F->>B: capture ended
  B->>H: GET /v1/processes/{id}
  H-->>B: 200, final state
```

#### Dépannage

- **Le flux se bloque ou se comporte de façon étrange.** Vérifiez qu'aucun de vos scripts ne modifie l'iFrame du SDK dans le DOM.
- **La capture a un aspect différent.** Des règles CSS larges, comme les sélecteurs de balises, peuvent atteindre l'iFrame. Les identifiants et classes propres au SDK commencent par `unico`.
- **Erreurs inattendues après une mise à jour.** Installez le SDK uniquement via npm ou yarn, et ne modifiez jamais ses fichiers.

> **Info: Tests**
>
> Fermez les DevTools du navigateur avant de tester une capture de bout en bout. Des DevTools ouverts bloquent l'envoi.

> **Avertissement: Configurations non prises en charge**
>
> - **Le SDK dans une WebView mobile.** Dans une application, ouvrez plutôt le `link`. Voir les guides [Android](/fr/human-plugin/integrations/android), [iOS](/fr/human-plugin/integrations/ios), [Ionic](/fr/human-plugin/integrations/ionic), [React Native](/fr/human-plugin/integrations/react-native) et [Flutter](/fr/human-plugin/integrations/flutter).
> - **Votre propre `<iframe>` pointant vers la capture.** Utilisez le SDK, qui gère l'iFrame.