Script para informar de la seguridad de una clave, con Javascript

  • Por
Queremos informar al usuario, cuando escribe una clave, sobre el grado de seguridad de la contraseña. Para hacer eso, veamos este sencillo script Javascript.
Vamos a ver un sencillo script en Javascript para comprobar el grado de seguridad de una clave escrita por el usuario. Como es un script javascript del lado del cliente, permitirá mostrar el nivel de seguridad de la clave al mismo tiempo que el usuario la escribe en un campo de formulario.

Este script lo podremos utilizar libremente en nuestras páginas, de modo que ofrezcamos a los visitantes una información sobre lo segura o insegura que es la clave que están eligiendo, lo que les motivará a escribir claves más seguras que las que habitualmente se escriben.

Podemos ver un ejemplo del objetivo buscado antes de continuar.

En un artículo anterior del taller de Javascript estuvimos mostrando la manera de hacer varias funciones para comprobar un string y saber si tiene letras, números, mayúsculas y minúsculas. Estas funciones las utilizaremos ahora para este script de información de seguridad de la contraseña.

Para valorar el grado de seguridad de una contraseña vamos a tener en cuenta estas puntuaciones sobre distintos conceptos:

Tiene letras y números: +30%
Tiene mayúsculas y minúsculas: +30%
Tiene entre 4 y 5 caracteres: +10%
Tiene entre 6 y 8 caracteres: +30%
Tiene más de 8 caracteres: +40%

Podríamos haber escogido cualquier otra puntuación para la seguridad de la contraseña, pero esta valdrá. También podríamos haber creado otros criterios para decidir el grado de seguridad. En cualquier caso, para que quede claro este baremo, pongo un par de ejemplos:

A) Una clave con números y letras, con 7 caracteres tendría: 30% por letras y números + 30% por tener entre 6 y 8 caracteres = 60% de seguridad.
B) Otra clave con letras mayúsculas y minúsculas, sin números, y con 8 caracteres: 30% por mayúsculas y minúsculas + 40% por más de 8 caracteres = 70% de seguridad.

Para controlar la seguridad, apoyándonos en las funciones de validación alfanumérica de strings vistas anteriormente, haremos una función como esta:

function seguridad_clave(clave){
   var seguridad = 0;
   if (clave.length!=0){
      if (tiene_numeros(clave) && tiene_letras(clave)){
         seguridad += 30;
      }
      if (tiene_minusculas(clave) && tiene_mayusculas(clave)){
         seguridad += 30;
      }
      if (clave.length >= 4 && clave.length <= 5){
         seguridad += 10;
      }else{
         if (clave.length >= 6 && clave.length <= 8){
            seguridad += 30;
         }else{
            if (clave.length > 8){
               seguridad += 40;
            }
         }
      }
   }
   return seguridad            
}   


Vamos comprobando si el string tiene diversas cosas, como letras, números, mayúsculas, minúsculas, así como su longitud, para ir asignando un mayor valor a la seguridad.

Ejemplo de uso en un formulario que pide una clave

Ahora, veamos un sencillo ejemplo de uso de la función en un formulario, que muestra la seguridad de una clave escrita por el usuario:

El formulario podría ser como este:

<form>
Clave: <input type="password" size=15 name="clave" onkeyup="muestra_seguridad_clave(this.value, this.form)">
<i>seguridad:</i> <input name="seguridad" type="text" style="border: 0px; background-color:ffffff; text-decoration:italic;" onfocus="blur()">
</form>


Como vemos, tenemos 1 campo INPUT de tipo PASSWORD donde escribiremos la clave. A este campo se le ha introducido un evento ONKEYUP que se ejecuta cuando el usuario pulsa una tecla, pero en el momento de soltarla. Esa función será la encargada de hacer que se visualice la seguridad de la clave.

Pero además, hemos colocado otro campo de texto, para colocar el valor de seguridad de la contraseña. Este campo lo hemos forzado a que no se pueda escribir en él con el evento onfocus="blur()">. Sólo se podrá modificar mediante Javascript.

Veamos la función muestra_seguridad_clave(), que es la que se encarga de recibir tanto la clave escrita como el formulario donde se encuentra, para actualizar el valor de seguridad.

function muestra_seguridad_clave(clave,formulario){
   seguridad=seguridad_clave(clave);
   formulario.seguridad.value=seguridad + "%";
}


Como vemos, se hace uso de la función que devuelve la seguridad de un string que se va a utilizar como contraseña. Luego se mete ese valor en el campo de texto adicional que hay en el formulario.

Podemos ver el ejemplo en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Anonimo

14/7/2009
Contraseña de 100% de seguridad
Es mas facil usar una contraseña como esta por ejemplo: moT999122* Comprobadlo da 100% seguridad lo que significa que no creo que alguien llegue a adivinarlo porque yo uso una contraseña parecida con otra combinacion de numeros, letras y simbolos NUNCA NADIE ADIVINO MI CONTRASEÑA

Enrique

13/7/2014
Buen aporte
Me parece muy bueno tu aporte. Me ha servido para implementarlo en un pequeño sistema,

Saludos

Oscar Ibague

16/6/2015
Muy Buena Practica
Gracias muchachos este ejemplo me ha sido de gran ayuda para mi trabajo, lo único que tuve que adicionarle fue el patrón de caracteres especiales, algo de diseño con css y listo.

Pedro

15/1/2016
Duda
muy bueno el post, ahora si quiero por ejemplo si la contraseña es de un 40% o menos que me de un alert que la contraseña es baja? gracias