Context Navigation

source: prototipo_portal_2018/WebContent/portal.html @ f490416

Last change on this file since f490416 was 9631190, checked in by antonioaraujob <antonioaraujob@…>, 9 years ago
Se agregan los archivos del portal de prueba al control de versiones.
Property mode set to `100644`
File size: 19.0 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	<title>Portal de verificación y firma electrónica</title>
7	<link href="bootstrap.min.css" rel="stylesheet">
8	<link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
9	<script src="jquery.min.js"></script>
10	<script src="js/fileinput.js" type="text/javascript"></script>
11	<script src="bootstrap.min.js" type="text/javascript"></script>
12	<script src="jquery.form.js"></script>
13
14	<script src="gitversion.js"></script>
15	<script src="hwcrypto-legacy.js"></script>
16	<script src="hwcrypto.js"></script>
17	<script src="jquery.js"></script>
18	<script src="hex2base.js"></script>
19
20	</head> <!--fin del head -->
21
22	<!-- Header -->
23	<header>
24	<div id="barner">
25	<center>
26	<img class="img-responsive" alt="Cinque Terre" src="cabecera.png">
27
28	</div>
29
30	<nav class="navbar navbar-inverse">
31	<div class="container-fluid">
32	<div class="navbar-header">
33	<a class="navbar-brand" href="https://www.cenditel.gob.ve/">CENDITEL</a>
34	</div>
35	<div>
36	<ul class="nav navbar-nav navbar-right">
37	<li class="active"><a href="#">Home</a></li>
38	<li><a href="https://tibisay.cenditel.gob.ve/murachi">Wiki</a></li>
39	<li><a href="#">Contacto</a></li>
40	</ul>
41	</div>
42	</div>
43	</nav>
44	</header>
45	<!-- End Header -->
46
47	<div class="container">
48	<div class="jumbotron">
49	<h1>Portal de firma electrónica y verificación</h1>
50	<p>Sistema para firmar electrónicamente documentos y verificar los documentos firmados</p>
51	</div>
52	</div>
53
54
55
56
57	<!--Inicio Funciones que utiliza el sistema -->
58
59	<!-- tomado de https://open-eid.github.io/hwcrypto.js/sign.html -->
60	<script>
61	var hashes = {};
62	hashes['SHA-1'] = 'c33df55b8aee82b5018130f61a9199f6a9d5d385';
63	hashes['SHA-224'] = '614eadb55ecd6c4938fe23a450edd51292519f7ffb51e91dc8aa5fbe';
64	hashes['SHA-256'] = '413140d54372f9baf481d4c54e2d5c7bcf28fd6087000280e07976121dd54af2';
65	hashes['SHA-384'] = '71839e04e1f8c6e3a6697e27e9a7b8aff24c95358ea7dc7f98476c1e4d88c67d65803d175209689af02aa3cbf69f2fd3';
66	hashes['SHA-512'] = 'c793dc32d969cd4982a1d6e630de5aa0ebcd37e3b8bd0095f383a839582b080b9fe2d00098844bd303b8736ca1000344c5128ea38584bbed2d77a3968c7cdd71';
67	hashes['SHA-192'] = 'ad41e82bcff23839dc0d9683d46fbae0be3dfcbbb1b49c70';
68
69	function log_text(s) {
70	var d = document.createElement("div");
71	d.innerHTML = s;
72	document.getElementById('log').appendChild(d);
73	}
74
75	function debug() {
76	window.hwcrypto.debug().then(function(response) {log_text("Debug: " + response);});
77	}
78
79	function sign() {
80
81	alert("sign()");
82	// Clear log
83	document.getElementById('log').innerHTML = '';
84	// Timestamp
85	log_text("sign() clicked on " + new Date().toUTCString());
86
87	// Select hash
88	//var hashtype = $("input[name=hash]:checked").val();
89	var hashtype = "SHA-256";
90
91	// Set backend if asked
92	//var backend = $("input[name=backend]:checked").val()
93	var backend = "autodetect";
94
95	// get language
96	var lang = "en";
97	if (!window.hwcrypto.use(backend)) {
98	log_text("Selecting backend failed.");
99	}
100
101	var hash = $("#hashvalue").val();
102	log_text("Signing " + hashtype + ": " + hash);
103	// debug
104	window.hwcrypto.debug().then(function(response) {
105	log_text("Debug: " + response);
106	}, function(err) {
107	log_text("debug() failed: " + err);
108	return;
109	});
110	// Sign
111	window.hwcrypto.getCertificate({lang: lang}).then(function(response) {
112	var cert = response;
113	log_text("Using certificate:\n" + hexToPem(response.hex));
114
115
116	window.hwcrypto.sign(cert, {type: hashtype, hex: hash}, {lang: lang}).then(function(response) {
117	log_text("Generated signature:\n" + response.hex.match(/.{1,64}/g).join("\n"));
118	}, function(err) {
119	log_text("sign() failed: " + err);
120	});
121	}, function(err) {
122	log_text("getCertificate() failed: " + err);
123	}
124
125	);
126	}
127	</script>
128
129	<script>
130	function logGetCertificate() {
131
132	alert("logGetCertificate()");
133	// Clear log
134	document.getElementById('log').innerHTML = '';
135	// Timestamp
136	log_text("sign() clicked on " + new Date().toUTCString());
137
138	// Select hash
139	//var hashtype = $("input[name=hash]:checked").val();
140	var hashtype = "SHA-256";
141
142	// Set backend if asked
143	//var backend = $("input[name=backend]:checked").val()
144	var backend = "autodetect";
145
146	// get language
147	var lang = "en";
148	if (!window.hwcrypto.use(backend)) {
149	log_text("Selecting backend failed.");
150	}
151
152	var hash = $("#hashvalue").val();
153	log_text("Signing " + hashtype + ": " + hash);
154	// debug
155	window.hwcrypto.debug().then(function(response) {
156	log_text("Debug: " + response);
157	}, function(err) {
158	log_text("debug() failed: " + err);
159	return;
160	});
161	// Sign
162	window.hwcrypto.getCertificate({lang: lang}).then(function(response) {
163	var cert = response;
164	log_text("Using certificate:\n" + hexToPem(response.hex));
165	});
166	}
167
168
169	function getCertificate() {
170
171	alert("getCertificate()");
172	// Clear log
173	document.getElementById('log').innerHTML = '';
174	// Timestamp
175	log_text("sign() clicked on " + new Date().toUTCString());
176
177	// Set backend if asked
178	//var backend = $("input[name=backend]:checked").val()
179	var backend = "autodetect";
180
181	// get language
182	var lang = "en";
183	if (!window.hwcrypto.use(backend)) {
184	log_text("Selecting backend failed.");
185	}
186	window.hwcrypto.getCertificate({lang: lang}).then(function(response) {
187	var cert = response;
188	log_text("Using certificate:\n" + hexToPem(response.hex));
189	return cert;
190	});
191	}
192	</script>
193
194	<!-- Función que se conecta al servicio web de verificación de la firma electrónica
195	captura el evento submit y toma el formulario para firmar -->
196
197	<script>
198	$(function(){
199	$("#firmar").on("submit", function(e){
200	e.preventDefault();
201	var f = $(this);
202
203	//alert("se presiono firmar")
204
205	//var formData = new FormData(document.getElementById("verificar"));
206	var formData = new FormData();
207
208	//formData.append("dato", "valor");
209	formData.append("upload", $("#file-sign")[0].files[0]);
210	//formData.append(f.attr("name"), $(this)[0].files[0]);
211
212	$.ajax({
213	//url: "https://192.168.12.125:8443/Murachi/murachi/archivos",
214	url: "https://172.16.137.11:8443/Murachi/murachi/archivos",
215	//url: "https://172.16.137.11:8443/JAXRS-Murachi/murachi/archivos",
216	type: "post",
217	dataType: "json",
218	data: formData,
219	cache: false,
220	contentType: false,
221	processData: false,
222	success: function(response) {
223	//alert(JSON.stringify(response));
224	var html = manejoJsonPDF(JSON.stringify(response));
225	//alert(html);
226	//alert("ver respuesta")
227	document.getElementById("respuesta").innerHTML = html;
228
229	// identificador del archivo en el servidor
230	var fileId = response.fileId.toString();
231	//alert("fileId: "+ fileId);
232
233	// seleccionar certificado del firmante
234	//alert("va a seleccionar certificado");
235	var cert;
236	window.hwcrypto.getCertificate({lang: "en"}).then(function(response) {
237	var cert = response;
238	//log_text("Using certificate:\n" + hexToPem(response.hex));
239
240	//alert("cert: "+ cert.hex);
241
242	var parameters = JSON.stringify({
243	"fileId":fileId,
244	"certificate":cert.hex,
245	"reason":"prueba firma web",
246	"location":"Oficina",
247	"contact":"582746574336"
248	});
249
250	// ahora llamar al ajax de obtener la resena del pdf
251	$.ajax({
252	type: 'POST',
253	contentType: 'application/json',
254	//url:"https://192.168.12.125:8443/Murachi/murachi/archivos/pdfs",
255	url:"https://172.16.137.11:8443/Murachi/murachi/archivos/pdfs",
256	dataType: "json",
257	data: parameters,
258	success: function(data, textStatus, jqXHR){
259	var json_x = data;
260	var hash = json_x['hash'];
261	//alert("hash recibido del servidor "+hash);
262
263	var hashtype = "SHA-256";
264	var lang = "eng";
265
266	window.hwcrypto.sign(cert, {type: hashtype, hex: hash}, {lang: lang}).then(function(signature) {
267
268	//var signature = response.hex.match(/.{1,64}/g).join("\n");
269	//log_text("Generated signature:\n" + response.hex.match(/.{1,64}/g).join("\n"));
270	//log_text("Generated signature:\n" + signature.hex);
271
272	//alert("valor de la firma: " + signature.hex);
273
274	$.ajax({
275	type: 'POST',
276	contentType: 'application/json',
277	//url:"https://192.168.12.125:8443/Murachi/murachi/archivos/pdfs/resenas",
278	url:"https://172.16.137.11:8443/Murachi/murachi/archivos/pdfs/resenas",
279	dataType: 'json',
280	data: JSON.stringify({"signature":signature.hex}),
281	success: function(data, textStatus, jqXHR){
282	/*
283	var json_x = data;
284	var msg = json_x['message'];
285	alert('Archivo firmado en el servidor: ' + msg);
286	*/
287	alert('Archivo firmado correctamente: ' + data['signedFileId']);
288
289	alert("ver respuesta");
290	//var linkToDownload = "<a href=\"https://192.168.12.125:8443/Murachi/murachi/archivos/descargas/" + data['signedFileId'] +"\">descargar archivo firmado</a>";
291	var linkToDownload = "<a href=\"https://172.16.137.11:8443/Murachi/murachi/archivos/descargas/" + data['signedFileId'] +"\">descargar archivo firmado</a>";
292	//alert(linkToDownload);
293	document.getElementById("respuesta").innerHTML = linkToDownload;
294
295
296	//descargar el archivo
297	/*
298	//var urlToDownload = "https://192.168.12.125:8443/Murachi/murachi/archivos/descargas/" + data['signedFileId'];
299	$.ajax({
300	type: 'GET',
301	contentType: false,
302	url: "https://192.168.12.125:8443/Murachi/murachi/archivos/descargas/" + data['signedFileId'],
303	dataType: false,
304	data: false,
305	success: function(data, textStatus, jqXHR){
306	alert("descargo el archivo");
307	},
308	error: function(jqXHR, textStatus, errorThrown){
309	alert('error en descarga de archivo: ' + textStatus);
310	$("#respuesta").html("error en descarga de archivo: " + textStatus);
311	}
312	});
313	*/
314	// fin de descarga de archivo
315
316
317	},
318	error: function(jqXHR, textStatus, errorThrown){
319	alert('error en pdfs/resenas: ' + textStatus);
320	$("#respuesta").html("error en pdfs/resenas: " + textStatus);
321	}
322	});
323
324	}, function(err) {
325	log_text("sign() failed: " + err);
326	alert("sign() failed: " + err);
327	$("#respuesta").html("sign() failed: " + err);
328	});
329
330	},
331	error: function(jqXHR, textStatus, errorThrown){
332	//alert('error: ' + textStatus);
333	//var responseText = jQuery.parseJSON(jqXHR.responseText);
334	alert('ajax error function: ' + jqXHR.responseText);
335	$("#respuesta").html("error function: " + jqXHR.responseText);
336	}
337
338
339	});
340
341
342
343	}, function(err) {
344	log_text("getCertificate() failed: " + err);
345	alert("getCertificate() failed: " + err);
346	$("#respuesta").html("getCertificate() failed: " + err);
347	});
348
349
350
351	},
352	error: function(response) {
353	//Que se ejecuta cuando finalice la petición de con error
354	$("#respuesta").html('Error...!!!');
355	alert("ocurrio un error")
356	}
357	});
358	});
359	});
360	</script>
361
362
363
364	<!-- Función que se conecta se servicio web de verificación de la firma electrónica
365	captura el evento submit y toma el formulario para enviar el servicio web -->
366
367	<script>
368	$(function(){
369	$("#verificar").on("submit", function(e){
370	e.preventDefault();
371	var f = $(this);
372
373	//var formData = new FormData(document.getElementById("verificar"));
374	var formData = new FormData();
375
376	//formData.append("dato", "valor");
377	formData.append("upload", $("#file-check-sign")[0].files[0]);
378	//formData.append(f.attr("name"), $(this)[0].files[0]);
379
380	$.ajax({
381	//url: "https://192.168.12.125:8443/Murachi/murachi/archivos/firmados",
382	url: "https://172.16.137.11:8443/Murachi/murachi/archivos/firmados",
383	//url: "https://172.16.137.11:8443/JAXRS-Murachi/murachi/archivos",
384	type: "post",
385	dataType: "json",
386	data: formData,
387	cache: false,
388	contentType: false,
389	processData: false,
390	success: function(response) {
391	//alert(JSON.stringify(response));
392	var html = manejoJsonPDF(JSON.stringify(response));
393	//alert(html);
394	alert("ver respuesta")
395	document.getElementById("respuesta").innerHTML = html;
396	},
397	error: function(response) {
398	//Que se ejecuta cuando finalice la petición de con error
399	$("#respuesta").html('Error...!!!');
400	}
401	});
402	});
403	});
404	</script>
405
406
407	<!--Función que cactura el evento del button reset del formulario verificar
408	y limpia el div respuesta (tabla de la verificación de la firmna)-->
409
410	<script>
411	$(document).ready(function() {
412	$("#reset").click(function() { // apply to reset button's click event
413	$("#respuesta").html('');
414	});
415	});
416	</script>
417
418
419	<!--Funcion para el manejo de un archivo json
420	Recibe el json (verificación de una firma pdf),
421	lo introduce en una tabla
422	y devuelve una un cadena de texto -->
423
424
425	<script>
426	function manejoJsonPDF(json) {
427	var objVarVerifique = JSON.parse(json);
428	var signatures = ''; //variable que maneja las firmas
429	var fields = ''; //variable que maneja los campos de la firma
430	var title = '<h2>Información</h2> \n <p>Información de la firma electronica \n';
431	var head = '<div class=\'container\'> \n <div class=\'table-responsive\'> \n <table id=\'example\' class=\'table table-bordered\' data-height=\'299\' > \n <thead> \n <tr>\n <th>#</th>\n <th>Campo</th>\n <th>Descripción</th> \n </tr>\n </thead>\n <tbody>\n';
432	var footer = '</tbody> \n </table> \n </div> \n </div>';
433	var html = title + head;
434	var numsign = 0;
435
436	$.each(objVarVerifique, function(idx, obj) {
437	if(idx == "signatures") {
438	signatures = obj; //se almacena la(s) cabecera(s) de las firmas
439	}
440	else {
441	html += '<tr>\n<td></td>\n<td>' + idx + '</td>\n<td>' + obj +' </td>\n</tr>\n';
442	if(idx == 'numberOfSignatures') numsign = obj;
443	}
444	});
445
446	var contsing = 1; // variable que indica la firma donde esta posicionado
447
448	<!-- recorre las firmas signatures -->
449
450	$.each(signatures, function(idx, obj) {
451	var contfiels = 1; // variable que indica el campo de la firma
452	fields = obj; // variable que almacena los campos de la firma
453	$.each(fields, function(id, objx) { <!-- Recorreo los campos de la firma -->
454	html += '<tr>\n<td>'+contfiels+'</td>\n<td>' + id + '</td>\n<td>' + objx +' </td>\n</tr>\n';
455	contfiels++;
456	});
457	contsing++;
458	if(contsing>numsign) html += footer;
459	else html += footer + head
460	});
461	html += footer;
462	return(html);
463	}
464	</script>
465
466
467
468
469	<!--Final Funciones que utiliza el sistema -->
470
471	<body>
472	<noscript><h1>Por favor habilite JavaScript!</h1></noscript>
473
474	<div class="container">
475	<div id="operation">
476	<ul id="tabs-operation" class="nav nav-tabs" data-tabs="tabs">
477	<li class="active"><a href="#firmar" data-toggle="tab">Firmar</a></li>
478	<li><a href="#verificar" data-toggle="tab">Verificar</a></li>
479	</ul>
480	<div id="operation-tab-content" class="tab-content">
481
482	<!-------------------Sección para firmar (formulario)------------------------->
483
484	<div class="tab-pane active" id="firmar">
485	<h1>Firmar Electrónica</h1>
486	<div class="container kv-main">
487	<!-- <form enctype="multipart/form-data" action="https://192.168.12.125:8443/Murachi/murachi/archivos" method="post" id="firmar"> -->
488	<form enctype="multipart/form-data" action="https://172.16.137.11:8443/Murachi/murachi/archivos" method="post" id="firmar">
489	<h2>Formato para la Firma</h2>
490	<p>Seleccione el tipo de formato que va a utilizar para firmar electrónicamente</p>
491	<div class="radio">
492	<label><input type="radio" name="optradio">PDF</label>
493	</div>
494	<div class="radio">
495	<label><input type="radio" name="optradio">BDOC</label>
496	</div>
497	<br>
498	<input id="file-sign" class="file" type="file" multiple data-min-file-count="1" name="upload">
499	<br>
500	<button type="submit" class="btn btn-primary">Enviar</button>
501	<button type="reset" class="btn btn-default">Limpiar</button>
502	</form>
503	<br>
504	</div>
505	</div>
506
507	<!--------------------Sección para verificar (formulario)---------------------------->
508
509	<div class="tab-pane" id="verificar">
510	<h1>Verificar la firma electrónica</h1>
511	<div class="container kv-main">
512	<!-- <form enctype="multipart/form-data" action="https://192.168.12.125:8443/Murachi/murachi/archivos/firmados" method="post" id="verificar"> -->
513	<form enctype="multipart/form-data" action="https://172.16.137.11:8443/Murachi/murachi/archivos/firmados" method="post" id="verificar">
514	<input id="file-check-sign" class="file" type="file" multiple data-min-file-count="1" name="upload">
515	<br>
516	<button type="submit" class="btn btn-primary">Enviar</button>
517	<button type="reset" id="reset" class="btn btn-default">Limpiar</button>
518	<br>
519	<br>
520
521	</form>
522	</div>
523	</div>
524	</div>
525	</div>
526	<script type="text/javascript">
527	jQuery(document).ready(function ($) {
528	$('#tabs').tab();
529	});
530	</script>
531	</div>
532	<!-- container -->
533
534	<!--
535	<p><button id="click1" onclick='sign();'>Click here to invoke <b>sign()</b></button></p>
536
537	<p><button id="click2" onclick='logGetCertificate();'>get Certificate</button></p>
538	-->
539
540	<div id="respuesta"> </div>
541	<p>
542	<div id="log" style="white-space: pre; font-family: monospace;"></div>
543
544	</body>
545	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: