iFrame

This document provides instructions for integrating the Onboarding process into an iFrame.

To integrate the Onboarding process into an iFrame, follow the example code provided below. Ensure that you grant access to the device's camera using the allow attribute and enable geolocation to capture the location for the trust platform dashboard. If your template includes Liveness or FaceAuthenticator features, you'll need to allow the following parameters: fullscreen, accelerometer, gyroscope, magnetometer.

<iframe
  src="https://cadastro.io/:token"
  allow="geolocation;camera;fullscreen;accelerometer;gyroscope;magnetometer;"
  allowfullscreen="true"
  style="width: 100vw; height: 100vh; border: 0"
></iframe>

iOS Sensor Permission Requirements for iProov

When your Onboarding template includes a LIVENESS HUB step and it is configured to use iProov Provider for face verification, the button implementation below is required for proper functionality on iOS devices. This ensures motion sensor permissions are granted from the parent page before the iframe loads.

Complete implementation example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Onboarding iframe Example</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #f5f5f5;
      }

      #startButton {
        padding: 16px 32px;
        font-size: 18px;
        background: #051f61;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
      }

      #startButton:hover {
        background: #1fd660;
      }

      iframe {
        display: none;
        width: 100%;
        height: 100vh;
        border: none;
      }
    </style>
  </head>
  <body>
    <!-- Step 1: Show button to request sensor permission -->
    <button id="startButton">Start Onboarding</button>

    <!-- Step 2: Onboarding iframe (hidden initially) -->
    <!-- IMPORTANT: Replace :token with your actual onboarding token -->
    <iframe
      style="width: 100vw; height: 100vh; border: 0"
      id="onboardingIframe"
      allow="geolocation; camera; fullscreen; accelerometer; gyroscope; magnetometer"
      src="https://cadastro.io/:token"
      allowfullscreen="true"
    ></iframe>

    <script>
      // IMPORTANT: This script must run on the PARENT PAGE that hosts the iframe
      // iOS requires sensor permissions to be requested from the parent page, not from within the iframe
      
      // When user clicks the button
      document
        .getElementById("startButton")
        .addEventListener("click", async () => {
          try {
            // Check if device requires motion permission (iOS 13+ Safari)
            if (typeof DeviceMotionEvent.requestPermission === "function") {
              // Request permission from the parent page (required for iOS)
              const permission = await DeviceMotionEvent.requestPermission();

              if (permission === "granted") {
                // Permission granted - show iframe
                showIframe();
              } else {
                // Permission denied
                alert(
                  "Sensor access is required for face verification. Please allow access in your browser settings."
                );
              }
            } else {
              // No permission needed (Android, Desktop, older iOS)
              showIframe();
            }
          } catch (error) {
            console.error("Error:", error);
            alert(
              "Error requesting permissions. Please try again or check your browser settings."
            );
          }
        });

      // Function to show the iframe
      function showIframe() {
        document.getElementById("startButton").style.display = "none";
        document.getElementById("onboardingIframe").style.display = "block";
      }

      // Optional: Listen for messages from the iframe
      window.addEventListener("message", (event) => {
        // Validate origin for security
        // IMPORTANT: Replace with your onboarding domain
        if (event.origin !== "https://cadastro.io") return;
        
        // Handle onboarding completion or other events
        console.log("Onboarding event:", event.data);
      });
    </script>
  </body>
</html>

The Onboarding service may not function correctly within an iFrame if the user has Block third-party cookies enabled in their browser. This is particularly common in anonymous browser sessions.

If you encounter issues with the permission pop-up not appearing, consider specifying the allowed origin in the allow attribute or creating a Content Security Policy (CSP) to define the trusted sources more explicitly.

Last updated 10 months ago