Vérification KYC par redirection : page hébergée

La méthode par redirection envoie les utilisateurs vers une page de vérification hébergée par Didit, puis les renvoie vers votre application via une URL de rappel.

Fonctionnalité	Description
Temps de configuration	5 minutes
Backend requis	✅ Oui (pour créer des sessions)
Reste sur votre domaine	❌ Non (redirige vers verify.didit.me ou vers votre domaine personnalisé en marque blanche)
Prise en charge multi-appareil	✅ Oui
Compatibilité avec les navigateurs	✅ Tous les navigateurs

Quand utiliser la redirection

Vérification multi-appareil : commencez sur ordinateur et terminez sur mobile
Compatibilité maximale : fonctionne dans tous les navigateurs, y compris les plus anciens
Intégration simple : aucune configuration d’iframe nécessaire
Problèmes de caméra : lorsque l’accès à la caméra dans une iframe pose problème

Implémentation

Étape 1 : créer une session (backend)

La réponse de création de session contient un champ nommé url : transmettez cette valeur au navigateur.

// Node.js / Express
app.post('/api/create-verification', async (req, res) => {
  const { userId } = req.body;

  const response = await fetch('https://verification.didit.me/v3/session/', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.DIDIT_API_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      workflow_id: process.env.DIDIT_WORKFLOW_ID,
      vendor_data: userId,
      callback: 'https://yourapp.com/verification-complete',
      callback_method: 'both', // most reliable across desktop ↔ mobile handoffs
    }),
  });

  if (!response.ok) {
    return res.status(response.status).send(await response.text());
  }

  const session = await response.json();
  // 201 per OpenAPI: { session_id, session_number, session_token, url, vendor_data,
  //                    metadata, status, workflow_id, workflow_version, callback }
  res.json({ sessionId: session.session_id, verificationUrl: session.url });
});

Étape 2 : rediriger l’utilisateur (frontend)

HTML :

<button onclick="startVerification()">Verify Identity</button>

<script>
  async function startVerification() {
    const response = await fetch('/api/create-verification', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ userId: 'user-123' })
    });
    
    const { verificationUrl } = await response.json();
    window.location.href = verificationUrl;
  }
</script>

React :

function VerifyButton() {
  const [loading, setLoading] = useState(false);

  const startVerification = async () => {
    setLoading(true);
    
    const response = await fetch('/api/create-verification', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ userId: 'user-123' })
    });
    
    const { verificationUrl } = await response.json();
    window.location.assign(verificationUrl);
  };

  return (
    <button onClick={startVerification} disabled={loading}>
      {loading ? 'Loading...' : 'Verify Identity'}
    </button>
  );
}

Vue :

<template>
  <button @click="startVerification" :disabled="loading">
    {{ loading ? 'Loading...' : 'Verify Identity' }}
  </button>
</template>

<script setup>
import { ref } from 'vue';

const loading = ref(false);

async function startVerification() {
  loading.value = true;
  
  const response = await fetch('/api/create-verification', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ userId: 'user-123' })
  });
  
  const { verificationUrl } = await response.json();
  window.location.href = verificationUrl;
}
</script>

Gestion du callback

Lorsque la vérification se termine, Didit redirige vers votre URL de rappel avec des paramètres de requête :

https://yourapp.com/verification-complete?verificationSessionId=abc123&status=Approved

Paramètre	Description
`verificationSessionId`	Identifiant unique de la session
`status`	Le statut actuel de la session, par exemple `Approved`, `Declined`, `In Review` ou `Expired`. Voir statuts de vérification

Exemple Next.js

// pages/verification-complete.tsx
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function VerificationComplete() {
  const router = useRouter();
  const { verificationSessionId, status } = router.query;
  const [message, setMessage] = useState('Processing...');

  useEffect(() => {
    if (!router.isReady) return;

    async function handleResult() {
      // Optionally verify the result with your backend
      await fetch('/api/verify-session', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          sessionId: verificationSessionId, 
          status 
        })
      });

      // Redirect based on status
      switch (status) {
        case 'Approved':
          setMessage('Verification successful! Redirecting...');
          setTimeout(() => router.push('/dashboard'), 2000);
          break;
        case 'Declined':
          setMessage('Verification was not successful.');
          setTimeout(() => router.push('/verification-failed'), 2000);
          break;
        case 'In Review':
          setMessage('Your verification is under review.');
          setTimeout(() => router.push('/verification-pending'), 2000);
          break;
        default:
          setMessage('Unknown status. Please contact support.');
      }
    }

    handleResult();
  }, [router.isReady, verificationSessionId, status]);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen">
      <div className="animate-spin w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full mb-4" />
      <p className="text-lg">{message}</p>
    </div>
  );
}

Exemple Express.js

// routes/verification.js
app.get('/verification-complete', async (req, res) => {
  const { verificationSessionId, status } = req.query;
  
  // Optionally verify with Didit API
  // const session = await diditApi.getSession(verificationSessionId);
  
  // Update your database
  await db.users.update({
    where: { verificationSessionId },
    data: { verificationStatus: status }
  });
  
  // Redirect based on status
  switch (status) {
    case 'Approved':
      res.redirect('/dashboard?verified=true');
      break;
    case 'Declined':
      res.redirect('/verification-failed');
      break;
    case 'In Review':
      res.redirect('/verification-pending');
      break;
    default:
      res.redirect('/error');
  }
});

Exemple Vue Router

