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.
Entonces, comencemos la codificación. Tendremos la siguiente estructura de archivos para este ejemplo.
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.
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.
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.
