Capture web

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

Markdown

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.

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é.
• 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.

{
  "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(), 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}.

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

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.

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

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.

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.

Tests

Fermez les DevTools du navigateur avant de tester une capture de bout en bout. Des DevTools ouverts bloquent l'envoi.

Configurations non prises en charge

• Le SDK dans une WebView mobile. Dans une application, ouvrez plutôt le link. Voir les guides Android, iOS, Ionic, React Native et Flutter.
• Votre propre <iframe> pointant vers la capture. Utilisez le SDK, qui gère l'iFrame.