Embed Identity Verification: iFrame Integration Guide

In today’s digital landscape, verifying user identities is crucial for fraud prevention, compliance, and building trust. Embedding identity verification directly into your web application provides a streamlined user experience. This guide will walk you through integrating Didit’s identity verification solution using an iFrame, covering everything from initial setup to event handling and best practices. We’ll focus on a robust and secure identity verification iFrame implementation.

Key Takeaway 1 iFrames offer a quick and straightforward way to integrate identity verification without extensive code changes to your core application.

Key Takeaway 2 Securely managing communication between your application and the iFrame through event handling is paramount for data integrity.

Key Takeaway 3 Leveraging Didit's APIs alongside the iFrame provides granular control over the verification process and access to detailed verification results.

Key Takeaway 4 Proper configuration and security measures are essential when using iFrames to prevent cross-site scripting (XSS) vulnerabilities.

Why Use an iFrame for Identity Verification?

Integrating identity verification can be complex, requiring significant development effort. iFrames offer a simplified approach, encapsulating the verification process within a separate HTML document embedded in your webpage. This provides several advantages:

• Reduced Integration Complexity: Minimize changes to your existing codebase.
• Security: iFrames operate in a sandboxed environment, limiting potential security risks.
• Faster Implementation: Get up and running quickly without extensive development cycles.
• Maintainability: Updates to the verification process are contained within the iFrame, minimizing disruption to your application.

Setting Up the iFrame: A Step-by-Step Guide

Here’s how to embed Didit’s identity verification iFrame into your web application:

1. Obtain the iFrame URL: From your Didit Business Console, generate a verification link (Unilink) and set the embed parameter to true. This will return a URL specifically designed for iFrame embedding.
2. Create the iFrame Element: Add an <iframe> element to your HTML page.
3. Set iFrame Attributes: Configure the iFrame with the following attributes:
   • src: Set this to the iFrame URL obtained in step 1.
   • width: Define the width of the iFrame.
   • height: Define the height of the iFrame.
   • frameborder: Set to 0 to remove the border.

Example HTML Code:

<iframe src="https://business.didit.me/verification?embed=true&apiKey=YOUR_API_KEY" width="600" height="400" frameborder="0"></iframe>

Important Note: Replace YOUR_API_KEY with your actual Didit API key. Always use HTTPS for the iFrame source to ensure secure communication.

JavaScript Integration and Event Handling

For robust JavaScript integration, you’ll need to handle events emitted by the iFrame. This allows your application to respond to verification events like completion, failure, or error. Didit’s iFrame uses postMessage for secure cross-origin communication.

Listening for Messages:

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://business.didit.me') {
    return;
  }

  const message = JSON.parse(event.data);

  switch (message.type) {
    case 'verification_completed':
      // Handle successful verification
      console.log('Verification completed:', message.data);
      break;
    case 'verification_failed':
      // Handle verification failure
      console.error('Verification failed:', message.data);
      break;
    case 'error':
      // Handle errors
      console.error('Error:', message.data);
      break;
    default:
      console.log('Unknown message:', message);
  }
});

Sending Messages to the iFrame:

const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage({ type: 'resize', height: 500 }, 'https://business.didit.me');

Security Considerations for iFrame Embedding

While iFrames offer convenience, security should be a top priority. Here are key considerations:

• Origin Verification: Always verify the event.origin in your message listener to ensure messages are coming from the expected domain (https://business.didit.me).
• XSS Protection: Sanitize any data received from the iFrame before displaying it in your application to prevent cross-site scripting (XSS) attacks.
• HTTPS Only: Always use HTTPS for both your application and the iFrame source.
• Content Security Policy (CSP): Implement a strong Content Security Policy to restrict the resources the iFrame can load.

How Didit Helps

Didit simplifies the web embedding process with:

• Dedicated iFrame URL: Easy-to-use URLs specifically designed for iFrame integration.
• Secure Communication: postMessage API for safe cross-origin communication.
• Comprehensive Event Handling: Detailed events for tracking verification status and handling errors.
• API Integration: Access to Didit’s full API suite for advanced control and data access.
• Scalable Infrastructure: Reliable and scalable infrastructure to handle high volumes of verification requests.

Ready to Get Started?

Ready to seamlessly integrate identity verification into your web application? Explore Didit's comprehensive documentation and resources:

• Technical Documentation
• Demo Center
• Pricing

Start building a more secure and trusted online experience with Didit today!