Utilizar el Iframe Universign
Se puede integrar Universign en modo Iframe con el fin agilizar el proceso de firma .
A continuación, encontrará el código para la integración de Iframe Universign en su página de firma:
En producción :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://app.universign.com/sig/embed.js"></script>
<script>
function generateIframe() {
const configuration = {};
configuration.redirectionMode = 'IN';
const signerid = '1a5b56a0-6a58-31e8-80b7-c7601f114455';
/**
* The universignSigInit function add an iframe element as child of element with
* id attribute equals to containerId parameter, the attribute src is set from
* the universignUrl variable, it is the url of the website to be integrated in
* the iframe, the width and height of the iframe will take 100% of its
* container.
*
* @param {string} containerId The id of the element in which we will inject
* the iframe.
* @param {string} signerId The identifier of transaction.
* @param {object} configuration The options list to customize the iframe:
* * redirectionMode {string} This params have two possible values: IN or OUT,
* the dafault value is OUT,
* if the value of this params is equal to OUT the redirection will be done
* outside the iframe(in website container of the iframe),
* if the value of this params is equal to ÌN the redirection will be done
* inside the iframe,
* if the value of this params is otherwise, an exception will be triggered.
*/
universignSigInit('iframeContainerId', signerid, configuration);
}
</script>
</head>
<body onload="generateIframe()">
<div style="display:flex; justify-content:space-between; align-items:stretch; height:56vh;">
<div id="iframeContainerId" style="width:70%; display:inline-block; height:auto;">
</div>
</div>
</body>
</html>
En el ambiente de prueba :
Es necesario remplazar la URL del script "embed.js" por la del ambiente de prueba:
https://sign.test.universign.eu/sig/embed.js
Igualmente, el método /*universignSigInit*/ utilizará un cuarto parámetro que es el URL de la plataforma de prueba:
https://sign.test.universign.eu
La declaración de este método se convierte así en:
universignSigInit('iframeContainerId', signerid, configuration, "https://sign.test.universign.eu");
La Nueva API « Eventos » Universign
Para llevar un mejor registro de lo ocurrido durante el proceso de firma, hemos creado una API de eventos que permite tener mejores formas de rastrear la transacción de firma.
Se puede agregar un “Event Listeners” mediante “pdsEvent” que se inicia cuando un usuario comienza y cuando completa una transacción de firma.Utilice “e.detail.eventType” para obtener el comienzo de la transacción o su final.
Utilise “status” para obtener le status de la transacción:'canceled', 'signed', 'failed', 'ready', 'pending-validation'.
Utilice “e.detail.signerId” para obtener el SignerID de la transacción.
Las siguientes líneas de código son utilizadas para obtener el comienzo y el final de la transacción de firma:
<script type="text/javascript">
// add an appropriate event listener
window.addEventListener('pdsEvent', (e) => {
// e.detail.eventType return 'begin' or 'end' of signature process
// e.detail.signerId get the Signer Id
});
</script>
Si cambia de la antigua versión de la página de firma Universign a la nueva , se debe tener en cuenta que el redireccionamiento se realizaba dentro del iframe , mientras que ahora, el redireccionamento se realiza desde el exterior del iframe.
También debe tenerse en cuenta que el iframe Universign ahora permite que el firmante sea redirigido dentro del iframe o fuera de él.