Onboarding

Nossa solução para validação de identidade possui três fluxos diferentes:

Fluxo	Finalidade
Documento	Captura o documento de seu usuário, garante a qualidade da imagem e extrai as informações desejadas.
Prova de Vida	Realiza a captura biométrica com prova de vida.
Completo	Realiza a captura de documento, garante a qualidade da imagem, extrai as informações desejadas, faz a captura biométrica com prova de vida e também efetua a comparação de faces (Face Match).

Compatibilidade

Este produto pode ser facilmente integrado em diversas plataformas e frameworks através de iframes, uma vez que eles são amplamente suportados em ambientes web. Abaixo estão alguns exemplos de onde o iframe pode ser utilizado:

Aplicações Web: Compatível com frameworks modernos como React, Angular, Vue.js, Next.js, Svelte, entre outros.
Aplicações Móveis Híbridas: Em aplicativos construídos com React Native (via WebView), Ionic e Cordova, permitindo integração em ambientes móveis.

Como Usar

1º Passo: Autenticação

Para acessar nossa aplicação é necessário um OnboardingID. Para gerar um, basta seguir os passos descritos no sub-menu API de Abertura de Sessão

2º Passo: Inicialização

Com o OnboardingID em mãos, basta utilizar a seguinte URL em seu iframe ou webview:

https://iframe.bigdatacorp.com.br/onboardingID

Exemplo: https://iframe.bigdatacorp.com.br/0e2701ff-927a-4abc-84e9-026121dc7cfe

3º Passo: Finalização

Quando o usuário finalizar o fluxo, você será notificado via Post Message do componente web que está utilizando.

Parâmetro	Explicação
STATUS_CODE	Status interno utilizado para reconhecer o que aconteceu com a aplicação.
MESSAGE	Mensagem com uma breve descrição sobre o acontecido.
ON_FINISH	Informa se o componente web deve ser encerrado ou não.

STATUS_CODE	MESSAGE	ON_FINISH
`2`	`Ok`	`true`
`-100`	`Access Denied`	`true`
`-201`	`TimeOut`	`true`
`-202`	`Max retries`	`true`
`-298`	`Invalid Request`	`true`
`-299`	`Unexpected`	`true`
`-400`	`Closed without completing`	`true`
`-401`	`Timeout the user session has expired`	`true`
`-499`	`Unexpected API error`	`true`
`-500`	`Auth Error`	`true`
`-1000`	`Improper computer access`	`true`

⚠️
Atenção
Ao ser notificado via Post Message, apenas leve em consideração as mensagens que possuam como SOURCE 'webview-handle-event'. Qualquer outra notificação deve ser desconsiderada.
Exemplo de como usar:
 if (event.data.ON_FINISH && event.data.SOURCE === "webview-handle-event")

Exemplo de Post Message

useEffect(() => {
    if (!open) return;

    function handleIncomingMessage(event: MessageEvent) {
        // During liveness, as we are an Iframe, there are events that we cannot capture, this part is responsible for passing on the information we need.
        const iframe = document.getElementById("bdc-iframe") as HTMLIFrameElement;
        if (iframe && iframe.contentWindow) {
            iframe.contentWindow.postMessage(event.data, "https://iframe.bigdatacorp.com.br/");
        }
        //This event is responsible for reading the return of our postMessage which will indicate whether the user completed the flow/left without completing/timeout/other cases
        if (event.origin === "https://iframe.bigdatacorp.com.br") {
            setData(event.data);

             if (event.data.ON_FINISH && event.data.SOURCE === "webview-handle-event") setOpen(false);
        }
    }

    window.addEventListener("message", handleIncomingMessage);

    return () => {
        window.removeEventListener("message", handleIncomingMessage);
    };
}, [open]);

Exemplo Completo em React

import React, { useEffect } from "react";
import { Button } from "./components/ui/button";
import { Input } from "./components/ui/input";

interface IData {
  STATUS_CODE: number;
  MESSAGE: string;
  ON_FINISH: boolean;
}

function App() {
  const [IFrameURL, setIFrameURL] = React.useState<string>("");
  const [open, setOpen] = React.useState<boolean>(false);
  const [data, setData] = React.useState<IData>({
    STATUS_CODE: 0,
    MESSAGE: "",
    ON_FINISH: false,
    SOURCE: "webview-handle-event"
  });

  useEffect(() => {
    if (!open) return;

    function handleIncomingMessage(event: MessageEvent) {
        // During liveness, as we are an Iframe, there are events that we cannot capture, this part is responsible for passing on the information we need.
        const iframe = document.getElementById("bdc-iframe") as HTMLIFrameElement;
        if (iframe && iframe.contentWindow) {
            iframe.contentWindow.postMessage(event.data, "https://iframe.bigdatacorp.com.br/");
        }
        //This event is responsible for reading the return of our postMessage which will indicate whether the user completed the flow/left without completing/timeout/other cases
        if (event.origin === "https://iframe.bigdatacorp.com.br") {
            setData(event.data);

             if (event.data.ON_FINISH && event.data.SOURCE === "webview-handle-event") setOpen(false);
        }
    }

    window.addEventListener("message", handleIncomingMessage);

    return () => {
        window.removeEventListener("message", handleIncomingMessage);
    };
}, [open]);


  useEffect(() => {
    // console.log(data);
  }, [data]);

  const handleIFrameURL = (e: any) => {
    // console.log(e.target.value)
    setIFrameURL(`https://iframe.bigdatacorp.com.br/${e.target.value}`)
  }

  if (!open) {
    return (
      <>
        <Input type="text" placeholder="Insira o onboardingID aqui" onChange={handleIFrameURL}/>
        <Button onClick={() => setOpen(true)}>Fazer onboarding</Button>
      </>
    );
  }

  return (
    <>
      <iframe
        src={IFrameURL}
        allow="camera"
        className="w-dvw h-dvh"
        id="bdc-iframe"
      />
    </>
  );
}

export default App;