Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo por algo por lo que me han preguntado esta semana pasada. Que entre una cosa y otra, se me ha pasado el tiempo, pero no me he olvidado. Como todo el mundo sabe (o eso creo), en el vasto mundo de la web, la necesidad de diferenciar entre humanos y bots es crucial para prevenir abusos automatizados. Los CAPTCHAs (Completely Automated Public Turing tests to tell Computers and Humans Apart) han sido la solución de facto para este propósito.
Por este motivo, un «aMhigo» me ha preguntado por cómo podía crear un generado de CAPTCHA para instalar en una web que está haciendo desde cero para un curso de diseño que está haciendo. Pues bien, en este artículo vamos a ver cómo se puede crear un generador de CAPTCHA sencillo, implementado un poco de código HTML, otro poco de CSS y JavaScript para darle la lógica al asunto.
Un vistazo al código del generador de CAPTCHA
El resultado final, es bien sencillo. Tan solo tendrá el usuario que escribir el texto que se ve en el cuadro de texto indicado para ello. El proyecto va a incluir un botón para regenerar el CAPTCHA, por si no se lee correctamente el texto mostrado.
Si el usuario acierta con el CAPTCHA, aparecerá un mensaje indicando que se ha acertado. Aquí en lugar de mostrar ese mensaje, será cuando habrá que programar cómo debe seguir adelante el usuario. En caso de no acertar el texto, se verá un mensaje como el que se puede ver en la captura de pantalla anterior.
La estructura HTML
Con la estructura HTML vamos a establecer la base para el generador de CAPTCHA. Esto si lo quieres aplicar a una web, no será necesario, aun que tendrás que añadir las clases de los div a tu estructura. El caso, es que aquí se va a mostrar un contenedor principal en el que tendremos los elementos clave, como el título, la casilla del CAPTCHA, la entrada del usuario y los botones.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Generador Captcha</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
</head>
<body>
<div class="titulo" aria-label="Hecho en entreunosyceros.net"></div> <!-- Crea un elemento <div> con una clase "titulo" y un atributo "aria-label" -->
<div class="container">
<header>Generador Captcha</header>
<div class="input_field captch_box">
<input type="text" value="" disabled />
<button class="refresh_button">
<i class="fa-solid fa-rotate-right" title="Refrescar el Captcha"></i>
</button>
</div>
<div class="input_field captch_input">
<input type="text" placeholder="Escribe el Captcha" />
</div>
<div class="message"> </div>
<div class="input_field button disabled">
<button>Enviar Captcha</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Estilos CSS
Con el código CSS vamos a definir la apariencia del generador de CAPTCHA. Desde el diseño hasta los colores, estos estilos serán los que habrá que modificar para crear una interfaz de usuario atractiva.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
background: #361bbd;
}
.container {
position: absolute;
max-width: 300px;
width: 100%;
border-radius: 12px;
padding: 15px 25px 25px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
margin-top: 10em;
}
header {
color: #333;
margin-bottom: 20px;
font-size: 18px;
font-weight: 600;
text-align: center;
}
.input_field {
position: relative;
height: 45px;
margin-top: 15px;
width: 100%;
}
/*Botón refrescar*/
.refresh_button {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: #0c9100;
height: 30px;
width: 30px;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
}
.refresh_button:active {
transform: translateY(-50%) scale(0.98);
}
.input_field input,
.button button {
height: 100%;
width: 100%;
outline: none;
border: none;
border-radius: 8px;
}
.input_field input {
padding: 0 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.captch_box input {
color: #6b6b6b;
font-size: 22px;
pointer-events: none;
}
.captch_input input:focus {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
/*Mensajes*/
.message {
font-size: 14px;
margin: 14px 0;
color: #826afb;
display: none;
}
.message.active {
display: block;
text-align: center;
}
/*Botón enviar*/
.button button {
background: #320fe2;
color: #fff;
cursor: pointer;
user-select: none;
font-weight: 600;
}
.button button:active {
transform: scale(0.99);
}
.button.disabled {
opacity: 0.6;
pointer-events: none;
}
/*Título*/
.titulo {
box-sizing: border-box;
padding: 10px;
border: none;
font: normal 38px / normal "Warnes", Helvetica, sans-serif;
color: rgba(255, 255, 255, 1);
text-align: center;
white-space: pre;
text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0),
0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272,
0 0 80px #4e4e4e, 0 0 100px #2b2b2b;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
width: 100%;
}
/* Estilo para el título cuando se le hace hover */
.titulo:hover {
text-shadow: 0 0 10px rgb(73, 73, 73), 0 0 20px rgb(56, 56, 56),
0 0 30px rgb(48, 48, 48), 0 0 40px #5c5c5c, 0 0 70px #000000,
0 0 80px #000000, 0 0 100px #000000;
}
/* Texto del título */
.titulo::after {
content: "Generador de CAPTCHA";
}
/* Estilo de deformación y desenfoque para el texto del captcha */
.captch_box input {
transform: rotate(1deg) skew(20deg);
filter: blur(1px); /* Aplicar un efecto de desenfoque */
letter-spacing: 2px; /* Ajusta el espaciado entre letras según sea necesario */
}JavaScript para la lógica del CAPTCHA
El código JavaScript es el corazón de nuestro generador de CAPTCHA. Veamos las funciones clave y cómo interactúan:
// Seleccionando los elementos DOM necesarios
const casillaCaptcha = document.querySelector(".captch_box input");
const botonActualizar = document.querySelector(".refresh_button");
const casillaEntradaCaptcha = document.querySelector(".captch_input input");
const mensaje = document.querySelector(".message");
const botonEnviar = document.querySelector(".button");
// Variable para almacenar el captcha generado
let textoCaptcha = null;
// Función para generar el captcha
const generarCaptcha = () => {
const cadenaAleatoria = Math.random().toString(36).substring(2, 7);
const arrayCadenaAleatoria = cadenaAleatoria.split("");
const cadenaModificada = arrayCadenaAleatoria.map((caracter) => (Math.random() > 0.5 ? caracter.toUpperCase() : caracter));
textoCaptcha = cadenaModificada.join(" ");
casillaCaptcha.value = textoCaptcha;
console.log(textoCaptcha);
};
const clickBotonActualizar = () => {
generarCaptcha();
casillaEntradaCaptcha.value = "";
validarEntradaCaptcha();
};
const validarEntradaCaptcha = () => {
// Alternar la clase de deshabilitar del botón de enviar según el campo de entrada de captcha.
botonEnviar.classList.toggle("disabled", !casillaEntradaCaptcha.value);
if (!casillaEntradaCaptcha.value) mensaje.classList.remove("active");
};
// Función para validar el captcha ingresado
const clickBotonEnviar = () => {
textoCaptcha = textoCaptcha
.split("")
.filter((caracter) => caracter !== " ")
.join("");
mensaje.classList.add("active");
// Verificar si el texto del captcha ingresado es correcto o no
if (casillaEntradaCaptcha.value === textoCaptcha) {
mensaje.innerText = "El captcha SI ES correcto";
mensaje.style.color = "#005c13";
} else {
mensaje.innerText = "El captcha NO es correcto";
mensaje.style.color = "#FF2525";
}
};
// Agregar escuchadores de eventos para el botón de actualizar, la casilla de entrada de captcha y el botón de enviar
botonActualizar.addEventListener("click", clickBotonActualizar);
casillaEntradaCaptcha.addEventListener("keyup", validarEntradaCaptcha);
botonEnviar.addEventListener("click", clickBotonEnviar);
// Generar un captcha cuando la página se carga
generarCaptcha();Este código JavaScript se encarga de generar un CAPTCHA, actualizar la interfaz de usuario, validar la entrada del usuario y proporcionar mensajes de retroalimentación.
Este generador de CAPTCHA es más que un simple conjunto de etiquetas y estilos. Cada parte del código desempeña un papel vital en la creación de una experiencia de usuario efectiva y segura. ¡Experimenta con él y personalízalo según tus necesidades específicas! Si quieres descargar el código, además de tomarlo de esta página, también puedes descargarlo del repositorio en GitHub en el que he alojado este pequeño proyecto. Si antes de probar este código en local, quieres ver cómo trabaja, puedes hacerlo en la sección de ejemplos de esta web.