iFrame

Integração utilizando IFrame

É possível carregar a tela de assinatura dentro da própria aplicação. Para isso, o link de acesso deve ser carregado dentro de um iframe. O exemplo abaixo pode ser utilizado, substituindo a variável URL_PARA_ASSINATURA_DOCUMENTO pelo valor do link retornado no pedido de criação.

<!DOCTYPE html>
<html>
  <!-- Estilização CSS opcional para fazer o iframe ocupar 100% do body da sua aplicação -->
  <style>
    #easySignIframe {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }
  </style>

  <!-- Div necessária para criação do <iframe/> -->
  <body>
    <div id="signature-div"></div>
  </body>
  <script>
    // const signatureLink = Este link referencia a página que será carregada para realizar a assinatura do documento.
    // Este link será retornado no response de criação do envelope de assinatura. 
    // Nele terá um objeto { signers: { iframe: { href: "valor para o signatureLink" }}}.
    const signatureLink = "{URL_PARA_ASSINATURA_DOCUMENTO}";

    const container = "signature-div";

    // Constantes para setar a largura e altura do <iframe/> na sua aplicação
    const width = "1025";
    const height = "500";

    let iframe = document.getElementById("easySignIframe");

    if (!iframe) {
      iframe = document.createElement("iframe");

      iframe.setAttribute("src", signatureLink);
      iframe.setAttribute("id", "easySignIframe");

      // Estilização do iframe
      iframe.setAttribute("width", width);
      iframe.setAttribute("height", height);
      iframe.style.border = 0;
      
      // Comando para permitir obter a geolocalização e câmera do usuário, caso solicitada como evidência da assinatura.
      //OBS:
      // - A autorização para o "allow" define quais recursos estão disponíveis para o <iframe>.
      // - A autorização para a "camera" é necessária para as evidências: 'SELFIE', 'DRIVER_LICENSE', 'LIVENESS' e 'DATAVALID'
      // - A autorização para a "geolocation" é necessária para a evidência: 'GEOLOCATION'
      iframe.setAttribute("allow", "camera; geolocation");

      const cont = document.getElementById(container);

      if (cont) {
        cont.appendChild(iframe);
      }

      // Função de callback para receber eventos do processo de assinatura.
      // - Em caso de sucesso, é emitido uma mensagem com a string "signed".
      // - Em caso de erro, é emitido uma mensagem com a string "error".
      // Neste exemplo é emitido apenas um alert (pop-up padrão do Javascript).
      // Você pode tratar este evento da maneira que desejar na sua aplicação (redirecionamento do usuário, exibição de mensagens de sucesso, dentre outros)
      window.addEventListener(
        "message",
        (event) => {
          if (event.data === "signed") {
            alert("ASSINADO COM SUCESSO");
          }
          if (event.data === "error") {
            alert("ERRO AO REALIZAR A ASSINATURA");
          }
        },
        false
      );
    }
  </script>
</html>