Changes between Version 2 and Version 3 of actividades_2018_pruebas


Ignore:
Timestamp:
May 30, 2018, 9:40:04 AM (6 years ago)
Author:
pbuitrago
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • actividades_2018_pruebas

    v2 v3  
    55El consume del servicio de Murachí en principio se realizado usando certificados desde dispositivo criptográficos, el proceso de firma electrónica del servicio Murachí se realiza por parte, una parte se va a realizar en el cliente que es donde se encuentra el dispositivo criptográfico y otra parte se va a realizar en el servidor de Murachí   
    66
    7 [[Image()]]
     7[[Image(secuencia_Firma.png​)]]
    88
    99
    1010Como se puede observar en el diagrama de secuencia del lado del cliente se van a realizar 3 procesos:
    11 Subir documento pdf: En este paso se carga al sistema Murachí el archivo usando el recurso “:/Murachi/0.1/archivos/” y se obtiene como respuesta el identificador único del archivo pdf (:identificador_unico_de_archivo_pdf).
    12 Preparar firma del archivo: En este caso se envía el certificado firmante al sistema Murachí junto con otros parámetros necesarios para la firma electrónica. En esta ocasión se utiliza biblioteca de JavaScript Forge y crytpto. Con esta librería podemos gestionar los archivos .p12 o .pfx 
    13 Completar la firma del archivo: En este paso se va a enviar al sistema Murachí el hash cifrado utilizando el recurso :Murachi/0.1/archivos/pdfs/resenas, para completar la firma electrónica. Aquí se utiliza de nuevo la librería JavaScript Forge y Crytpto para acceder al archivo y firmar el hash que se obtuvo en la sección anterior, usando el recurso :firmar_hash(sign). Obtenemos del sistema Murachí el identificador único del archivo firmado.
     11
     12 * ''' Subir documento pdf: ''' En este paso se carga al sistema Murachí el archivo usando el recurso “:/Murachi/0.1/archivos/” y se obtiene como respuesta el identificador único del archivo pdf (:identificador_unico_de_archivo_pdf).
     13
     14 * '''Preparar firma del archivo:''' En este caso se envía el certificado firmante al sistema Murachí junto con otros parámetros necesarios para la firma electrónica. En esta ocasión se utiliza biblioteca de JavaScript Forge y crytpto. Con esta librería podemos gestionar los archivos .p12 o .pfx 
     15
     16 * '''Completar la firma del archivo:''' En este paso se va a enviar al sistema Murachí el hash cifrado utilizando el recurso :Murachi/0.1/archivos/pdfs/resenas, para completar la firma electrónica. Aquí se utiliza de nuevo la librería JavaScript Forge y Crytpto para acceder al archivo y firmar el hash que se obtuvo en la sección anterior, usando el recurso :firmar_hash(sign). Obtenemos del sistema Murachí el identificador único del archivo firmado.
    1417Como el servicio de firma electrónica se realiza en varios pasos vamos a dividir el ejercicio en secciones.
    1518
    16 Sección 1: Subir documento pdf:
    17 
    18 En la primera sección se envía al sistema Murachí el archivo pdf que se va a firmar. Entonces para esta sección se requiere de un formulario que permita tomar del sistema de archivo documentos pdf y luego enviarlo con el método $.ajax usando el recurso /Murachi/0.1/archivos/
    19 
    20 Característica del formulario HTML
     19'''Sección 1: Subir documento pdf:'''
     20
     21En la primera sección se envía al sistema Murachí el archivo pdf que se va a firmar. Entonces para esta sección se requiere de un formulario que permita tomar del sistema de archivo documentos pdf y luego enviarlo con el método ''$.ajax usando el recurso /Murachi/0.1/archivos/''
     22'''
     23Característica del formulario HTML'''
    2124Control:
    22 Botón de envío (Submit button)
    23 Botón de reinicializando (Reset button)
    24 Selección de fichero (file select)
    25 Atributos:
    26 action: función de javaScript que procesa el formulario para esta actividad la función es “SignFilePDF()”
    27 enctype: este atributo específica el tipo de contenido que sera usado para enviar los datos al servidor, para esta actividad se utilizará “multipart/form-data”
    28 Código del formulario HTML:
    29 <form enctype="multipart/form-data" method="post" id="firmar" name="SignFormat">
     25
     26 * Botón de envío (Submit button)
     27 * Botón de reinicializando (Reset button)
     28 * Selección de fichero (file select)
     29
     30Atributos:
     31 
     32 * action: función de javaScript que procesa el formulario para esta actividad la función es “SignFilePDF()”
     33 * enctype: este atributo específica el tipo de contenido que sera usado para enviar los datos al servidor, para esta actividad se utilizará “multipart/form-data”
     34
     35'''Código del formulario HTML:'''
     36|| <form enctype="multipart/form-data" method="post" id="firmar" name="SignFormat">
    3037    <h2>Firmar electr&oacute;nica (PDF)</h2>
    3138    <h3>Seleccione el archivo que va a firmar electr&oacute;nicamente</h2>       
    … …  
    4552<br>
    4653<div id="seccion4"> </div>
    47 
     54||
    4855
    4956Los elementos <div> del formulario con id = "sección1", “sección2” y “sección3” se utiliza para mostrar los resultados correspondientes a los 3 procesos descritos para la firma electrónica (consumo del servicio a Murachí).
    … …  
    5158Como se va a utilizar certificado con soporte a software se requiere tener en la pagina una sección que me permita cargar a la pagina el archivo .p12 o .pxf
    5259
    53 Código del formulario HTML:
    54 <div>
     60'''Código del formulario HTML:'''
     61
     62|| <div>
    5563<label for="pfx">Seleccione el archivo PFX / P12::</label><br>
    5664<input name="pfx" class="form-control" type="file" id="pfx" accept=".pfx,.p12" required /><br
    … …  
    5866<input name="pfxp" class="form-control" type="password" id="pfxp" /><br>
    5967</div>
     68||
    6069
    6170Ahora vamos a necesitar una función en javascript que me permita usar la librería Forge para cargar y acceder al archivo .p12 o .pfx y obtener la información necesaria para realizar el proceso de firma electrónica.
    62 
    63 Función getCertificate(e)
    64 
    65 function getCertificate(e)
     71'''
     72Función getCertificate(e)'''
     73
     74|| function getCertificate(e)
    6675        {
    6776        console.log("*... getCertificate ...*");
    … …  
    117126                reader.readAsArrayBuffer(file);
    118127        }
     128||
    119129
    120130Con esta función obtenemos la clave privada almacenada en la variable privateKey y el certificado almacenado en la variable certBytesHex.
    … …  
    122132La clave privada es un conjunto de bytes que debemos convertir a string, para esto se tiene la siguiente función
    123133
    124 function arrayBufferToString( buffer )
     134|| function arrayBufferToString( buffer )
    125135        {
    126136        var binary = '';
    … …  
    133143        return binary;
    134144        }
    135 
    136 
    137 Función SignFilePDF() Sección 1. Subir documento pdf
     145||
     146
     147
     148'''Función SignFilePDF() Sección 1. Subir documento pdf'''
    138149
    139150En esta sección la función procesa los datos del formulario. Vamos a cargar el archivo .p12 o .pfx y usando la función getCertificate(e), y se obtiene el archivo pdf seleccionado en el formulario a través del método document.getElementById("file-sign") donde “file-sign” corresponde al id del elemento input de tipo “file” del formulario. Luego se almacena en un objeto de tipo FormData que permite el envío del archivo al servidor usando el método $.ajax