Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo para darle otro punto de vista a otro post publicado en esta web hace ya bastante tiempo. Se trataba del artículo titulado Generar passwords con PHP de manera aleatoria, pero esta vez vamos a generar contraseñas aleatorias utilizando JavaScript. Este artículo viene a cuento de que un usuario que está haciendo un curso sobre JavaScript, en el que le han pedido hacer algo como esto, me ha pedido ayuda, ya que según me contó no tenía muy claro cómo hacerlo.
Por esto, hoy en este blog veremos como crear un generador de contraseñas aleatorias. Para crear esto, solo necesitaremos algo de código HTML, otro poco de CSS y JavaScript para realizar todo lo que este generador puede hacer. Si alguien no lo sabe, un generador de contraseñas es una herramienta que crea contraseñas aleatorias o personalizadas para que los usuarios puedan utilizarlo en su día a día. Este tipo de contraseñas contienen diferentes combinaciones de caracteres como letras, números, símbolos, etc, que convertirán las contraseñas en más seguras.
En esta aplicación, los usuarios podrán generar contraseñas aleatorias utilizando diferentes configuraciones, como son utilizar letras minúsculas, mayúsculas, números, etc. En la aplicación encontraremos también un medidor de seguridad de la contraseña generada. Este indicará a los usuarios la seguridad de la contraseña generada. Y por último, veremos al lado del cuadro dónde se mostrará la contraseña, un botón que servirá para copiar la contraseña generada al portapapeles.
Generar contraseñas aleatorias utilizando JavaScript
Para crear este generador de contraseñas aleatorias, solo será necesario utilizar un poco de HTML para crear la estructura de la aplicación. También usaremos algunas reglas CSS para darle un aspecto vistoso a la aplicación, y después tendremos que usar JavaScript para hacer funcionar la aplicación como queremos.
Para empezar a crear nuestra aplicación vamos a crear una carpeta en la que meteremos los archivos que vamos a crear a continuación. Una vez que creados los archivos, solo será necesario pegar los códigos que vamos a ver dentro de cada uno de los archivos correspondientes.
Código HTML
El primero de los archivos que vamos a crear será el HTML. Este se va a llamar index.html, y con el podremos crear al estructura de la aplicación. Dentro del archivo solo será necesario pegar el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Generar Contraseña con JavaScript</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<!-- Contenedor -->
<h2>Generador de contraseñas</h2>
<div class="wrapper">
<!-- Cuerpo -->
<div class="input-box">
<!-- Lugar para mostrar la contraseña generada -->
<input type="text" disabled />
<span class="material-symbols-rounded">copy_all</span>
<!-- Icono para copiar al portapapeles -->
</div>
<div class="pass-indicator"></div>
<!-- Indicador de la fortaleza de la contraseña -->
<div class="pass-length">
<div class="details">
<label class="title">Longitud de la contraseña</label>
<span></span>
</div>
<input type="range" min="1" max="30" value="10" step="1" />
<!-- Deslizable para establecer la longitud de la contraseña-->
</div>
<div class="pass-settings">
<!-- Opciones aplicables a la contraseña que se va a generar -->
<label class="title">Opciones de la contraseña</label>
<ul class="options">
<li class="option">
<input type="checkbox" id="mayusculas" checked />
<label for="mayusculas">Mayúsculas (A-Z)</label>
</li>
<li class="option">
<input type="checkbox" id="minusculas" />
<label for="minusculas">Minúsculas (a-z)</label>
</li>
<li class="option">
<input type="checkbox" id="numeros" />
<label for="numeros">Números (0-9)</label>
</li>
<li class="option">
<input type="checkbox" id="simbolos" />
<label for="simbolos">Símbolos (!-$^+)</label>
</li>
<li class="option">
<input type="checkbox" id="espacios" />
<label for="espacios">Incluir espacios</label>
</li>
<li class="option">
<input type="checkbox" id="exc-duplicados" />
<label for="exc-duplicados">Excluir duplicados</label>
</li>
</ul>
</div>
<button class="generate-btn">Generar Contraseña</button>
<!-- Botón para regenerar la contraseña -->
</div>
</div>
</body>
</html>Código CSS
En segundo lugar crearemos el archivo CSS. Este se va a llamar style.css, y dentro añadiremos las siguientes reglas para dar un poco de estilo a nuestra aplicación web.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Comic Sans MS', sans-serif;
}
body {
display: flex;
min-height: 100vh;
background: #6312af;
align-items: center;
justify-content: center;
}
.container {
width: 450px;
border-radius: 25px;
background: rgb(240, 236, 236);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.container h2 {
text-align: center;
font-weight: 800;
font-size: 1.35rem;
padding: 1rem 1.70rem;
border-bottom: 1px solid #b7c1ce;
}
.wrapper {
margin: 1.30rem 1.75rem;
}
.wrapper .input-box {
position: relative;
}
.input-box input {
width: 100%;
height: 53px;
color: #000;
background: none;
font-size: 1.10rem;
font-weight: 500;
border-radius: 5px;
letter-spacing: 1.5px;
border: 1px solid rgb(150, 150, 150);
padding: 0 2.9rem 0 1rem;
}
.input-box span {
position: absolute;
right: 15px;
line-height: 55px;
cursor: pointer;
color: #525252;
}
.input-box span:hover {
color: #ab27f7 !important;
}
.wrapper .pass-indicator {
width: 100%;
height: 5px;
position: relative;
background: #c9c7c7;
margin-top: 0.8rem;
border-radius: 25px;
}
.pass-indicator::before {
transition: width 0.5s ease;
position: absolute;
content: "";
height: 100%;
width: 50%;
border-radius: inherit;
}
.pass-indicator#debil::before {
width: 20%;
background: #E64A4A;
}
.pass-indicator#medio::before {
width: 50%;
background: #f1c80b;
}
.pass-indicator#fuerte::before {
width: 100%;
background: #42f451;
}
.wrapper .pass-length {
margin: 1.6rem 0 1.3rem;
}
.pass-length .details {
display: flex;
justify-content: space-between;
}
.pass-length input {
width: 100%;
height: 5px;
}
.pass-settings .options {
display: flex;
list-style: none;
flex-wrap: wrap;
margin-top: 1rem;
border-bottom: 1px solid #000;
}
.pass-settings .options .option {
width: calc(100% / 2);
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.options .option:first-child {
pointer-events: none;
}
.options .option:first-child input {
opacity: 0.9;
}
.options .option input {
width: 18px;
height: 18px;
cursor: pointer;
}
.options .option label {
padding-left: 0.65rem;
cursor: pointer;
color: #3b3a3a;
}
.wrapper .generate-btn {
width: 100%;
color: #fff;
border: none;
outline: none;
cursor: pointer;
background: #6d17f8;
font-size: 1.1rem;
padding: 0.95rem 0;
border-radius: 5px;
text-transform: uppercase;
margin: 0.95rem 0 1.5rem;
}
.wrapper .generate-btn:hover {
background: #925aec;
}Código JavaScript
Para terminar, crearemos el archivo necesario para que esto funcione. Este archivo JavaScrip se va a llamar script.js, y dentro pegaremos el siguiente código:
const lengthSlider = document.querySelector(".pass-length input"),
opciones = document.querySelectorAll(".option input"),
copyIcon = document.querySelector(".input-box span"),
passwordInput = document.querySelector(".input-box input"),
fortalezaPass = document.querySelector(".pass-indicator"),
botonGenerador = document.querySelector(".generate-btn");
const caracteres = {
// objeto de letras, números y símbolos
minustuclas: "abcdefghijklmnñopqrstuvwxyz",
mayusculas: "ABCDEFGHIJKLMNÑOPQRSTUVWXYZ",
numeros: "0123456789",
simbolos: "^!$%&|[](){}:;.,*+-#@<>~€¬",
};
const generarPassword = () => {
let staticPassword = "",
PasswordAleatorio = "",
excludeDuplicate = false,
longitudPass = lengthSlider.value;
opciones.forEach((option) => {
// recorriendo la casilla de verificación de cada opción
if (option.checked) {
// si la casilla de verificación está marcada
// si la identificación de la casilla de verificación no es exc-duplicar y espacios
if (option.id !== "exc-duplicados" && option.id !== "espacios") {
// agregando un valor clave particular del objeto de carácter a staticPassword
staticPassword += caracteres[option.id];
} else if (option.id === "espacios") {
// si la identificación de la casilla de verificación es espacios
staticPassword += ` ${staticPassword} `; // agregando espacio al principio y al final de staticPassword
} else {
// de lo contrario, pase el valor true a excluir Duplicar
excludeDuplicate = true;
}
}
});
for (let i = 0; i < longitudPass; i++) {
// obtener caracteres aleatorios de la contraseña estática
let randomChar =
staticPassword[Math.floor(Math.random() * staticPassword.length)];
if (excludeDuplicate) {
// Si excludeDuplicate es verdadero
// si randomPassword no contiene el carácter aleatorio actual o randomChar es igual
// al espacio " " y luego agregue un carácter aleatorio a randomPassword; de lo contrario, disminuya i en -1
!PasswordAleatorio.includes(randomChar) || randomChar == " "
? (PasswordAleatorio += randomChar)
: i--;
} else {
// de lo contrario, agregue un carácter aleatorio a randomPassword
PasswordAleatorio += randomChar;
}
}
passwordInput.value = PasswordAleatorio; // pasando contraseña aleatoria a valor de entrada de contraseña
};
const actualizarPassIndicator = () => {
// si el valor de lengthSlider es inferior a 8, pase "débil" como ID de passIndicator; de lo contrario, si lengthSlider
// el valor es menor que 16, luego pase "medio" como id, de lo contrario pase "fuerte" como id
fortalezaPass.id =
lengthSlider.value <= 8
? "debil"
: lengthSlider.value <= 16
? "medio"
: "fuerte";
};
const actualizarDeslizante = () => {
// pasar el valor del control deslizante como texto de contador
document.querySelector(".pass-length span").innerText = lengthSlider.value;
generarPassword();
actualizarPassIndicator();
};
actualizarDeslizante();
const copiarPassword = () => {
navigator.clipboard.writeText(passwordInput.value); // copia de contraseña aleatoria
copyIcon.innerText = "check"; // cambiar el icono de copia a marcado
copyIcon.style.color = "#4285F4";
setTimeout(() => {
// después de 1500 ms, cambiando el icono de marca de nuevo a copiar
copyIcon.innerText = "copy_all";
copyIcon.style.color = "#707070";
}, 2000);
};
botonGenerador.addEventListener("click", generarPassword);
copyIcon.addEventListener("click", copiarPassword);
lengthSlider.addEventListener("input", actualizarDeslizante);Y con este código que acabamos de ver, cualquier podrá generar contraseñas aleatorias gracias a este generador de contraseñas. Como hemos visto, solo ha sido necesario utilizar tres archivos. Si quieres probar la aplicación, antes de crearlo en tu equipo local (o dónde sea que lo vas a utilizar), puedes ver funcionando este generador de contraseñas, y decidir si es lo que buscas.
