iFrame
Este documento fornece instruções para integrar o processo de Onboarding em um iFrame.
<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
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>Atualizado

