source: prototipo_portal_2018/WebContent/index.html

Last change on this file was 563bbcc, checked in by Pedro Buitrago <pbuitrago@…>, 8 years ago

se agrego mensajes de error en espanol con los diferentes errores usando el complemento del navegador que trabaja con las smarcart o token
  • Property mode set to 100644
File size: 46.2 KB
Line 
1<!DOCTYPE html>
2<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
3<html lang="en">
4    <head> <!--Inicio del head  -->
5        <meta charset="UTF-8"/>
6        <link href="bootstrap.min.css" rel="stylesheet">
7        <link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap.css">
8        <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
9       
10        <script type="text/javascript" src="jquery.min.js"></script>
11        <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
12        <script type="text/javascript" src="js/dataTables.bootstrap.js"></script>
13        <script src="bootstrap.min.js" type="text/javascript"></script>
14       
15        <link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
16        <script src="js/jquery.form.js" type="text/javascript"></script>
17        <script src="js/fileinput.js" type="text/javascript"></script> 
18        <script type="text/javascript" src="gitversion.js"></script>
19        <script type="text/javascript" src="hwcrypto-legacy.js"></script>
20        <script type="text/javascript" src="hwcrypto.js"></script>
21        <script type="text/javascript" src="hex2base.js"></script>
22       
23        <script type="text/javascript" charset="utf-8">
24            $(document).ready(function() {
25                $('table.display').dataTable();
26            } );
27        </script>
28
29        <style>
30
31            .file-preview-thumbnails .file-preview-frame,
32            .file-preview-thumbnails .file-preview-frame object {
33                min-height: 300px !important;
34                width: 98% !important;
35             }
36
37             .file-preview-thumbnails .file-preview-frame video {
38                 min-height: 300px !important;
39                 width: 98% !important;
40              }
41
42              .file-preview-thumbnails .file-preview-frame audio {
43                  min-height: 300px !important;
44                  width: 98% !important;
45              }
46
47              .file-preview-thumbnails .file-preview-frame .file-preview-image {
48                  min-height: 300px !important;
49                  width: 98% !important;
50              }
51
52              .file-preview-thumbnails .file-preview-frame .file-preview-text {
53                  min-height: 300px !important;
54                  width: 98% !important;
55              }
56        </style>
57
58       
59        </head> <!--fin del head  -->
60       
61        <!-- Header -->
62        <header>
63                <div id="barner">
64                        <center>
65                        <img class="img-responsive" alt="Cinque Terre" src="cabecera.png">
66                       
67                </div>
68       
69                <nav class="navbar navbar-inverse">
70                <div class="container-fluid">
71                        <div class="navbar-header">
72                                <a class="navbar-brand" href="https://www.cenditel.gob.ve/">CENDITEL</a>
73                        </div>
74                        <div>
75                                <ul class="nav navbar-nav navbar-right">
76                                        <li class="active"><a href="#">Home</a></li>
77                                        <li><a href="https://tibisay.cenditel.gob.ve/murachi">Wiki</a></li>
78                                        <li><a href="#">Contacto</a></li>
79                                </ul>
80                        </div>
81                </div>
82        </nav>
83        </header>
84<!-- End Header -->
85       
86<!--    <div class="container">
87                <div class="jumbotron">
88                       
89
90                        <h1><img src="version-beta2.png">Portal de firma electrónica y verificación</h1>
91                        <p>Sistema para firmar electrónicamente documentos y verificar los documentos firmados</p>
92                </div>
93        </div>
94-->
95<div class="container">
96    <div class="jumbotron">
97        <h2 align="center"><img src="Banner_4.png" width="100%" height="50%"><I>Portal de firma electrónica y verificación</I></h2    >
98        <!--<p>Sistema para firmar electrónicamente documentos y verificar los documentos firmados</p></h1> -->
99    </div>
100</div>
101
102
103
104<!--Inicio Funciones que utiliza el sistema -->
105       
106        <!-- tomado de https://open-eid.github.io/hwcrypto.js/sign.html -->
107        <script>
108
109        function log_text(s) {
110                var d = document.createElement("div");
111                d.innerHTML = s;
112                document.getElementById('log').appendChild(d);
113        }
114
115        function debug() {
116                window.hwcrypto.debug().then(function(response) {log_text("Debug: " + response);});
117        }
118       
119        function sign() {
120               
121                alert("sign()");
122                // Clear log
123                document.getElementById('log').innerHTML = '';
124                // Timestamp
125                log_text("sign() clicked on " + new Date().toUTCString());
126               
127                // Select hash
128                //var hashtype = $("input[name=hash]:checked").val();
129                var hashtype = "SHA-256";
130               
131                // Set backend if asked
132                //var backend =  $("input[name=backend]:checked").val()
133                var backend = "autodetect";
134               
135                // get language
136                var lang = "en";
137                if (!window.hwcrypto.use(backend)) {
138                        log_text("Selecting backend failed.");
139                }
140
141                        var hash = $("#hashvalue").val();
142                        log_text("Signing " + hashtype + ": " + hash);
143                // debug
144                window.hwcrypto.debug().then(function(response) {
145                        log_text("Debug: " + response);
146                        }, function(err) {
147                                log_text("debug() failed: " + err);
148                                return;
149                        });
150                // Sign
151                window.hwcrypto.getCertificate({lang: lang}).then(function(response) {
152                        var cert = response;
153                        log_text("Using certificate:\n" + hexToPem(response.hex));
154                       
155                       
156                        window.hwcrypto.sign(cert, {type: hashtype, hex: hash}, {lang: lang}).then(function(response) {
157                                log_text("Generated signature:\n" + response.hex.match(/.{1,64}/g).join("\n"));
158                                }, function(err) {
159                                log_text("sign() failed: " + err);
160                                });
161                        }, function(err) {
162                                log_text("getCertificate() failed: " + err);
163                        }
164                       
165                        );
166                }
167        </script>
168       
169        <script>
170        function logGetCertificate() {
171               
172                alert("logGetCertificate()");
173                // Clear log
174        document.getElementById('log').innerHTML = '';
175                // Timestamp
176                log_text("sign() clicked on " + new Date().toUTCString());
177               
178                // Select hash
179                //var hashtype = $("input[name=hash]:checked").val();
180                var hashtype = "SHA-256";
181               
182                // Set backend if asked
183                //var backend =  $("input[name=backend]:checked").val()
184                var backend = "autodetect";
185               
186                // get language
187                var lang = "en";
188                if (!window.hwcrypto.use(backend)) {
189                log_text("Selecting backend failed.");
190                }
191
192                        var hash = $("#hashvalue").val();
193                        log_text("Signing " + hashtype + ": " + hash);
194                // debug
195                window.hwcrypto.debug().then(function(response) {
196                        log_text("Debug: " + response);
197                }, function(err) {
198                                log_text("debug() failed: " + err);
199                                return;
200                });
201                // Sign
202        window.hwcrypto.getCertificate({lang: lang}).then(function(response) {
203                        var cert = response;
204                        log_text("Using certificate:\n" + hexToPem(response.hex));
205        });
206    }
207       
208       
209        function getCertificate() {
210               
211                alert("getCertificate()");
212                // Clear log
213        document.getElementById('log').innerHTML = '';
214                // Timestamp
215                log_text("sign() clicked on " + new Date().toUTCString());
216               
217                // Set backend if asked
218                //var backend =  $("input[name=backend]:checked").val()
219                var backend = "autodetect";
220               
221                // get language
222                var lang = "en";
223                if (!window.hwcrypto.use(backend)) {
224                log_text("Selecting backend failed.");
225                }
226        window.hwcrypto.getCertificate({lang: lang}).then(function(response) {
227                        var cert = response;
228                        log_text("Using certificate:\n" + hexToPem(response.hex));
229                        return cert;
230        });
231    }
232        </script>
233
234        <!-- Función que se conecta al servicio web de verificación de la firma electrónica
235                captura el evento submit y toma el formulario para firmar -->
236       
237        <script>
238    $(function(){
239        $("#firmar").on("submit", function(e){
240            e.preventDefault();
241            var f = $(this);
242            // inicio control de los botones radio en el formulario firmar (pdf,bdoc)-------------------------------------------- 
243
244            //alert("manejo de JsonPDF");
245           
246        // FIRMA DE PDF
247            if(document.SignFormat.optradio[0].checked) // chequea si el botón radio PDF esta seleccionado y entra a la sección en caso contrario va al otro if (botón radio BDOC)
248                {
249                //alert(document.SignFormat.optradio[0].value);
250                        //alert("se presiono firmar pdf")
251           
252            //var formData = new FormData(document.getElementById("verificar"));
253            var formData = new FormData();
254           
255            //formData.append("dato", "valor");
256            formData.append("upload", $("#file-sign")[0].files[0]);
257//            console.log(formData);
258            console.log($("#file-sign")[0].files[0]);
259            //formData.append(f.attr("name"), $(this)[0].files[0]);
260           
261            //alert("antes de ajax");
262           
263            $.ajax({
264                //url: "https://192.168.12.125:8443/Murachi/0.1/archivos",               
265                url: "https://murachi.cenditel.gob.ve/Murachi/0.1/archivos",
266                type: "post",
267                dataType: "json",
268                data: formData,
269                cache: false,
270                contentType: false,
271                                processData: false,
272                                headers: {"Authorization":"Basic YWRtaW46YWRtaW4="},
273                                success: function(response) {
274                                                //alert(JSON.stringify(response));
275                                                var html = manejoJsonPDF(JSON.stringify(response));
276                                                //alert(html);
277                                                //alert("ver respuesta")
278                                                document.getElementById("respuesta").innerHTML = html;
279                                               
280                                                // identificador del archivo en el servidor
281                                                var fileId = response.fileId.toString();
282                                                //alert("fileId: "+ fileId);
283                                                                                                                                               
284                                                // seleccionar certificado del firmante
285                                                //alert("va a seleccionar certificado");
286                                                var cert;
287                                                window.hwcrypto.getCertificate({lang: "en"}).then(function(response) {
288                                                        var cert = response;
289                                                        //log_text("Using certificate:\n" + hexToPem(response.hex));
290                                                                                                       
291                                                        //alert("cert: "+ cert.hex);
292                                                       
293                                                        var parameters = JSON.stringify({
294                                                                "fileId":fileId,
295                                                                "certificate":cert.hex,
296                                                                "reason":"prueba firma web",
297                                                                "location":"Oficina",
298                                                                "contact":"582746574336",
299                                                                "signatureVisible":"true"
300                                                                });
301                                                       
302                                                        // ahora llamar al ajax de obtener la resena del pdf
303                                                        $.ajax({
304                                                                type: 'POST',
305                                                                contentType: 'application/json',                               
306                                                                //url:"https://192.168.12.125:8443/Murachi/0.1/archivos/pdfs",
307                                                                url:"https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/pdfs",
308                                                                dataType: "json",
309                                                                data: parameters,               
310                                                                headers: {"Authorization":"Basic YWRtaW46YWRtaW4="},
311                                                                success: function(data, textStatus, jqXHR){
312                                                                        var json_x = data;
313                                                                        var hash = json_x['hash']; 
314                                                                        //alert("hash recibido del servidor "+hash);
315                                                                       
316                                                                        var hashtype = "SHA-256";
317                                                                        var lang = "eng";
318                                                                       
319                                                                        window.hwcrypto.sign(cert, {type: hashtype, hex: hash}, {lang: lang}).then(function(signature) {
320                                                                               
321                                                                                //var signature = response.hex.match(/.{1,64}/g).join("\n");
322                                                                        //log_text("Generated signature:\n" + response.hex.match(/.{1,64}/g).join("\n"));
323                                                                        //log_text("Generated signature:\n" + signature.hex);
324                                                                       
325                                                                        //alert("valor de la firma: " + signature.hex);
326                                                                       
327                                                                        $.ajax({
328                                                                                        type: 'POST',
329                                                                                        contentType: 'application/json',
330                                                                                        //url:"https://192.168.12.125:8443/Murachi/0.1/archivos/pdfs/resenas",
331                                                                                        url:"https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/pdfs/resenas",
332                                                                                        dataType: 'json',
333                                                                                        data: JSON.stringify({"signature":signature.hex}),
334                                                                                        headers: {"Authorization":"Basic YWRtaW46YWRtaW4="},
335                                                                                        success: function(data, textStatus, jqXHR){
336                                                                                                /*
337                                                                                                var json_x = data;
338                                                                                                var msg = json_x['message'];                                                                                           
339                                                                                                alert('Archivo firmado en el servidor: ' + msg);
340                                                                                                */
341                                                                                                alert('Archivo firmado correctamente: ' + data['signedFileId']);
342                                                                                               
343                                                                                                //alert("ver respuesta");
344                                                                                                //var linkToDownload = "<a href=\"https://192.168.12.125:8443/Murachi/0.1/archivos/descargas/" + data['signedFileId'] +"\">descargar archivo firmado</a>";
345                                                                                                //var linkToDownload = "<a href=\"https://172.16.137.11:8443/Murachi/murachi/archivos/descargas/" + data['signedFileId'] +"\">descargar archivo firmado</a>";
346                                                                                                var linkToDownload = "<a href=\"https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/descargas/" + data['signedFileId'] +"\">descargar archivo firmado</a>";
347                                                                                                //alert(linkToDownload);
348                                                                                                document.getElementById("respuesta").innerHTML = linkToDownload; 
349                                                                                               
350                                                                                               
351                                                                                                //descargar el archivo
352                                                                                                /*
353                                                                                                //var urlToDownload =   "https://192.168.12.125:8443/Murachi/murachi/archivos/descargas/" + data['signedFileId'];
354                                                                                                $.ajax({
355                                                                                                        type: 'GET',
356                                                                                                        contentType: false,
357                                                                                                        url: "https://192.168.12.125:8443/Murachi/murachi/archivos/descargas/" + data['signedFileId'],
358                                                                                                        dataType: false,
359                                                                                                        data: false,
360                                                                                                        success: function(data, textStatus, jqXHR){
361                                                                                                                alert("descargo el archivo");
362                                                                                                        },
363                                                                                                        error: function(jqXHR, textStatus, errorThrown){
364                                                                                                                alert('error en descarga de archivo: ' + textStatus);
365                                                                                                                $("#respuesta").html("error en descarga de archivo: " + textStatus);
366                                                                                                        }
367                                                                                                });
368                                                                                                */
369                                                                                                // fin de descarga de archivo
370                                                                                                                                                                                               
371                                                                                               
372                                                                                        },
373                                                                                        error: function(jqXHR, textStatus, errorThrown){
374                                                                                                alert('error en pdfs/resenas: ' + textStatus);
375                                                                                                $("#respuesta").html("error en pdfs/resenas: " + textStatus);
376                                                                                        }
377                                                                                });
378                                                                                                                       
379                                                                        }, function(err) {
380                                                                                log_text("sign() failed: " + err);
381                                                                                var error;
382                                                                                if(err == "Error: user_cancel") {
383                                                                                    alert("sign() failed: El usuario cancelo la operación"    );
384                                                                                    error = "El usuario cancelo la operación"; 
385                                                                                }     
386                                                                                else if(err == "Error: no_certificates") {
387                                                                                    alert("sign() failed: No hay certificado disponible")    ;
388                                                                                    error = "No hay certificado disponible";
389                                                                                }
390                                                                                else if(err == "Error: no_implementation") {
391                                                                                    alert("sign() failed: No hay soporte para el manejo del certificado");
392                                                                                    error = "No hay soporte para el manejo del certificado";
393                                                                                }
394                                                                                //alert("sign() failed: " + err);
395                                                                                $("#respuesta").html("sign() failed: " + error);
396                                                                });
397                                                                       
398                                                                },                                                             
399                                                                error: function(jqXHR, textStatus, errorThrown){
400                                                                        //alert('error: ' + textStatus);
401                                                                        //var responseText = jQuery.parseJSON(jqXHR.responseText);
402                                                                        alert('ajax error function: ' + jqXHR.responseText);
403                                                                        $("#respuesta").html("error function: " + jqXHR.responseText);
404                                                                }
405                                                               
406                                               
407                                                        });
408                                                       
409                                                       
410                                                       
411                                                }, function(err) {
412                                                        log_text("getCertificate() failed: " + err);
413                                                        var error;
414                                                        if(err == "Error: user_cancel") {
415                                                            alert("getCertificate() failed: El usuario cancelo la operación");
416                                                            error = "El usuario cancelo la operación"; 
417                                                        }     
418                                                        else if(err == "Error: no_certificates") {
419                                                            alert("getCertificate() failed: No hay certificado disponible");
420                                                            error = "No hay certificado disponible";
421                                                        }
422                                                        else if(err == "Error: no_implementation") {
423                                                            alert("getCertificate() failed: No hay soporte para el manejo del certificado");
424                                                            error = "No hay soporte para el manejo del certificado";
425                                                        }
426                                                        //alert("getCertificate() failed: " + err);
427                                                        $("#respuesta").html("getCertificate() failed: " + error);
428                                                });
429                                               
430                                               
431                                               
432                    },
433                        error: function(response) {
434                                //Que se ejecuta cuando finalice la petición de con error
435                                                $("#respuesta").html('Error...!!!');
436                                alert("ocurrio un error")
437                                        }
438            });
439                }
440       
441        // FIRMA DE BDOC               
442            if(document.SignFormat.optradio[1].checked) //chequea si el botón radio BDOC esta seleccionado y entra
443            {
444                //alert(document.SignFormat.optradio[1].value);
445                        //alert("se presiono firmar")
446           
447            //var formData = new FormData(document.getElementById("verificar"));
448            var formData = new FormData();
449            var fileInput = document.getElementById("file-sign");
450            var list = fileInput.files;
451            for (var i=0; i<list.length; i++){
452                                formData.append("upload", $("#file-sign")[0].files[i]);
453                        }
454            //console.log($("#file-sign"));
455                        //alert(list.length);
456            //formData.append("dato", "valor");
457            // TODO: identificar una manera de pasar varios archivos a la vez
458            //formData.append("upload", $("#file-sign")[0].files[0]);
459           
460           
461           
462            $.ajax({
463                //url: "https://192.168.12.125:8443/Murachi/0.1/archivos/bdocs/cargas",
464                url: "https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/bdocs/cargas",
465                //url: "https://172.16.137.11:8443/Murachi/0.1/archivos/bdocs/cargas",
466                type: "post",
467                dataType: "json",
468                data: formData,
469                cache: false,
470                contentType: false,
471                                processData: false,
472                                headers: {"Authorization":"Basic YWRtaW46YWRtaW4="},
473                                success: function(response) {
474                                                //alert(JSON.stringify(response));
475                                               
476                                                //var aux = JSON.stringify(response);
477                                                //alert("aux: " + aux);
478
479                                                // identificador del archivo en el servidor
480                                                var fileId = response.containerId.toString();
481                                                //alert("fileId: "+ fileId);
482                                               
483                                                // seleccionar certificado del firmante
484                                                //alert("va a seleccionar certificado");
485                                                var cert;
486                                                window.hwcrypto.getCertificate({lang: "en"}).then(function(response) {
487                                                        var cert = response;
488                                                        //log_text("Using certificate:\n" + hexToPem(response.hex));
489                                                                                                       
490                                                        //alert("cert: "+ cert.hex);
491                                                       
492                                                        var parameters = JSON.stringify({
493                                                                "fileId":fileId,
494                                                                "certificate":cert.hex,
495                                                                "city":"Rubio",
496                                                                "state":"Tachira",
497                                                                "postalCode":"1234",
498                                                                "country":"Venezuela",
499                                                                "role":"Militar",
500                                                                "addSignature":false
501                                                                });
502                                                       
503                                                        // ahora llamar al ajax de obtener la resena del bdoc
504                                                        $.ajax({
505                                                                type: 'POST',
506                                                                contentType: 'application/json',                               
507                                                                //url:"https://192.168.12.125:8443/Murachi/0.1/archivos/bdocs",
508                                                                //url:"https://192.168.12.125:8443/Murachi/0.1/archivos/bdocs/firmas/pre",
509                                                                url:"https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/bdocs/firmas/pre",
510                                                                dataType: "json",
511                                                                data: parameters,
512                                                                headers: {"Authorization":"Basic YWRtaW46YWRtaW4="},
513                                                                success: function(data, textStatus, jqXHR){
514                                                                        var json_x = data;
515                                                                        var hash = json_x['hash']; 
516                                                                        //alert("hash recibido del servidor "+hash);
517                                                                       
518                                                                        var hashtype = "SHA-256";
519                                                                        var lang = "eng";
520                                                                       
521                                                                        window.hwcrypto.sign(cert, {type: hashtype, hex: hash}, {lang: lang}).then(function(signature) {
522                                                                               
523                                                                                //var signature = response.hex.match(/.{1,64}/g).join("\n");
524                                                                        //log_text("Generated signature:\n" + response.hex.match(/.{1,64}/g).join("\n"));
525                                                                        //log_text("Generated signature:\n" + signature.hex);
526                                                                       
527                                                                        //alert("valor de la firma: " + signature.hex);                                                                 
528                                                                       
529                                                                        $.ajax({
530                                                                                        type: 'POST',
531                                                                                        contentType: 'application/json',
532                                                                                        //url:"https://192.168.12.125:8443/Murachi/0.1/archivos/bdocs/resenas",
533                                                                                        //url:"https://192.168.12.125:8443/Murachi/0.1/archivos/bdocs/firmas/post",
534                                                                                        url:"https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/bdocs/firmas/post",
535                                                                                        dataType: 'json',
536                                                                                        data: JSON.stringify({"signature":signature.hex, "containerId":fileId}),
537                                                                                        headers: {"Authorization":"Basic YWRtaW46YWRtaW4="},
538                                                                                        success: function(data, textStatus, jqXHR){
539                                                                                                /*
540                                                                                                var json_x = data;
541                                                                                                var msg = json_x['message'];                                                                                           
542                                                                                                alert('Archivo firmado en el servidor: ' + msg);
543                                                                                                */
544                                                                                                alert('Archivo firmado correctamente: ' + data['signedFileId']);
545                                                                                               
546                                                                                                //alert("ver respuesta");
547                                                                                                //var linkToDownload = "<a href=\"https://192.168.12.125:8443/Murachi/0.1/archivos/descargas/" + data['signedFileId'] +"\">descargar archivo firmado</a>";
548                                                                                                //var linkToDownload = "<a href=\"https://172.16.137.11:8443/Murachi/murachi/archivos/descargas/" + data['signedFileId'] +"\">descargar archivo firmado</a>";
549                                                                                                var linkToDownload = "<a href=\"https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/descargas/" + data['signedFileId'] +"\">descargar archivo firmado</a>";
550                                                                                                //alert(linkToDownload);
551                                                                                                document.getElementById("respuesta").innerHTML = linkToDownload; 
552                                                                                               
553                                                                                               
554                                                                                                //descargar el archivo
555                                                                                                /*
556                                                                                                //var urlToDownload =   "https://192.168.12.125:8443/Murachi/murachi/archivos/descargas/" + data['signedFileId'];
557                                                                                                $.ajax({
558                                                                                                        type: 'GET',
559                                                                                                        url: "https://192.168.12.125:8443/Murachi/murachi/archivos/descargas/" + data['signedFileId'],
560                                                                                                        contentType: false,
561                                                                                                        headers: {"Authorization":"Basic YWRtaW46YWRtaW4="},                                                                                                   
562                                                                                                        dataType: false,
563                                                                                                        data: false,                                                                                                   
564                                                                                                        success: function(data, textStatus, jqXHR){
565                                                                                                                alert("descargo el archivo");
566                                                                                                        },
567                                                                                                        error: function(jqXHR, textStatus, errorThrown){
568                                                                                                                alert('error en descarga de archivo: ' + textStatus);
569                                                                                                                $("#respuesta").html("error en descarga de archivo: " + textStatus);
570                                                                                                        }
571                                                                                                });
572                                                                                                */
573                                                                                                // fin de descarga de archivo
574                                                                                                                                                                                               
575                                                                                               
576                                                                                        },
577                                                                                        error: function(jqXHR, textStatus, errorThrown){
578                                                                                                alert('error en /bdocs/resenas: ' + textStatus);
579                                                                                                $("#respuesta").html("error en /bdocs/resenas: " + textStatus);
580                                                                                        }
581                                                                                });
582                                                                                                                       
583                                                                        }, function(err) {
584                                                                                log_text("sign() failed: " + err);
585                                                                                var error;
586                                                                                if(err == "Error: user_cancel") {
587                                                                                    alert("sign() failed: El usuario cancelo la operación");
588                                                                                    error = "El usuario cancelo la operación"; 
589                                                                                }     
590                                                                                else if(err == "Error: no_certificates") {
591                                                                                    alert("sign() failed: No hay certificado disponible")    ;
592                                                                                    error = "No hay certificado disponible";
593                                                                                }
594                                                                                else if(err == "Error: no_implementation") {
595                                                                                    alert("sign() failed: No hay soporte para el manejo del certificado");
596                                                                                    error = "No hay soporte para el manejo del certificado";
597                                                                                }
598                                                                                //alert("sign() failed: " + err);
599                                                                                $("#respuesta").html("sign() failed: " + error);
600                                                                });
601                                                                       
602                                                                },                                                             
603                                                                error: function(jqXHR, textStatus, errorThrown){
604                                                                        //alert('error: ' + textStatus);
605                                                                        //var responseText = jQuery.parseJSON(jqXHR.responseText);
606                                                                        alert('ajax error function: ' + jqXHR.responseText);
607                                                                        $("#respuesta").html("error function: " + jqXHR.responseText);
608                                                                }
609                                                               
610                                                        });
611                                                                                                               
612                                                }, function(err) {
613                                                        log_text("getCertificate() failed: " + err);
614                                                        //alert("getCertificate() failed: " + err);
615                                                        var error;
616                                                        if(err == "Error: user_cancel") {
617                                                            alert("getCertificate() failed: El usuario cancelo la operación");
618                                                            error = "El usuario cancelo la operación"; 
619                                                        }     
620                                                        else if(err == "Error: no_certificates") {
621                                                            alert("getCertificate() failed: No hay certificado disponible");
622                                                            error = "No hay certificado disponible";
623                                                        }
624                                                        else if(err == "Error: no_implementation") {
625                                                            alert("getCertificate() failed: No hay soporte para el manejo del certificado");
626                                                            error = "No hay soporte para el manejo del certificado";
627                                                        }
628                                                        $("#respuesta").html("getCertificate() failed: " + error);
629                                                });
630                                                                                               
631                },
632                //error: function(response) {
633                error: function(xhr, status, error) {
634                        //Que se ejecuta cuando finalice la petición de con error
635                                        $("#respuesta").html('Error...!!!');
636                       
637                                        alert(xhr.responseText);
638                                        alert(error);
639                       
640                                        alert("ocurrio un error en cargas");
641                                       
642                                       
643                                               
644                                }
645            });
646               
647               
648            }
649               
650            //fin de control de los botones radio en el formulario firmar (pdf,bdoc)----------------------------------------------
651
652       
653           
654        });
655    });
656    </script>
657   
658
659
660
661        <!-- Función que se conecta se servicio web de verificación de la firma electrónica
662                captura el evento submit y toma el formulario para enviar el servicio web -->
663       
664        <script>
665    $(function(){
666        $("#verificar").on("submit", function(e){
667            e.preventDefault();
668            var f = $(this);
669           
670            //var formData = new FormData(document.getElementById("verificar"));
671            var formData = new FormData();
672           
673            //formData.append("dato", "valor");
674            formData.append("upload", $("#file-check-sign")[0].files[0]);
675            //formData.append(f.attr("name"), $(this)[0].files[0]);
676           
677            $.ajax({
678                //url: "https://192.168.12.125:8443/Murachi/0.1/archivos/firmados",
679                //url: "https://172.16.137.11:8443/Murachi/murachi/archivos/firmados",               
680                url: "https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/firmados",
681                headers: {"Authorization":"Basic YWRtaW46YWRtaW4="},
682                type: "post",
683                dataType: "json",
684                data: formData,
685                cache: false,
686                contentType: false,
687                                processData: false,                             
688                                success: function(response) {
689                                                //alert(JSON.stringify(response));
690                                                var tempJson = JSON.stringify(response);
691                                                var jsonparsed = JSON.parse(tempJson);
692
693                                                var fileType = jsonparsed['mimeType'];
694                                                //alert(fileType);     
695                                                var html;
696                                                if(fileType == 'application/pdf'){ html = manejoJsonPDF(JSON.stringify(response));}
697                                                else { html = manejoJsonBDOC(JSON.stringify(response));}
698                                                //alert(html);
699                                                //alert("ver respuesta")
700                                                document.getElementById("respuestaVerificacion").innerHTML = html;
701                                                $('table.display').dataTable();
702                    },
703                        error: function(response) {
704                                //Que se ejecuta cuando finalice la petición de con error
705                                                $("#respuestaVerificacion").html('Error...!!!');
706                                        }
707            });
708        });
709    });
710    </script>
711       
712       
713        <!--Función que captura el evento del button reset del formulario verificar
714                y limpia el div respuesta (tabla de la verificación de la firmna)-->
715       
716        <script>
717                $(document).ready(function() {
718                $("#resetVerificacion").click(function() {       // apply to reset button's click event
719                        $("#respuestaVerificacion").html(''); 
720                });
721        });
722        </script>
723       
724         <!--Función que captura el evento del button reset del formulario firmar
725            y limpia el div respuesta (tabla de la firma)-->
726       <script>
727                $(document).ready(function() {
728                $("#reset").click(function() {       // apply to reset button's click event
729                        $("#respuesta").html(''); 
730                });
731        });
732        </script>
733
734       
735        <!--Funcion para el manejo de un archivo json
736                Recibe el json (verificación de una firma pdf),
737                lo introduce en una tabla
738                y devuelve una un cadena de texto -->
739               
740               
741        <script>
742                function manejoJsonPDF(json) {
743                       
744                        var fielJsonEs = {fileId: "Identificador único del archivo en el servidor", fileExist:"El archivo se cargó exitosamente en el servidor", mimeType:"Tipo MIME del archivo verificado", error:"Extension not supported. En caso de que el archivo sea diferente de PDF y BDOC", numberOfSignatures:"Número de firmas existentes en el archivo", signatures:"Lista de firmas", signatureType:"Tipo de firma de archivo PDF", signedOn:"Fecha en que se realiza la firma", integrityCheck:"Chequea la integridad de la firma", timeStamp:"Estampilla de tiempo", reason:"Razón de la firma", location:"Ubicación donde se realiza la firma", alternativeNameOfTheSigner:"Nombre alternativo del firmante", signerCertificateValidFrom:"Fecha de inicio de validez del certificado", signerCertificateStillValid:"El certificado todavía está válido", signerCertificateHasExpired:"El certificado expiró", signatureCoversWholeDocument:"La firma abarca todo el documento PDF", filterSubtype:"Tipo de subfiltro: /adbe.pkcs7.sha1, /adbe.pkcs7.detached", signerCertificateSubject:"Sujeto firmante", signerCertificateValidAtTimeOfSigning:"El certificado es válido en el momento de la firma", encryptionAlgorithm:"Algoritmo de cifrado", timeStampService:"Servicio de estampillado de tiempo", digestAlgorithm:"Algoritmo hash (reseña)", certificatesVerifiedAgainstTheKeyStore:"Certificado verificado contra el repositorio de certificados confiables", documentRevision:"Número de revisión del documento PDF", nameOfTheSigner:"Nombre del firmante", totalDocumentRevisions:"Número total de revisiones del documento PDF", contactInfo:"Información de contacto del firmante", timeStampVerified:"Estampilla de tiempo verificada", signerCertificateIssuer:"Emisor del certificado firmante", signerCertificateValidTo:"Fecha de fin de validez del certificado", signerCertificateSerial:"BDOC: Serial del certificado del firmante", signatureProfile:"BDOC: Perfil de la firma", signatureMethod:"BDOC: Algoritmo de firma utilizado", signatureId:"BDOC: identificador de la firma", signatureSigningTime:"Fecha en que se realiza la firma", signerCertificateIsValid:"El certificado todavía está válido", signatureValidationException:"BDOC: Exepciones de la validación de la firma", isValid:"BDOC: Firma electrónica válida", signerCertificateSubjectName:"Nombre del firmante", containerValidation:"BDOC: Especifica si el contenedor posee una estructura válida", numberOfDataFiles:"BDOC: Cantidad de archivos incluidos en el contenedor BDOC", dataFiles:"BDOC: Lista de archivos incluidos en el contenedor", name:"BDOC: Nombre del archivo incluido en el contenedor", dataFileSize:"BDOC: Tamaño del archivo incluido en el contenedor", filename:"BDOC: Nombre del archivo incluido en el contenedor", mediaType:"BDOC: Tipo MIME del archivo incluido en el contenedor"};
745                        var objVarVerifique = JSON.parse(json);
746                        var signatures = ''; //variable que maneja las firmas
747                        var fields = ''; //variable que maneja los campos de la firma
748                        var title = '<h2> Información de la firma electronica </h2> \n ';
749                        var head = '<div class=\'container\'> \n <table id=\' \' class=\'display table table-striped table-bordered\' cellspacing=\'0\' width=\'100%\' > \n <thead> \n <tr>\n <th>#</th>\n <th>Campo</th>\n <th>Descripción</th> \n </tr>\n </thead>\n <tbody> \n';
750                        var footer = '</tbody> \n </table> \n </div> \n </div>';
751                        var html = title;
752                        var numsign = 0; 
753                        var htmltemp = '';
754                        var objxEsp = '';
755               
756                        $.each(objVarVerifique, function(idx, obj) {
757                               
758                                if(idx == "error") {
759                                        html = '<h4> Extensión no soportada, verifique el archivo </h4>';       
760                    return(html);
761                    }
762                   
763                                if(idx == "numberOfSignatures"){
764                                        numsign = obj;
765                                        html += '<h4>' + fielJsonEs[idx] + ': ' + obj +' </h4>\n <br><br>';
766                                        }
767                                       
768                                if(idx == "signatures") { 
769                                signatures = obj; //se almacena la(s) cabecera(s) de las firmas
770                                }
771                                });
772                                               
773                                var contsing = 1; // variable que indica la firma donde esta posicionado
774                                               
775                                <!-- recorre las firmas signatures -->
776               
777                                $.each(signatures, function(idx, obj) { 
778                                        html += '<h4> Información de la firma: '+contsing+'<h4> \n';
779                                        html += head;
780                                        var contfiels = 8; // variable que indica el campo de la firma -- arranca en el campo 6 porque necesitamos que muestre de primero las 5 campos requeridos
781                                        fields = obj; // variable que almacena los campos de la firma
782                                        $.each(fields, function(id, objx) { <!-- Recorreo los campos de la firma -->
783                                          //alert('entro firma: ' + fielJsonEs[id]);
784                                             if(fielJsonEs[id]=='Nombre del firmante') {
785                                                        //alert('entro campos de firma');
786                                                        html += '<tr>\n<td>'+'1'+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objx +' </td>\n</tr>\n';
787                                                        //contfiels++;
788                                                }
789                                             else if(fielJsonEs[id]=='Fecha en que se realiza la firma') {
790                                                       //alert('entro campos de firma');
791                                                       html += '<tr>\n<td>'+'2'+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objx +'     </td>\n</tr>\n';
792                                                       //contfiels++;
793                                               }
794
795                                             else if(fielJsonEs[id]=='Chequea la integridad de la firma') {
796                                                       //alert('entro campos de firma');
797                                                      if(objx == 'true') { objxEsp = 'verdadero';}                                                                                                  else {objxEsp='falso';}
798                                                      html += '<tr>\n<td>'+'3'+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objxEsp +'         </td>\n</tr>\n';
799                                                       //contfiels++;
800                                               }
801                                             else if(fielJsonEs[id]=='El certificado todavía está válido') {
802                                                     if(objx == 'true') { objxEsp = 'verdadero';}                                                                                                  else {objxEsp='falso';}
803                                                     html += '<tr>\n<td>'+'4'+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objxEsp +'             </td>\n</tr>\n';
804                                                     //contfiels++;
805} 
806                                             else if(fielJsonEs[id]=='Fecha de inicio de validez del certificado') {
807                                                     html += '<tr>\n<td>'+'5'+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objx +'             </td>\n</tr>\n';
808                                                     //contfiels++;
809}       
810                                             else if(fielJsonEs[id]=='Fecha de fin de validez del certificado') {
811                                                     html += '<tr>\n<td>'+'6'+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objx +'             </td>\n</tr>\n';
812                                                     //contfiels++;
813} 
814                                             else if(fielJsonEs[id]=='El certificado es válido en el momento de la firma') {
815                                                     if(objx == 'true') { objxEsp = 'verdadero';}                                                                                                  else {objxEsp='falso';}
816                                                     html += '<tr>\n<td>'+'7'+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objxEsp +'             </td>\n</tr>\n';
817                                                     //contfiels++;
818} 
819                                             else { if(objx == 'true' ) { htmltemp += '<tr>\n<td>'+contfiels+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td    >' + 'verdadero' +' </td>\n</tr>\n';}
820                                                    else if(objx == 'false')  { htmltemp += '<tr>\n<td>'+contfiels+'</td>\n<td>' + fielJsonEs[id    ] + '</td>\n<td    >' + 'falso' +' </td>\n</tr>\n';}
821                                                    else { htmltemp += '<tr>\n<td>'+contfiels+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objx +' </td>\n</tr>\n'; }
822                                                        contfiels++;}     
823                                        //      html += '<tr>\n<td>'+contfiels+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objx +' </td>\n</tr>\n';
824                                        //      contfiels++;
825                                        });
826                                        contsing++;
827                                         //alert('html:' + html);
828                                         //alert('htmltemp: ' + htmltemp);
829                                        html += htmltemp;
830                                        htmltemp = '';
831                                         //alert('html fin: ' + html);
832                                        html += footer;
833                                        //if(contsing>numsign) html += footer;
834                                        //else html += footer + head                           
835                                });
836                                //html += footer;
837                                return(html);
838            }
839        </script>
840
841        <!--Funcion para el manejo de un archivo json
842            Recibe el json (verificación de una firma bdoc),
843            lo introduce en una tabla
844            y devuelve una un cadena de texto -->
845
846
847        <script>
848                function manejoJsonBDOC(json) {
849                        var fielJsonEs = {numberOfSignatures:"Número de firma(s)", signaturePostalCode:"Código postal", signerCertificateSerial:"Serial del certificado del firmante", signatureProfile:"Perfil de la firma", signatureState:"Estado donde se realiza la firma", signatureMethod:"Algoritmo de firma utilizado", signatureId:"Identificador de la firma", signatureSigningTime:"Fecha y hora de la firma", signerCertificateIsValid:"El certificado todavía está válido", signerCertificateIssuer:"Emisor del certificado firmante", signatureCity:"Ciudad donde se realiza la firma", signatureS0ValidationException1:"Excepción de validación", isValid:"Firma válida", signerCertificateSubjectName:"Nombre del firmante", signatureCountry:"País donde se realiza la firma" };
850       
851                        var objVarVerifique = JSON.parse(json);
852                        var signatures = ''; //variable que maneja las firmas
853                        var fields = ''; //variable que maneja los campos de la firma
854                        var title = '<h2> Información de la firma electronica </h2> \n ';
855                        var head = '<div class=\'container\'> \n <table id=\' \' class=\'display table table-striped table-bordered\' cellspacing=\'0\' width=\'100%\' > \n <thead> \n <tr>\n <th>#</th>\n <th>Campo</th>\n <th>Descripción</th> \n </tr>\n </thead>\n <tbody> \n';
856                        var footer = '</tbody> \n </table> \n </div> \n </div>';
857                        var html = title;
858                        var numsign = 0; 
859                        var htmltemp = '';
860                        var objxEsp = '';
861               
862                        $.each(objVarVerifique, function(idx, obj) {
863                               
864                                if(idx == "error") {
865                                        html = '<h4> Extensión no soportada, verifique el archivo </h4>';       
866                    return(html);
867                    }
868                   
869                                if(idx == "numberOfSignatures"){
870                                        numsign = obj;
871                                        html += '<h4>' + fielJsonEs[idx] + ': ' + obj +' </h4>\n <br><br>';
872                                        }
873                                       
874                                if(idx == "signatures") { 
875                                signatures = obj; //se almacena la(s) cabecera(s) de las firmas
876                                }
877                                });
878                                               
879                                var contsing = 1; // variable que indica la firma donde esta posicionado
880                                               
881                                <!-- recorre las firmas signatures -->
882               
883                                $.each(signatures, function(idx, obj) { 
884                                        html += '<h4> Información de la firma: '+contsing+'<h4> \n';
885                                        html += head;
886                                        var contfiels = 5; // variable que indica el campo de la firma -- arranca en el campo 6 porque necesitamos que muestre de primero las 5 campos requeridos
887                                        fields = obj; // variable que almacena los campos de la firma
888                                        $.each(fields, function(id, objx) { <!-- Recorreo los campos de la firma -->
889                 
890                                          //alert('entro firma: ' + fielJsonEs[id]);
891                                             if(fielJsonEs[id]=='Nombre del firmante') {
892                                                        //alert('entro campos de firma');
893                                                        html += '<tr>\n<td>'+'1'+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objx +' </td>\n</tr>\n';
894                                                        //contfiels++;
895                                                }
896                                             else if(fielJsonEs[id]=='Fecha y hora de la firma') {
897                                                       //alert('entro campos de firma');
898                                                       html += '<tr>\n<td>'+'2'+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objx +'     </td>\n</tr>\n';
899                                                       //contfiels++;
900                                               }
901
902                                             else if(fielJsonEs[id]=='Firma válida') {
903                                                       //alert('entro campos de firma');
904                                                      if(objx == 'true') { objxEsp = 'verdadero';}
905                                                      else {objxEsp='falso';}
906                                                      html += '<tr>\n<td>'+'3'+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objxEsp +'         </td>\n</tr>\n';
907                                                       //contfiels++;
908                                               }
909                                             else if(fielJsonEs[id]=='El certificado todavía está válido') {
910                                                     if(objx == 'true') { objxEsp = 'verdadero';}                                                                                              else {objxEsp='falso';}
911                                                     html += '<tr>\n<td>'+'4'+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objxEsp +'             </td>\n</tr>\n';
912                                                     //contfiels++;
913} 
914                                                else { htmltemp += '<tr>\n<td>'+contfiels+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objx +' </td>\n</tr>\n';
915                                                        contfiels++;}     
916                                        //      html += '<tr>\n<td>'+contfiels+'</td>\n<td>' + fielJsonEs[id] + '</td>\n<td>' + objx +' </td>\n</tr>\n';
917                                        //      contfiels++;
918                                        });
919                                        contsing++;
920                                         //alert('html:' + html);
921                                         //alert('htmltemp: ' + htmltemp);
922                                        html += htmltemp;
923                                        htmltemp = '';
924                                         //alert('html fin: ' + html);
925                                        html += footer;
926                                        //if(contsing>numsign) html += footer;
927                                        //else html += footer + head                           
928                                });
929                                //html += footer;
930                                return(html);
931            }
932        </script>
933
934        <!--Funcion para el manejo de la extensión de los archivos en el momento de firmar de acuerdo a la selección del tipo de formato de firma
935            electronica que se vaya a utilizar señalada en el button radio (pdf,bdoc)-->
936
937       <script>
938                function manejoExtension() {
939                        if(document.SignFormat.optradio[0].checked)
940                                document.getElementById("file-sign").accept=".pdf";
941                        else {
942                            document.getElementById("file-sign").accept=".*";
943                            document.getElementById("file-sign").multiple="multiple";
944                            }
945                }
946     </script>
947
948
949   
950<!--Final Funciones que utiliza el sistema -->
951
952    <body>
953    <noscript><h1>Por favor habilite JavaScript!</h1></noscript>
954               
955    <div class="container">
956    <div id="operation">
957        <ul id="tabs-operation" class="nav nav-tabs" data-tabs="tabs">
958            <li class="active"><a href="#firmar" data-toggle="tab">Firmar</a></li>
959            <li><a href="#verificar" data-toggle="tab">Verificar</a></li>
960        </ul>
961        <div id="operation-tab-content" class="tab-content">
962                                       
963        <!-------------------Sección para firmar (formulario)---------->
964                                       
965            <div class="tab-pane active" id="firmar">
966                <h1>Firmar Electrónicamente</h1>
967                <div class="container kv-main">
968                <!-- <form enctype="multipart/form-data" action="https://192.168.12.125:8443/Murachi/0.1/archivos" method="post" id="firmar" name="SignFormat"> -->
969                <!-- <form enctype="multipart/form-data" action="https://192.168.12.125:8443/Murachi/murachi/archivos" method="post" id="firmar"> -->
970                <!-- <form enctype="multipart/form-data" action="https://172.16.137.11:8443/Murachi/murachi/archivos" method="post" id="firmar">  -->
971                <form enctype="multipart/form-data" action="https://murachi.cenditel.gob.ve/Murachi/0.1/archivos" method="post" id="firmar" name="SignFormat">
972                    <h2>Formato para la Firma</h2>
973                    <p>Seleccione el tipo de formato que va a utilizar para firmar electrónicamente</p>                 
974                    <div class="radio">
975                        <label><input type="radio" name="optradio" value="pdf" checked >PDF</label>
976                    </div>
977                    <div class="radio">
978                        <label><input type="radio" name="optradio" value="bdoc" >BDOC</label>
979                    </div>
980                    <br>
981                    <input id="file-sign" class="file" type="file" data-min-file-count="1" onclick="manejoExtension()" name="upload" >
982                    <br>
983                    <button type="submit" class="btn btn-primary">Enviar</button>
984                    <button type="reset" id="reset"  class="btn btn-default">Limpiar</button>
985                    <br>
986                    <br>
987                    <div id="respuesta"> </div>
988                </form>
989                <br>
990            </div>
991        </div>
992                                       
993        <!--------------------Sección para verificar (formulario)---------------------------->
994                               
995        <div class="tab-pane" id="verificar">
996            <h1>Verificar la firma electrónica</h1>
997            <div class="container kv-main">
998            <!-- <form enctype="multipart/form-data" action="https://192.168.12.125:8443/Murachi/0.1/archivos/firmados" method="post" id="verificar"> -->
999            <!-- <form enctype="multipart/form-data" action="https://172.16.137.11:8443/Murachi/murachi/archivos/firmados" method="post" id="verificar"> -->
1000            <form enctype="multipart/form-data" action="https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/firmados" method="post" id="verificar"> 
1001                <input id="file-check-sign" class="file" type="file" multiple data-min-file-count="1" name="upload">
1002                <br>
1003                <button type="submit" class="btn btn-primary">Enviar</button>
1004                <button type="reset" id="resetVerificacion" class="btn btn-default">Limpiar</button>
1005                <br>
1006                <br>
1007                <div id="respuestaVerificacion"> </div>
1008            </form>
1009        </div>
1010    </div>
1011</div>
1012</div>
1013                        <script type="text/javascript">
1014                                jQuery(document).ready(function ($) {
1015                                        $('#tabs').tab();
1016                                });
1017                        </script>
1018                </div> 
1019                <!-- container -->
1020               
1021                <!--
1022                <p><button id="click1" onclick='sign();'>Click here to invoke <b>sign()</b></button></p>
1023               
1024                <p><button id="click2" onclick='logGetCertificate();'>get Certificate</button></p>
1025                -->
1026               
1027                <p>
1028                <div id="log" style="white-space: pre; font-family: monospace;"></div>
1029               
1030        </body>
1031</html>
Note: See TracBrowser for help on using the repository browser.