Personalización Dinámica y UX: Adaptando el iFrame de Didit con JavaScript (ES)

Integración PerfectaIntegre la sólida verificación de identidad de Didit directamente en su aplicación web utilizando el método iFrame InContext, ofreciendo una configuración rápida y una experiencia incrustada.

Personalización DinámicaUtilice la API postMessage de JavaScript para comunicarse y estilizar dinámicamente el iFrame incrustado, asegurando que la apariencia y la sensación de su marca se mantengan consistentemente durante todo el proceso de verificación.

Experiencia de Usuario MejoradaManeje eventos en tiempo real desde el iFrame, como la finalización o cancelación de la verificación, para proporcionar retroalimentación inmediata y guiar a los usuarios a través de un viaje fluido y de marca.

Arquitectura Flexible de DiditEl enfoque modular y centrado en el desarrollador de Didit, que incluye el iFrame InContext y el SDK de JavaScript, permite a los desarrolladores crear flujos de trabajo de verificación de identidad altamente personalizados y eficientes con KYC Core gratuito.

Integrando el iFrame InContext de Didit para la Verificación de Identidad

En el panorama digital actual, una verificación de identidad robusta es primordial para la seguridad, el cumplimiento y la prevención del fraude. Didit ofrece una gama de métodos de integración, y para las empresas que buscan una configuración rápida con una experiencia incrustada, el iFrame InContext se destaca. Este método le permite incrustar las potentes capacidades de Verificación de Identidad de Didit directamente dentro de su aplicación web, manteniendo a los usuarios en su dominio. Si bien es simple de implementar, el verdadero poder del iFrame radica en su capacidad de ser personalizado dinámicamente usando JavaScript, transformando un flujo de verificación estándar en un viaje de usuario perfectamente integrado con la marca.

El iFrame InContext es ideal para escenarios donde se desea un proceso de verificación contenido sin redirigir a los usuarios. Admite tanto UniLink (no se requiere backend para una configuración rápida) como Sesión API (para una personalización completa con un backend). Al incrustar el iFrame, puede aprovechar las funciones avanzadas de Didit, incluyendo OCR, análisis de MRZ y decodificación de códigos de barras para la verificación de documentos, mientras mantiene el control sobre la interfaz de usuario circundante.

Personalización Dinámica con la API postMessage de JavaScript

Si bien un iFrame proporciona una experiencia incrustada, mantener la coherencia de la marca en todo el viaje del usuario es crucial. Aquí es donde la API postMessage de JavaScript se vuelve invaluable. Dado que el iFrame carga contenido de un origen diferente (el servicio de verificación de Didit), la manipulación directa del DOM está bloqueada por la política del mismo origen. Sin embargo, postMessage permite una comunicación segura entre orígenes entre su página padre y el iFrame de Didit incrustado.

Al escuchar eventos o mensajes específicos del iFrame y enviarle mensajes, puede ajustar dinámicamente su apariencia o comportamiento. Por ejemplo, es posible que desee:

• Cambiar la altura o el ancho del iFrame según el contenido cargado en su interior.
• Activar acciones específicas en su página padre cuando se completa un paso de verificación dentro del iFrame.
• Pasar parámetros de estilo al iFrame para que coincidan con el tema de su aplicación, si la configuración del iFrame de Didit lo admite.

Una configuración típica implica:

1. Incrustar el iFrame de Didit con su atributo src apuntando a la URL de verificación (por ejemplo, https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64).
2. Agregar un oyente de eventos a su ventana padre para capturar mensajes del iFrame:

window.addEventListener('message', (event) => {
  // Asegúrese de que el mensaje provenga de un origen confiable (el dominio de Didit)
  if (event.origin !== 'https://verify.didit.me') return;

  const data = event.data;
  if (data.type === 'didit-verification-event') {
    console.log('Evento del iFrame de Didit:', data.payload);
    // Manejar eventos como 'verification_completed', 'verification_failed', etc.
  }
});

Esto permite que su aplicación reaccione de manera inteligente al estado del iFrame, guiando la experiencia del usuario de manera más efectiva.

Mejora de la Experiencia de Usuario y Manejo de Eventos

Una experiencia de usuario verdaderamente fluida va más allá de la simple incrustación. Implica proporcionar retroalimentación clara, gestionar estados y manejar con elegancia los diferentes resultados del proceso de verificación. La integración del iFrame de Didit, especialmente cuando se combina con JavaScript, permite un manejo de eventos sofisticado que puede mejorar significativamente la UX.

