Prácticas de web programable
Aplicaciones Telemáticas, 2024-2025
Grado en Ingeniería Telemática
Escuela de Ingeniería de Fuenlabrada
Universidad Rey Juan Carlos
Prepara un script en node.js con el nombre ~/at/practica05/json.js. Define un objeto literal con al menos 8 propiedades, probando todos los tipos de valor de JSON. Convierte el objeto en cadena. Convierte la cadena de nuevo en objeto.
En las práctica 3 y 4 escribiste un programa para validar que una contraseña tuviera la fortaleza adecuada. Ahora lo mejoraremos para comprobar que el usuario no intente utilizar ninguna contraseña que ya haya usado en el pasado. Escribe los ficheros ~/at/practica05/validacion2.js y ~/at/practica05/validacion2.html de forma que:
Hagan las mismas comprobaciones que en las prácticas anteriores. Esto es, copia el código inicial.
Si tenías un botón enviar, quítalo. Añade un botón aceptar. Este botón no enviará nada al servidor.
Cuando el usuario pulse el botón aceptar, guardarás un hash de la contraseña usando el API de localstorage, junto con la fecha de creación de la contraseña (la fecha actual)
Obviamente guardamos el hash y no la contraseña original por motivos de seguridad. El hash es suficiente para nuestros propósitos y si nuestro sistema fuera comprometido, el riesgo sería mucho menor que si guardásemos las contraseñas en claro. (Observa que el cliente debería enviar la contraseña completa cifrada, si solo enviase el hash, el hash sería la contraseña).
Si el usuario intenta usar una contraseña ya usada previamente, la aplicación indicará que no es válida. También indicará cuándo fue usada.
Añade un botón Trazar contraseñas que, al pulsarse, invoque a una función que escriba en el log toda la información sobre las contraseñas contenida en LocalStorage.
Añade un botón Olvidar contraseñas que al pulsarse invoque a una función que haga lo que su nombre indica.
Para calcular un hash en JavaScript, puedes usar simple-hash.js
'use strict'
// Adapted from https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript
const contrasenya = 'AbreteSesamo'
function simple_hash(text ){
var hash = 0;
if (text.length == 0) return hash;
for (let i = 0; i < text.length; i++) {
let char = text.charCodeAt(i);
hash = ((hash<<5)-hash)+char;
hash = hash & hash; // Convert to 32bit integer
}
return hash;
}
console.log(contrasenya, simple_hash(contrasenya));Observaciones
En un programa real, esta comprobación debería hacerla el servidor. Con nuestro programa, si el usuario cambia de navegador, podría repetir la contraseña. Pero como nuestro objetivo es familiarizarnos con la programación en el cliente, ignoraremos esto.
LocalStorage es un API del navegador, lamentablemente no está disponible en nodejs y por tanto solo podrás probarlo en el navegador. Pero en cualquier caso, es imprescindible que todo tu código esté en el fichero js, no repartido por los botones.
No olvides revisar si el motor de javascript muestra algún error en la consola.
PRÁCTICA OPTATIVA.
Usa un hash criptográficamente seguro, como p.e. SHA 256.
Escribe una página con el nombre ~/at/practica05/mapa.html que presente un mapa de OpenStreetMaps con la posición actual del usuario.
Escribe una aplicación web en los ficheros ~/at/practica05/dondeEsta.html y ~/at/practica05/dondeEsta.js con la funcionalidad típica de las aplicaciones del tipo Where is my car?
Esto es, servirá para que el usuario pueda registrar dónde aparcó su coche.
La página tendrá especial utilidad funcionando en un teléfono móvil. Pero gracias a que HTML es una norma universal, puedes desarrollarlo en un ordenador de escritorio o portátil y probarlo luego en el móvil.
Toda la información se almacenará usando Web Storage.
La página mostrará sobre un mapa:
La posición actual del usuario.
Si está almacenada, la posición del coche.
La página tendrá dos botones.
Recordar posición.
Al pulsarlo, la posición almacenada será la posición actual. Si ya había una posición guardada, la borrará.
Borrar posición.
Al pulsarlo, se borrará la posición almacenada. Si no hay ninguna, el botón estará deshabilitado.
Ejecuta ~mortuno/revisa practicas at para comprobar que los nombres de los programas son los correctos.