iFrame

Este documento fornece instruções para integrar o processo de Onboarding em um iFrame.

Para integrar o processo de Onboarding em um iFrame, siga o exemplo de código fornecido abaixo. Certifique-se de conceder acesso à câmera do dispositivo usando o atributo allow e habilitar a geolocalização para capturar a localização para o painel da plataforma de confiança. Se o seu template incluir recursos de Liveness ou FaceAuthenticator, você precisará permitir os seguintes parâmetros: 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>

Requisitos de permissão de sensores no iOS para iProov

Quando o seu template de Onboarding inclui uma LIVENESS HUB etapa e está configurado para usar o provedor iProov para verificação facial, a implementação do botão abaixo é obrigatória para o funcionamento correto em dispositivos iOS. Isso garante que as permissões dos sensores de movimento sejam concedidas pela página pai antes de o iframe ser carregado.

Exemplo completo de implementação

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Exemplo de iframe de Onboarding</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>
    <!-- Etapa 1: Exibir botão para solicitar permissão do sensor -->
    <button id="startButton">Iniciar Onboarding</button>

    <!-- Etapa 2: iframe de Onboarding (oculto inicialmente) -->
    <!-- IMPORTANTE: Substitua :token pelo seu token real de onboarding -->
    <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>
      // IMPORTANTE: Este script deve ser executado na PÁGINA PAI que hospeda o iframe
      // O iOS exige que as permissões do sensor sejam solicitadas a partir da página pai, e não de dentro do iframe
      
      // Quando o usuário clicar no botão
      document
        .getElementById("startButton")
        .addEventListener("click", async () => {
          try {
            // Verifique se o dispositivo requer permissão de movimento (Safari do iOS 13+)
            if (typeof DeviceMotionEvent.requestPermission === "function") {
              // Solicite permissão a partir da página pai (necessário para iOS)
              const permission = await DeviceMotionEvent.requestPermission();

              if (permission === "granted") {
                // Permissão concedida - exibir iframe
                showIframe();
              } else {
                // Permissão negada
                alert(
                  "O acesso ao sensor é necessário para a verificação facial. Permita o acesso nas configurações do seu navegador."
                );
              }
            } else {
              // Nenhuma permissão necessária (Android, desktop, iOS mais antigos)
              showIframe();
            }
          } catch (error) {
            console.error("Erro:", error);
            alert(
              "Erro ao solicitar permissões. Tente novamente ou verifique as configurações do seu navegador."
            );
          }
        });

      // Função para exibir o iframe
      function showIframe() {
        document.getElementById("startButton").style.display = "none";
        document.getElementById("onboardingIframe").style.display = "block";
      }

      // Opcional: ouvir mensagens do iframe
      window.addEventListener("message", (event) => {
        // Validar a origem por segurança
        // IMPORTANTE: Substitua pelo seu domínio de onboarding
        if (event.origin !== "https://cadastro.io") return;
        
        // Tratar a conclusão do onboarding ou outros eventos
        console.log("Evento de onboarding:", event.data);
      });
    </script>
  </body>
</html>

O serviço de Onboarding pode não funcionar corretamente dentro de um iFrame se o usuário tiver Bloqueio de cookies de terceiros ativado no navegador.

Se você encontrar problemas com o pop-up de permissão não aparecendo, considere especificar a origem permitida no atributo allow ou criar uma Política de Segurança de Conteúdo (CSP) para definir as fontes confiáveis de forma mais explícita.

Atualizado há 10 meses