Personnalisation dynamique et UX : Intégrer l'iFrame de Didit avec JavaScript (FR)

Intégration fluideIntégrez la vérification d'identité robuste de Didit directement dans votre application web en utilisant la méthode InContext iFrame, offrant une configuration rapide et une expérience intégrée.

Personnalisation dynamiqueUtilisez l'API postMessage de JavaScript pour communiquer et styliser dynamiquement l'iFrame intégré, garantissant que l'apparence et la convivialité de votre marque sont maintenues de manière cohérente tout au long du processus de vérification.

Expérience utilisateur amélioréeGérez les événements en temps réel depuis l'iFrame, tels que la complétion ou l'annulation de la vérification, pour fournir un feedback immédiat et guider les utilisateurs à travers un parcours fluide et conforme à votre marque.

Architecture flexible de DiditL'approche modulaire et axée sur les développeurs de Didit, y compris l'iFrame InContext et le SDK JavaScript, permet aux développeurs de créer des flux de vérification d'identité hautement personnalisés et efficaces avec Free Core KYC.

Intégration de l'iFrame InContext de Didit pour la vérification d'identité

Dans le paysage numérique actuel, une vérification d'identité robuste est primordiale pour la sécurité, la conformité et la prévention de la fraude. Didit propose une gamme de méthodes d'intégration, et pour les entreprises recherchant une configuration rapide avec une expérience intégrée, l'iFrame InContext se distingue. Cette méthode vous permet d'intégrer les puissantes capacités de vérification d'identité de Didit directement dans votre application web, en gardant les utilisateurs sur votre domaine. Bien que simple à implémenter, la véritable puissance de l'iFrame réside dans sa capacité à être personnalisé dynamiquement à l'aide de JavaScript, transformant un flux de vérification standard en un parcours utilisateur parfaitement intégré à votre marque.

L'iFrame InContext est idéal pour les scénarios où vous souhaitez un processus de vérification contenu sans rediriger les utilisateurs. Il prend en charge à la fois UniLink (aucun backend requis pour une configuration rapide) et API Session (pour une personnalisation complète avec un backend). En intégrant l'iFrame, vous pouvez tirer parti des fonctionnalités avancées de Didit, y compris l'OCR, l'analyse MRZ et le décodage de codes-barres pour la vérification de documents, tout en gardant le contrôle sur l'interface utilisateur environnante.

Personnalisation dynamique avec l'API postMessage de JavaScript

Bien qu'un iFrame offre une expérience intégrée, il est crucial de maintenir la cohérence de la marque tout au long du parcours utilisateur. C'est là que l'API postMessage de JavaScript devient inestimable. Étant donné que l'iFrame charge du contenu depuis une origine différente (le service de vérification de Didit), la manipulation directe du DOM est bloquée par la politique de même origine. Cependant, postMessage permet une communication sécurisée entre votre page parente et l'iFrame Didit intégré, même entre origines différentes.

En écoutant des événements ou des messages spécifiques de l'iFrame et en lui envoyant des messages, vous pouvez ajuster dynamiquement son apparence ou son comportement. Par exemple, vous pourriez vouloir :

• Modifier la hauteur ou la largeur de l'iFrame en fonction du contenu qui y est chargé.
• Déclencher des actions spécifiques sur votre page parente lorsqu'une étape de vérification est terminée dans l'iFrame.
• Transmettre des paramètres de style à l'iFrame pour qu'il corresponde au thème de votre application, si cela est pris en charge par la configuration de l'iFrame de Didit.

Une configuration typique implique :

1. L'intégration de l'iFrame Didit avec son attribut src pointant vers l'URL de vérification (par exemple, https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64).
2. L'ajout d'un écouteur d'événements à votre fenêtre parente pour intercepter les messages de l'iFrame :

window.addEventListener('message', (event) => {
  // S'assurer que le message provient d'une origine de confiance (domaine de Didit)
  if (event.origin !== 'https://verify.didit.me') return;

  const data = event.data;
  if (data.type === 'didit-verification-event') {
    console.log('Événement iFrame Didit :', data.payload);
    // Gérer les événements comme 'verification_completed', 'verification_failed', etc.
  }
});

Cela permet à votre application de réagir intelligemment à l'état de l'iFrame, guidant l'expérience utilisateur plus efficacement.

Amélioration de l'expérience utilisateur et gestion des événements

Une expérience utilisateur véritablement fluide va au-delà de la simple intégration. Elle implique de fournir un feedback clair, de gérer les états et de traiter avec élégance les différents résultats du processus de vérification. L'intégration de l'iFrame de Didit, en particulier lorsqu'elle est combinée avec JavaScript, permet une gestion sophistiquée des événements qui peut améliorer considérablement l'UX.

Par exemple, après une vérification réussie (que votre backend confirmerait via des webhooks), vous pouvez fermer programmatiquement la modale contenant l'iFrame, afficher un message de succès et intégrer l'utilisateur. Si une vérification échoue ou est annulée, vous pouvez proposer des options pour réessayer ou contacter le support.

Considérez un scénario où vous utilisez la vérification d'identité de Didit pour intégrer de nouveaux utilisateurs. Une fois que l'utilisateur a terminé la capture et la soumission du document dans l'iFrame, Didit traite les données, y compris l'exécution de vérifications de vivacité passive et active pour prévenir la fraude par deepfake. Votre backend reçoit un webhook avec les résultats de la vérification. Vous pouvez ensuite utiliser JavaScript pour :

• Masquer un indicateur de chargement une fois que l'iFrame envoie un événement 'verification_submitted'.
• Mettre à jour l'interface utilisateur pour afficher 'Vérification en attente' pendant que votre backend traite le webhook.
• Afficher 'Vérification approuvée' ou 'Vérification refusée' en fonction du statut final reçu par votre backend et communiqué au frontend.

Ce niveau d'interaction dynamique garantit que les utilisateurs sont toujours informés et engagés, réduisant les taux d'abandon et renforçant la confiance dans votre plateforme.

Choisir la bonne intégration : iFrame vs. SDK JavaScript

Bien que l'iFrame InContext offre une configuration rapide et une commodité intégrée, Didit fournit également un puissant SDK JavaScript pour ceux qui nécessitent un contrôle programmatique maximal. Le SDK, recommandé pour les applications de production, offre la gestion de session, des rappels d'événements et un support TypeScript complet, ce qui le rend idéal pour les applications complexes construites avec React, Vue, Angular ou JavaScript vanilla.

L'iFrame est excellent pour un temps de configuration minimal, souvent moins d'une minute, et pour les scénarios où vous avez besoin d'un flux de vérification contenu et prêt à l'emploi. Cependant, pour les rappels d'événements en temps réel et un contrôle programmatique complet sur le flux utilisateur, le SDK JavaScript offre une flexibilité supérieure. Les deux méthodes prennent en charge la vérification multi-appareils et le marquage blanc, garantissant la cohérence de la marque.

L'engagement de Didit envers une approche axée sur les développeurs signifie que vous avez des options pour intégrer la vérification d'identité d'une manière qui correspond le mieux à votre pile technologique et à vos objectifs d'expérience utilisateur. Que ce soit par la simplicité de l'iFrame ou la puissance du SDK, vous pouvez tirer parti de la plateforme nativement IA de Didit pour créer des flux d'identité sécurisés et efficaces.

Comment Didit aide

Didit fournit les éléments fondamentaux pour créer des expériences de vérification d'identité hautement personnalisables et sécurisées. Notre architecture modulaire vous permet d'intégrer des contrôles d'identité plug-and-play tels que la vérification d'identité, la vivacité passive et active, et la correspondance faciale 1:1 et la recherche faciale, le tout alimenté par une IA de pointe. Pour les solutions intégrées, l'iFrame InContext offre une configuration incroyablement rapide, vous permettant de déployer une vérification robuste avec un minimum d'effort. Pour ceux qui nécessitent une intégration plus approfondie et un contrôle dynamique, notre SDK JavaScript fournit les outils pour créer des parcours utilisateur sur mesure, gérer les événements en temps réel et maintenir une continuité complète de la marque.

La plateforme de Didit est conçue pour les développeurs, offrant un bac à sable instantané, une documentation publique complète et des API claires. Nous éliminons les frais de configuration et proposons un niveau KYC Core gratuit, rendant la vérification d'identité de niveau entreprise accessible. Notre approche nativement IA garantit une grande précision et une automatisation, réduisant le besoin de révisions manuelles et rationalisant vos opérations. Avec Didit, vous pouvez orchestrer les risques et automatiser la confiance à l'échelle mondiale, garantissant une expérience sécurisée et conviviale pour vos clients tout en répondant aux exigences de conformité.

Prêt à commencer ?

Prêt à voir Didit en action ? Obtenez une démo gratuite dès aujourd'hui.

Commencez à vérifier les identités gratuitement avec le niveau gratuit de Didit.