// router/index.ts
{
  path: '/verification-complete',
  component: () => import('@/views/VerificationComplete.vue'),
  beforeEnter: async (to, from, next) => {
    const { verificationSessionId, status } = to.query;
    
    // Store result and redirect
    await store.dispatch('verification/handleResult', { 
      sessionId: verificationSessionId, 
      status 
    });
    
    if (status === 'Approved') {
      next('/dashboard');
    } else if (status === 'Declined') {
      next('/verification-failed');
    } else {
      next('/verification-pending');
    }
  }
}

Ouvrir dans un nouvel onglet

Si vous préférez garder votre application ouverte pendant que l’utilisateur effectue la vérification :

// Open in new tab
window.open(verificationUrl, '_blank');

// Poll for completion or use webhooks

Lorsque vous utilisez de nouveaux onglets, combinez cette méthode avec les webhooks pour savoir quand la vérification se termine.

Bonnes pratiques de sécurité

Vérifier le callback côté serveur

Considérez les paramètres de requête verificationSessionId et status comme des indications d’interface non fiables. Confirmez toujours la décision finale sur votre backend, soit en traitant le webhook (méthode recommandée), soit en récupérant à nouveau la décision via l’API :

// Backend: re-fetch the canonical decision before granting access
app.get('/verification-complete', async (req, res) => {
  const { verificationSessionId } = req.query;

  const response = await fetch(
    `https://verification.didit.me/v3/session/${verificationSessionId}/decision/`,
    {
      headers: { 'x-api-key': process.env.DIDIT_API_KEY },
    }
  );

  if (!response.ok) {
    return res.status(response.status).send(await response.text());
  }

  const decision = await response.json();

  // decision.status uses the canonical enum:
  // Not Started | In Progress | Awaiting User | In Review | Approved |
  // Declined   | Resubmitted | Expired | Kyc Expired | Abandoned
  if (decision.status === 'Approved') {
    // Grant access. Per-feature reports are plural arrays:
    //   decision.id_verifications[], decision.face_matches[], decision.aml_screenings[], ...
  }

  res.redirect('/dashboard');
});

Utiliser les webhooks

Pour une intégration plus fiable, utilisez les webhooks afin de recevoir directement les résultats de vérification sur votre backend, quel que soit le comportement du navigateur de l’utilisateur.

Flux multi-appareil

La méthode par redirection prend naturellement en charge la vérification multi-appareil :

L’utilisateur clique sur « Vérifier » sur ordinateur
L’utilisateur est redirigé vers la page de vérification
Si nécessaire, l’utilisateur peut scanner un code QR pour continuer sur mobile
Une fois la vérification terminée, l’utilisateur est redirigé vers votre URL de rappel. L’appareil qui effectue la redirection est déterminé par callback_method (initiator, completer ou both)

Dépannage

Le callback n’est pas reçu

Vérifiez que l’URL de rappel est correctement définie lors de la création de la session
Assurez-vous que votre URL de rappel est accessible depuis Internet
Vérifiez que l’URL ne contient ni fautes de frappe ni problèmes d’encodage

Le statut est toujours « Declined »

Vérifiez les paramètres de votre workflow dans la Didit Console
Vérifiez que les documents de test que vous utilisez sont valides
Consultez les détails de la session via l’API pour connaître les motifs de refus précis

Boucle de redirection

Assurez-vous que votre gestionnaire de callback ne redirige pas vers la vérification
Vérifiez s’il existe des problèmes de cache sur votre page de callback
Videz le cache du navigateur et réessayez

Dépôt d’exemples

Dépôt GitHub

Consultez le code source et les exemples sur GitHub

Guides

Authentification

Model Context Protocol (MCP)

SDK web

SDK natifs

SDK serveur

Intégrations

Vérification KYC par redirection : page hébergée

Quand utiliser la redirection

Implémentation

Étape 1 : créer une session (backend)

Étape 2 : rediriger l’utilisateur (frontend)

Gestion du callback

Exemple Next.js

Exemple Express.js

Exemple Vue Router

Ouvrir dans un nouvel onglet

Bonnes pratiques de sécurité

Vérifier le callback côté serveur

Utiliser les webhooks

Flux multi-appareil

Dépannage

Le callback n’est pas reçu

Le statut est toujours « Declined »

Boucle de redirection

Dépôt d’exemples

Dépôt GitHub

​Quand utiliser la redirection

​Implémentation

​Étape 1 : créer une session (backend)

​Étape 2 : rediriger l’utilisateur (frontend)

​Gestion du callback

​Exemple Next.js

​Exemple Express.js

​Exemple Vue Router

​Ouvrir dans un nouvel onglet

​Bonnes pratiques de sécurité

​Vérifier le callback côté serveur

​Utiliser les webhooks

​Flux multi-appareil

​Dépannage

​Le callback n’est pas reçu

​Le statut est toujours « Declined »

​Boucle de redirection

​Dépôt d’exemples

Dépôt GitHub

Quand utiliser la redirection

Implémentation

Étape 1 : créer une session (backend)

Étape 2 : rediriger l’utilisateur (frontend)

Gestion du callback

Exemple Next.js

Exemple Express.js

Exemple Vue Router

Ouvrir dans un nouvel onglet

Bonnes pratiques de sécurité

Vérifier le callback côté serveur

Utiliser les webhooks

Flux multi-appareil

Dépannage

Le callback n’est pas reçu

Le statut est toujours « Declined »

Boucle de redirection

Dépôt d’exemples