Hoy en día, los CAPTCHA son una parte integral de la seguridad del sitio web. Millones de pruebas CAPTCHA se completan en línea todos los días.

Si no ha implementado la validación CAPTCHA en su sitio web, podría crear un gran problema para usted, configurándolo como un objetivo para los spammers.

Aquí encontrará todo lo que necesita saber sobre CAPTCHA y cómo puede implementarlos fácilmente en su sitio web utilizando HTML, CSS y JavaScript.

¿Qué es CAPTCHA?

CAPTCHA son las siglas de "Prueba de Turing pública completamente automatizada para diferenciar a las computadoras de los humanos". Este término fue acuñado en 2003 por Luis von Ahn, Manuel Blum, Nicholas J. Hopper y John Langford. Es un tipo de prueba de desafío-respuesta que se utiliza para determinar si el usuario es humano o no.

Los CAPTCHA agregan seguridad a los sitios web al proporcionar desafíos que son difíciles de realizar para los bots pero relativamente fáciles para los humanos. Por ejemplo, identificar todas las imágenes de un automóvil a partir de un conjunto de imágenes múltiples es difícil para los bots, pero lo suficientemente simple para los ojos humanos.

La idea de CAPTCHA se origina en la Prueba de Turing. Una prueba de Turing es un método para probar si una máquina puede pensar como un humano o no. Curiosamente, una prueba CAPTCHA puede denominarse "prueba de Turing inversa", ya que en este caso, la computadora crea la prueba que desafía a los humanos.

¿Por qué su sitio web necesita validación CAPTCHA?

Los CAPTCHA se utilizan principalmente para evitar que los bots envíen automáticamente formularios con spam y otro contenido dañino. Incluso empresas como Google lo utilizan para evitar que su sistema sufra ataques de spam. Estas son algunas de las razones por las que su sitio web puede beneficiarse de la validación CAPTCHA:

• Los CAPTCHA ayudan a evitar que los piratas informáticos y los robots envíen spam a los sistemas de registro creando cuentas falsas. Si no se previenen, pueden usar esas cuentas con fines nefastos.
• Los CAPTCHA pueden prohibir los ataques de inicio de sesión de fuerza bruta desde su sitio web que los piratas informáticos utilizan para intentar iniciar sesión con miles de contraseñas.
• Los CAPTCHA pueden impedir que los bots envíen spam a la sección de revisión proporcionando comentarios falsos.
• Los CAPTCHA ayudan a prevenir la inflación de boletos, ya que algunas personas compran una gran cantidad de boletos para revenderlos. CAPTCHA puede incluso evitar registros falsos a eventos gratuitos.
• Los CAPTCHA pueden impedir que los delincuentes cibernéticos envíen spam a blogs con comentarios poco fiables y enlaces a sitios web dañinos.

Hay muchas más razones que respaldan la integración de la validación CAPTCHA en su sitio web. Puede hacerlo con el siguiente código.

Código HTML CAPTCHA

HTML, o HyperText Markup Language, describe la estructura de una página web. Utilice el siguiente código HTML para estructurar su formulario de validación CAPTCHA:

Validador de Captcha usando HTML, CSS y JavaScript



texto captcha




Actualizar

Este código consta principalmente de 7 elementos:

• : Este elemento se utiliza para mostrar el encabezado del formulario CAPTCHA.
• : Este elemento se utiliza para mostrar el texto CAPTCHA.
• - Este elemento se utiliza para crear un cuadro de entrada para escribir el CAPTCHA.
• : Este botón envía el formulario y comprueba si el CAPTCHA y el texto escrito son iguales o no.
• : Este botón se utiliza para actualizar el CAPTCHA.
• : Este elemento se utiliza para mostrar la salida de acuerdo con el texto ingresado.
• : Este es el elemento padre que contiene todos los demás elementos.

Los archivos CSS y JavaScript están vinculados a esta página HTML a través del y elementos respectivamente. Debes agregar el Enlace etiqueta dentro de la cabeza etiqueta y texto etiqueta al final de la cuerpo.

También puede integrar este código con formularios existentes de su sitio web.

Relacionados: La hoja de referencia de HTML Essentials: etiquetas, atributos y más

Código CSS CAPTCHA

CSS, o hojas de estilo en cascada, se utiliza para diseñar elementos HTML. Utilice el siguiente código CSS para diseñar los elementos HTML anteriores:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
cuerpo {
color de fondo: # 232331;
familia de fuentes: 'Roboto', sans-serif;
}
#captchaBackground {
altura: 200px;
ancho: 250px;
color de fondo: # 2d3748;
pantalla: flex;
alinear-elementos: centro;
justificar-contenido: centro;
flex-direction: columna;
}
#captchaHeading {
color blanco;
}
#captcha {
margen inferior: 1em;
tamaño de fuente: 30px;
espaciado entre letras: 3px;
color: # 08e5ff;
}
.center {
pantalla: flex;
flex-direction: columna;
alinear-elementos: centro;
}
#botón de enviar {
margen superior: 2em;
margen inferior: 2em;
color de fondo: # 08e5ff;
borde: 0px;
font-weight: negrita;
}
#refreshButton {
color de fondo: # 08e5ff;
borde: 0px;
font-weight: negrita;
}
#caja de texto {
altura: 25px;
}
.CAPTCHA incorrecto {
color: # FF0000;
}
.correctCaptcha {
color: # 7FFF00;
}

