JavaScript

Validar contraseña segura jQuery: 3 ejemplos completos

Validar contraseña segura jQuery. Cuando hablamos de seguridad lo que prima es la fuerza de la contraseña en los sistemas. Por lo tanto, en nuestras aplicaciones debemos de validar una contraseña fuerte. Justamente, en este artículo vamos a aprender a crear una contraseña fuerte y segura apoyada de lenguajes de programación (JavaScript) y bibliotecas existentes en internet.

JavaScript es un lenguaje que trabaja al lado del servidor y será un elemento crucial para indicarnos la fuerza de la contraseña. Sin embargo, es bueno conocer que las vulnerabilidades son las contraseñas débiles que son bombardeadas con bots o ataques con diccionario de contraseña.

Seguridad en contraseñas con jQuery y JavaScript
Seguridad en contraseñas con jQuery y JavaScript

Validar contraseña segura jQuery

A continuación, veremos pasos y descripciones de los 3 métodos para lograr este mismo objetivo.

Primer método: Strength

Existe una librería que nos ahorrara mucho tiempo y se llama Strength.js es un plugin de jquery que apoya a nuestros formularios informándonos en tiempo real que tan fuerte es nuestra contraseña.

¿Qué es este plugins y para qué sirve?

Este plugin aparte de indicarnos la fuerza de la contraseña, también muestra y oculta la contraseña ingresada al input (type="password").

Strength.js proporciona una función en tiempo real se visualizar los asteriscos en texto, todo esto en tiempo real.

La seguridad de este plugin contempla y está marcado en 4 puntuaciones. Estos niveles de seguridad son:

a) La contraseña debe contener 8 caracteres especiales o más.
b) Debe de contener al menos 1 letra minúscula.
c) La contraseña debe contener  al menos 1 letra mayúscula.
d) Tiene que  tener al menos 1 número en su estructura.

¿Cómo funciona este plugin?

Para que funcione correctamente necesita de la biblioteca del jQuery declarado en la etiqueta HEAD dentro de nuestra estructura HTML5. Veamos un ejemplo.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="strength.js"></script>
<script type="text/javascript" src="js.js"></script>

Fichero principal del ejemplo

Aquí declaramos los ficheros JavaScript necesarios para el funcionamiento del código. Además, el formulario con su respectivo input donde el usuario ingresar la contraseña para ser validada.

<h1><span>BaulPHP</span></h1>
<form id="myform" action="" method="get" accept-charset="utf-8">
  <input id="myPassword" type="password" name="" value="">
</form>

<script src="js/jquery.min.js"></script>
<script src="js/strength.min.js"></script>
<script id="rendered-js">
$(document).ready(function ($) {
$('#myPassword').strength({
strengthClass: 'strength',
strengthMeterClass: 'strength_meter',
strengthButtonClass: 'button_strength',
strengthButtonText: 'Mostrar Password',
strengthButtonTextToggle: 'Ocultar Password' });
});
</script>

Segundo método: jQuery

Este método es más simple y también funcional para validar contraseñas.

Lo primero sería implementar un pequeño formulario con un campo input tipo password. Además, tenemos que declaras las bibliotecas del jQuery para que posteriormente mostrar dinámicamente un mensaje con la fortaleza de la contraseña que haya ingresado al formulario.

A medida que el usuario ingrese combinaciones de texto, este mensaje se actualizará, mostrando la fortaleza de la nueva clave ingresada.

Para que este script funcione lo primero que tenemos que realizar es incluir la librería jQuery y el código del plugin en la cabecera o <head> de nuestra página en el cual queremos mostrar tal validación.

<div class="container">
<h1>JavaScript - validar contraseña</h1><br><br>

<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script src="forte.js"></script>

Código jQuery validador de contraseñas.

Un pequeño script que válida la información ingresada por el usuario al formulario. Sin embargo, si observan existen varios niveles de seguridad en el código y se activa de acuerdo al grado de fuerza de la contraseña ingresada.

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('Más caracteres.');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Fuerte!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Media!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Débil!');
     }
     return true;
});

Tercer método: Mostrar contraseña segura con jQuery

Mostrar contraseña segura con jQuery en un campo HTML, Bootstrap (Predicción), este excelente plugin muestra la fortaleza de una contraseña antes de ser ingresado al sistema. Esta funcionalidad es muy útil pues apoya a tu sistema con una importante labor de seguridad.

Para empezar vamos primero a incluir Bootstrap y JQuery.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- jQuery -->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>

Contenido del sistema

Crearemos nuestro campo input tipo password o componente text en tipo password.

<form>
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Contraseña</label>
    <div class="col-sm-10">
        <input type="password" name="senhaForca" class="form-control" id="senhaForca" onkeyup="validarfuerza()">
    </div>
</div>

<div class="form-group row">
    <label class="col-sm-2 col-form-label"></label>
    <div class="col-sm-5">
        <div id="erroSenhaForca"></div>
    </div>
</div>
</form>
</div>
Validar contraseña segura jQuery 3 ejemplos completos
Validar contraseña segura jQuery 3 ejemplos completos

CONCLUSIÓN DEL SISTEMA

La seguridad en un factor clave en todo sistema web o de escritorio. EN tal sentido, su uso es muy recomendado y puede aplicarse en varios contextos.

  • En registros de usuarios. Si, somos propietarios de un sitio donde existen usuarios debemos de implementar este sistema rápidamente para evitar accesos no autorizados a las cuentas de nuestros queridos usuarios.
  • Para login de sistemas web. Con estos ejemplos podemos forzar e informar al usuario el nivel de fuerza de su contraseña.
    La implementación de este sistema es muy sencillo y su curva de aprendizaje es muy baja.

Se recomienda tener siempre presente estos casos ya que podremos sugerir a los usuarios no dejar tan fácil la contraseña, la contraseña se considera fuerte cuando se usan caracteres especiales, mayúsculas y minúsculas y números. Aunque, hay técnicas para generar contraseñas de manera automática.

DESCARGA DEL SISTEMA

Les dejare un paquete en formato Zip con los tres ejemplos listos para ser implementados.

[sociallocker id=5099] Descargar Script [/sociallocker]

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

4 comentarios

  1. Hola. Intento descargar los ejemplos para darle mas claridad a la explicación, pero me redirige a otra pagina. Sera que puedes actualizar los archivos de descarga? Saludos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba