eSignature in Node.js using HelloSign

Shridhar Bhande

Shridhar Bhande

07 de Abril 2018

¿Qué es eSignature (firma electrónica)?

Cuando se crea un acuerdo con una persona en particular o una organización, se deben tomar las firmas de todas las partes. En tiempos antiguos, se hacia usando la firma con bolígrafo. Ahora se puede hacer fácilmente la firma electrónica en Node.js usando HelloSign, Sample_Signature HelloSign se utiliza básicamente para completar el proceso de eSignature con la ayuda de las API de HelloSign. Esto requiere un esfuerzo mínimo ya que sus APIs son súper geniales y fáciles de usar para su aplicación.

Requisito básico de HelloSign:

  1. Primero, debe crear una cuenta en HelloSign (https://app.hellosign.com/account/logIn?from_logout=1).
  2. Crea una clave API (https://app.hellosign.com/home/myAccount#api)

Hay principalmente 3 formas de enviar una solicitud de firma usando la API de HelloSign:

  1. Usando archivos.
  2. Usando la plantilla o modelo.
  3. Usando archivos y campos de formulario.

En este blog, vamos a hablar sobre la función “Usar archivos y campos de formulario” de Hello Sign.

Usando archivos y campos de formulario:

Embedded Signing (Firma incrustada): La firma incrustada permite a los usuarios firmar solicitudes de firma en su aplicación en un iFrame. La documentación a continuación describe cómo funciona la firma incrustada..

Parámetros del campo de etiquetas de texto: En las etiquetas de texto, se implican dos parámetros:

  1. use_text_tags [boolean] (por defecto es 0)
  2. hide_text_tags [boolean] (por defecto es 0)

Usando “use_text_tags: 1“, puede habilitar la interfaz de usuario HelloSign para interactuar con el firmante. A la interfaz de usuario de HelloSign le gusta el cuadro de firma, el cuadro de texto, el cuadro de fecha y muchos más. Con “hide_text_tags: 1”, puede ocultar las etiquetas usadas arriba indicadas en su propuesta usando el color de fondo en blanco. Comience y termine una etiqueta, use corchetes [] en su documento de propuesta. Dentro de los corchetes, use “|” para dividir las etiquetas. La primera parte de la etiqueta describe el tipo de la etiqueta. La segunda describe si se requiere o no. La tercera parte describe qué firmante firmará el documento de la propuesta. Otras dos etiquetas son opcionales para identificaciones únicas. Por ejemplo:

[sig|noreq|signer1|Label|UniqueId]
[text|noreq|signer1|Label|UniqueId]
[date|noreq|signer1|Label|UniqueId]

En cualquier documento, puede usar N, número de firmantes, como “signerN” en el documento, para que N número de firmantes firmen en el mismo documento. Por ejemplo,

[sig|req|signer1|OptionalLabel|OptionalID]
[sig|req|signerN|OptionalLabel|OptionalID]

Tres etiquetas de texto principales de HelloSign:

Las siguiente 3 etiquetas se utilizan para proporcionar un estilo diferente para el firmante y puede proporcionar múltiples firmantes.

  1. [sig|req|signer1] Esta etiqueta sig se usa para proporcionar el cuadro de firma, donde el firmante puede dibujar o cargar una firma.
  2. [text|req|signer1] Esta etiqueta de texto se utiliza para proporcionar un cuadro de texto, donde el firmante escribe su nombre.
  3. [date|req|signer1] Esta etiqueta de fecha se utiliza para proporcionar una fecha, donde la fecha actual se rellena automáticamente.

Cuando haya especificado las tres etiquetas anteriores en su PDF, se verá así: eSignature in Node.js using HelloSign Cómo agregar una etiqueta de texto en PDF dinámico y estático:

En PDF estático, puede editar PDF usando el editor en línea y establecer tres etiquetas (como [sig|req|signer1], [text|req|signer1] o [date|req|signer1]) donde desea establecer el buzón de firma, cuadro de texto y cuadro de fecha en el PDF. Tenga en cuenta que, mientras edita PDF estático en línea, debe establecer un color blanco de fondo en las etiquetas anteriores, para que estas etiquetas sean invisibles.

En PDF dinámico, cuando genera un PDF a través de un código, puede establecer las tres etiquetas anteriores (como [sig|req|signer1], [text|req|signer1] o [date|req|signer1]) donde desea establecer el cuadro de firma, cuadro de texto y fecha en el PDF. Tenga en cuenta que, al generar Dynamic PDF, debe establecer un color blanco de fondo en las etiquetas anteriores, para que estas etiquetas sean invisibles.

Código del lado del servidor para configuración HelloSign (Backend):

      1. Crear ID de firma para los firmantes:

Ha especificado que se requiere que el firmante [1] firme y que el firmante [2] inicie. La llamada a la API correspondiente para esto podría verse más o menos así:

var hellosign = require('hellosign-sdk')({key: "---Hello Sign API key---"});
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
(In Node we have to set process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0")
var options = {
 clientId: "---client id here---",
 subject: 'Proposal signature request',
 message: 'Awesome, right?',
 use_text_tags: 1,
 hide_text_tags: 1,
 signers: [
 {
 email_address: "signer1 emailAddress1",
 name: "text1"
 },
 {
 email_address: "signer2 emailAddress2",
 name: "text2"
 }
 ],
 files: ["---define path of PDF which is going to attached for e-Signature process---"]
};
hellosign.signatureRequest.createEmbedded(options)
.then(function (response) {
 // Handle success response
 // you can store following 3 IDs (Signature ID, Signer1 ID, Signer2 ID)
})
.catch(function (err) {
 // Handle error response
});
  1. Obtenga la firma URL para el firmante específico basado en la identificación de la firma:
var hellosign = require('hellosign-sdk')({key: "----Hello Sign API key----"});
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
var signUrlData = hellosign.embedded.getSignUrl(signatureId)
 .then(function (response) {
 // Handle success response
 })
 .catch(function (err) {
 // Handle error response
 });

Cuando se abra la URL de la firma de un firmante específico, puede encontrar que se abrirán los siguientes cuadros en su aplicación: Signature_Name Configuración de Hello Sign del lado del cliente (Front-end): Para usarlo, simplemente incluya el siguiente código en su página.

<script type="text/javascript" src="https://s3.amazonaws.com/cdn.hellosign.com/public/js/hellosign-embedded.LATEST.min.js"> <script>
HelloSign.init("CLIENT_ID");
HelloSign.open({
 url: "CLAIM_URL",
 allowCancel: true,
 messageListener: function(eventData) {
 // do something
 }
});

Cuando haya finalizado con ambos lados (Signer1 sign y Signer2 sign), entonces puede simplemente obtener una vista previa del PDF o descargarlo.

Vista previa / Descargar PDF:

var hellosign = require('hellosign-sdk')({key: "-------hello sign API key--------"});
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
hellosign.signatureRequest.download(updatedProposalData.signatureRequestId, {file_type: 'zip'}, function (err, response) {
var filePath = config.uploads.zipFiles.dest + proposalId + '.zip';
var file = fs.createWriteStream(filePath);
 response.pipe(file);
 file.on('finish', function () {
 file.close();
 });
});

Después de descargar con éxito un archivo zip, extraerlo y obtener su PDF firmado, código de muestra en Nodejs:

var extract = require('extract-zip')
extract(path.join(__dirname, '---path of your store zip file path---'),
 {dir: path.join(__dirname, '---path to store extract PDF file---')}, function (err) {
 if (err) {
 // Handle error response
 } else {
 // extraction is complete
 fs.unlink(path.join(__dirname, '---path of your store zip file path---'), function (err, data) {
 // Remove zip from our system
 });
 }
});

Nota:

 

    1. Cuando obtiene la URL de firma para signer1 (Por ejemplo, cuando obtiene la URL de firma para el firmante 1 basado en la API “hellosign.embedded.getSignUrl”) Hello Sign API reconoce internamente, qué firmante es y abre el respectivo signo específico y un cuadro de texto para eso basado en ID del firmante.
    2. Si está utilizando Hello Sign API en modo de prueba, entonces debe establecer y en “test_mode”: 1 en el lado del servidor y “skipDomainVerification”: verdadero el lado del cliente.

Referencia:

  1. https://app.hellosign.com/api/embeddedSigningWalkthrough
  2. https://app.hellosign.com/api/signature_request/files
  3. https://app.hellosign.com/api/textTagsWalkthrough

Request a quote