Generador de contraseñas con Strength Checker

Generador de contraseñas con Strength Checker. La contraseña es la parte más importante de cualquier aplicación web para proteger los datos. Si la contraseña es débil, se puede romper muy fácilmente y se puede acceder a datos importantes.

Por lo tanto, es muy importante usar una contraseña segura para que sea difícil romperla para proteger los datos importantes.

¿Como implementar contraseña segura?

Si está desarrollando una aplicación web y está buscando una solución para crear una contraseña segura para que sea segura, entonces está aquí en el lugar correcto.

En este tutorial, aprenderá cómo generar una contraseña segura con la función de verificación de la seguridad de la contraseña usando jQuery.

Generador de contraseñas con Strength Checker

Cubriremos este tutorial paso a paso para crear un ejemplo en vivo para generar una contraseña con un comprobador de seguridad.

Relacionado  Facebook me gusta con emoji usando PHP jQuery

Entonces, comencemos la codificación. Tendremos la siguiente estructura de archivos para este ejemplo.

Estructura de archivos generar contraseñas

Estructura de archivos generar contraseñas

Pasos para implementar contraseña segura

Detallaremos 5 pasos imprescindibles para implementar un script de validación de contraseñas seguras usando jQuery.

  • Primer paso: Formulario de registro
  • Segundo paso: Genere contraseña segura con JavaScript
  • Tercer paso: verifique la seguridad de la contraseña con JavaScript
  • Cuarto paso: verifique la contraseña cuando escriba la contraseña
  • Quinto paso: Manejar el envío del formulario con PHP

Primer paso: Formulario de registro

En el archivo index.php, diseñaremos un formulario HTML con entrada de contraseña y generaremos un botón de contraseña. También diseñaremos un contenedor para mostrar el mensaje de estado del verificador de seguridad de la contraseña.

<form name="form" class="form" action="" method="post">
<div class="row">
<div class="form-group col-md-6" style="padding: 0px 2px 0px 15px">
<input type="email" name="email" id="email" class="form-control" placeholder="Email address..">
</div>
</div>
<div class="row">
<div class="form-group col-md-6" style="padding: 0px 2px 0px 15px">
<input type="text" name="password" id="password" class="form-control" placeholder="Password..">
</div>
<div class="form-group col-md-4" style="padding: 1px 2px 3px 1px">
<input type="button" id="generatePassword" class="btn btn btn-md" value="Generate Password">
</div>
</div>
<div class="row hidden" id="strengthSection">
<div class="form-group col-md-6">
<div id="strengthWrapper">
<div class="form-control" id="strength"></div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<input type="submit" name="signup" class="btn btn-info btn-md" value="Sign up">
</div>
</div>
</form>

Segundo paso: Genere contraseña segura con JavaScript

En el archivo validate.js, manejaremos la funcionalidad para crear una contraseña en el evento de clic del botón generar contraseña.

Relacionado  Drag Drop arrastrar y ordenar listas PHP jQuery

Estableceremos la contraseña creada en la entrada de contraseña. Usaremos letras minúsculas y mayúsculas, números y caracteres especiales para generar una contraseña segura.

$("#generatePassword").click(function(){
var password = Array(20).fill('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$')
.map(x => x[Math.floor(crypto.getRandomValues(new Uint32Array(1))[0] / (0xffffffff + 1) * x.length)]).join('');

$("#password").val(password);
validatePassword();
});

También llamaremos a la función validatePassword() para validar la seguridad de la contraseña generada.

Tercer paso: verifique la seguridad de la contraseña con JavaScript

En el archivo validate.js, crearemos la función validatePassword() para verificar la seguridad de la contraseña y mostrar el estado de seguridad de la contraseña.

function validatePassword() {

var pass = $("#password").val();
if(pass != "") {

$("#strengthSection").removeClass('hidden');

if(pass.length <= 6) {
$("#strength").css("background-color", "red").text("Very Weak").animate({width:'200px'},300);
}

if(pass.length > 6 && (pass.match(/[a-z]/) || pass.match(/\d+/)
|| pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/))){
$("#strength").css("background-color", "#F5BCA9").text("Weak").animate({width:'200px'},300);
}

if(pass.length > 6 && ((pass.match(/[a-z]/) && pass.match(/\d+/))
|| (pass.match(/\d+/) && pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) || (pass.match(/[a-z]/) && pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)))) {
$("#strength").css("background-color", "#FF8000").text("Good").animate({width:'200px'},300);
}

if(pass.length > 6 && pass.match(/[a-z]/) && pass.match(/\d+/)
&& pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) {
$("#strength").css("background-color", "#00FF40").text("Strong").animate({width:'200px'},300);
}

} else {
$("#strength").animate({width:'200px'},300);
$("#strengthSection").addClass('hidden');
}
}

Cuarto paso: verifica contraseña cuando escriba la contraseña

En el archivo validate.js, verificaremos la seguridad de la contraseña cuando se ingrese la contraseña en el evento keyup. Llamaremos a la función validatePassword() para verificar la seguridad de la contraseña y mostrar el mensaje de estado de seguridad de la contraseña.

$("#password").keyup(function(){
validatePassword();
});

Quinto paso: Manejar el envío del formulario con PHP

Manejaremos los valores POST de envío de formularios para guardar los valores de formulario con contraseña en la base de datos usando PHP. Aquí acabamos de mostrar los valores de formulario POST para implementar de acuerdo con los requisitos.

<?php
if (isset($_POST['signup'])) {
print_r($_POST);
}
?>

Conclusión

En este articulo hemos aprendido a integrar un pequeño modelo de validación de fuerza de una contraseña a la hora de ser creada por parte del usuario final.

Relacionado  Cargar imagen con jQuery, Ajax y PHP: Progress Bar

Se puede integrar con PHP PDO y usar el método POST o Método GET para manejar la información. Además, de insertar la contraseña validada en la base de datos.

Espero que esta explicación ayude en sus proyectos web que estén desarrollando.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 2

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Nestor Tapia

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!.

Estaremos encantados de escuchar lo que piensas

Deje una respuesta

BaulPHP
Logo
Shopping cart