Por ejemplo, tras una verificación exitosa (que su backend confirmaría a través de webhooks), puede cerrar programáticamente el modal que contiene el iFrame, mostrar un mensaje de éxito y dar la bienvenida al usuario. Si una verificación falla o se cancela, puede ofrecer opciones para reintentar o contactar al soporte.

Considere un escenario en el que está utilizando la Verificación de Identidad de Didit para incorporar nuevos usuarios. Después de que el usuario completa la captura y el envío del documento dentro del iFrame, Didit procesa los datos, incluyendo la realización de verificaciones de vivacidad pasiva y activa para prevenir el fraude de deepfake. Su backend recibe un webhook con los resultados de la verificación. Luego puede usar JavaScript para:

• Ocultar un indicador de carga una vez que el iFrame envía un evento 'verification_submitted'.
• Actualizar la interfaz de usuario para mostrar 'Verificación Pendiente' mientras su backend procesa el webhook.
• Mostrar 'Verificación Aprobada' o 'Verificación Rechazada' según el estado final recibido por su backend y comunicado de vuelta al frontend.

Este nivel de interacción dinámica asegura que los usuarios estén siempre informados y comprometidos, reduciendo las tasas de abandono y generando confianza en su plataforma.

Eligiendo la Integración Correcta: iFrame vs. SDK de JavaScript

Si bien el iFrame InContext ofrece una configuración rápida y una conveniencia incrustada, Didit también proporciona un potente SDK de JavaScript para aquellos que requieren un control programático máximo. El SDK, recomendado para aplicaciones de producción, ofrece gestión de sesiones, devoluciones de llamada de eventos y soporte completo de TypeScript, lo que lo hace ideal para aplicaciones complejas creadas con React, Vue, Angular o JavaScript puro.

El iFrame es excelente para un tiempo de configuración mínimo, a menudo menos de 1 minuto, y para escenarios en los que necesita un flujo de verificación contenido y listo para usar. Sin embargo, para devoluciones de llamada de eventos en tiempo real y control programático completo sobre el flujo de usuario, el SDK de JavaScript proporciona una flexibilidad superior. Ambos métodos admiten la verificación entre dispositivos y el etiquetado en blanco, lo que garantiza la coherencia de la marca.

El compromiso de Didit con un enfoque centrado en el desarrollador significa que tiene opciones para integrar la verificación de identidad de la manera que mejor se adapte a su pila tecnológica y a sus objetivos de experiencia de usuario. Ya sea a través de la simplicidad del iFrame o el poder del SDK, puede aprovechar la plataforma nativa de IA de Didit para construir flujos de trabajo de identidad seguros y eficientes.

Cómo Ayuda Didit

Didit proporciona los componentes fundamentales para crear experiencias de verificación de identidad altamente personalizables y seguras. Nuestra arquitectura modular le permite conectar y usar verificaciones de identidad como la Verificación de Identidad, Vivacidad Pasiva y Activa, y Coincidencia Facial 1:1 y Búsqueda Facial, todo impulsado por IA de vanguardia. Para soluciones incrustadas, el iFrame InContext ofrece una configuración increíblemente rápida, lo que le permite implementar una verificación robusta con un esfuerzo mínimo. Para aquellos que requieren una integración más profunda y un control dinámico, nuestro SDK de JavaScript proporciona las herramientas para construir viajes de usuario a medida, manejando eventos en tiempo real y manteniendo una continuidad completa de la marca.

La plataforma de Didit está diseñada para ser la primera para desarrolladores, ofreciendo un sandbox instantáneo, documentación pública completa y APIs limpias. Eliminamos las tarifas de configuración y ofrecemos un nivel de KYC Core gratuito, lo que hace que la verificación de identidad de nivel empresarial sea accesible. Nuestro enfoque nativo de IA garantiza una alta precisión y automatización, lo que reduce la necesidad de revisiones manuales y agiliza sus operaciones. Con Didit, puede orquestar el riesgo y automatizar la confianza a nivel mundial, garantizando una experiencia segura y fácil de usar para sus clientes mientras cumple con los requisitos de cumplimiento.

¿Listo para Empezar?

¿Listo para ver Didit en acción? Obtenga una demostración gratuita hoy.

Comience a verificar identidades de forma gratuita con el nivel gratuito de Didit.