Agregue o elimine propiedades CSS de este código según sus preferencias. También puede dar un aspecto elegante al contenedor de formularios utilizando el Propiedad de sombra de cuadro CSS.

Código CAPTCHA de JavaScript

JavaScript se utiliza para agregar funcionalidad a una página web que de otro modo sería estática. Use el siguiente código para agregar funcionalidad completa al formulario de validación CAPTCHA:

// document.querySelector () se usa para seleccionar un elemento del documento usando su ID
let captchaText = document.querySelector ('# captcha');
let userText = document.querySelector ('# textBox');
let submitButton = document.querySelector ('# submitButton');
let salida = document.querySelector ('# salida');
let refreshButton = document.querySelector ('# refreshButton');
// alphaNums contiene los caracteres con los que desea crear el CAPTCHA
let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L ',' M ',' N ',' O ',' P ',' Q ',' R ',' S ',' T ',' U ',' V ',' W ',' X ', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', ​​'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p ',' q ',' r ',' s ',' t ',' u ',' v ',' w ',' x ',' y ',' z ',' 0 ',' 1 ', '2', '3', '4', '5', '6', '7', '8', '9'];
let emptyArr = [];
// Este bucle genera una cadena aleatoria de 7 caracteres usando alphaNums
// Además, esta cadena se muestra como CAPTCHA
para (sea i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Este oyente de eventos se estimula cada vez que el usuario presiona el botón "Enter"
// "¡Correcto!" o el mensaje "Incorrecto, inténtalo de nuevo" es
// se muestra después de validar el texto de entrada con CAPTCHA
userText.addEventListener ('keyup', function (e) {
// El valor del código clave del botón "Enter" es 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "¡Correcto!";
} demás {
output.classList.add ("incorrectoCaptcha");
output.innerHTML = "Incorrecto, inténtelo de nuevo";
}
}
});
// Este oyente de eventos se estimula cada vez que el usuario hace clic en el botón "Enviar"
// "¡Correcto!" o el mensaje "Incorrecto, inténtalo de nuevo" es
// se muestra después de validar el texto de entrada con CAPTCHA
submitButton.addEventListener ('hacer clic', función () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "¡Correcto!";
} demás {
output.classList.add ("incorrectoCaptcha");
output.innerHTML = "Incorrecto, inténtelo de nuevo";
}
});
// Este oyente de eventos se estimula cada vez que el usuario presiona el botón "Actualizar"
// Se genera un nuevo CAPTCHA aleatorio y se muestra después de que el usuario hace clic en el botón "Actualizar"
refreshButton.addEventListener ('click', function () {
userText.value = "";
let refreshArr = [];
para (sea j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

¡Ahora tiene un formulario de validación CAPTCHA completamente funcional! Si desea ver el código completo, puede clonar el Repositorio de GitHub de este proyecto CAPTCHA-Validator. Después de clonar el repositorio, ejecute el archivo HTML y obtendrá el siguiente resultado:

Cuando ingrese el código CAPTCHA correcto en el cuadro de entrada, se mostrará el siguiente resultado:

Cuando ingresa un código CAPTCHA incorrecto en el cuadro de entrada, se mostrará el siguiente resultado:

Haga que su sitio web sea seguro con CAPTCHA

En el pasado, muchas organizaciones y empresas han sufrido grandes pérdidas como violaciones de datos, ataques de spam, etc. como resultado de no tener formularios CAPTCHA en sus sitios web. Es muy recomendable agregar CAPTCHA a su sitio web, ya que agrega una capa de seguridad para evitar que el sitio web sea de ciberdelincuentes.

Google también lanzó un servicio gratuito llamado "reCAPTCHA" que ayuda a proteger los sitios web del spam y el abuso. CAPTCHA y reCAPTCHA parecen similares, pero no son exactamente lo mismo. A veces, los CAPTCHA se sienten frustrantes y difíciles de entender para muchos usuarios. Aunque, hay una razón importante por la que se hacen difíciles.

¿Cómo funcionan los CAPTCHA y por qué son tan difíciles?

Los CAPTCHA y reCAPTCHA evitan el spam. ¿Cómo trabajan? ¿Y por qué encuentra CAPTCHA tan difíciles de resolver?

Leer siguiente

Sobre el Autor