Firma electrónica en aplicaciones Web hecho fácil

Firma electrónica

En el pasado reciente si queríamos incorporar firma electrónica en un PC teníamos que adquirir un farragoso periférico de firma electrónica conectado por USB a una aplicación local que se entendiera con el.
dispositivo de firma electrónica

Pero desde hace algún tiempo hasta los portátiles de gama media incorporan pantallas táctiles que nos permiten interactuar con las aplicaciones o navegar sin tener que usar el minúsculo pad de al lado del teclado. Además, si desarrollamos nuestras aplicaciones Web siguiendo el motto de Bootstrap (‘mobile first’) y pueden accederse desde un móvil o tablet, ¿por qué no aprovecharlo para firmar directamente en el navegador?

Por ello decidimos incorporar esta característica a nuestra aplicación de Gestión Inteligente de Negocios para agilizar la gestión en los casos en los que puede ser necesaria una firma electrónica, y además nos queremos olvidar de ir con albaranes o informes que deba firmar el cliente.

 

Para implementarlo nos decantamos por una librería Javascript llamada Signature Pad. Esta librería nos permite añadir un elemento CANVAS con la que se puede interactuar desde el mismo navegador.

firma electronica en pantalla

Los pasos que se han seguido han sido los siguientes:

1. Incorporar la librería a la aplicación.

2. Modificarla para hacerla multifirma. Esto es: de entrada solo soporta una firma en pantalla pero nosotros queriamos podemos dar a libertad de tener mas de una (por ejemplo, una firma de un técnico on site y un visto bueno de un cliente).

3. Internamente el getter y setter juega con que la imagen se puede escribir y leer domo DATA URI de una imagen, que no es más que una cadena Base64 que se puede asignar al miembro SRC de un nodo IMG.

var imageData =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/' +
'AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QEDCyEGV7C77gAAAB1pVFh0Q29tbWVudA' +
'AAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAxUlEQVR42u3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAA' +
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAAS9p4J4AAAAASUVORK5CYII=';

var img = new Image();
var wrapper = document.getElementById(containingLayer);
var canvas = wrapper.querySelector("canvas");
Session.Canvas[attrName] =  canvas.getContext('2d');

// Draw on image load event
img.onload = function(){
  Session.Canvas[this.attrName].drawImage(this,0,0); 
  screenPads[this.attrName].setNotEmpty();
 };

// Set the image contents
img.src = imageData;

4. El contenido de estas imagenes se guardan y leen del servidor como un fichero binario cualquiera, identificado por un ID en nuestro motor de documentos.

5. A partir de aqui empezar a aplicar nuestra “magia” para que la carga y guardado no penalice el uso de la aplicación:

  1. En la carga de la pantalla, la carga de las imágenes de la firma se hacen de forma asíncrona tras la carga del valor de pantalla.
  2. Si se modifica la firma, esta se guarda en el servidor nada mas cambiarla. Así el guardado general no ha de esperar a nada porque ya están las imágenes guardadas.
  3. Guardar se temporalmente la imagen original, ya que en el extraño caso que se modifique la firma y luego se cancele la edición la firma quede inalterada.

Y con esto y ponerlo un poco bonito, ya podemos incorporar en nuestra instancia de GIN las firmas electrónicas que queramos.

Firma electrónica Bizlogic GIN

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.