Creeu un formulari de validació CAPTCHA mitjançant HTML, CSS i JavaScript

Creeu un formulari de validació CAPTCHA mitjançant HTML, CSS i JavaScript

Actualment els CAPTCHA són una part integral de la seguretat del lloc web. Milions de proves CAPTCHA es completen cada dia en línia.





Si no heu implementat la validació CAPTCHA al vostre lloc web, pot crear-vos un gran problema, configurant-vos com a objectiu per als spammers.



Aquí teniu tot el que heu de saber sobre els CAPTCHA i com podeu implementar-los fàcilment al vostre lloc web mitjançant HTML, CSS i JavaScript.





Què és CAPTCHA?

CAPTCHA significa 'Prova de Turing pública completament automatitzada per distingir els ordinadors i els humans'. Aquest terme va ser encunyat el 2003 per Luis von Ahn, Manuel Blum, Nicholas J. Hopper i John Langford. És un tipus de prova de resposta a desafiament que s’utilitza per determinar si l’usuari és humà o no.

Els CAPTCHA afegeixen seguretat als llocs web proporcionant desafiaments difícils de realitzar per als robots, però relativament fàcils per als humans. Per exemple, identificar totes les imatges d'un cotxe a partir d'un conjunt d'imatges múltiples és difícil per als robots, però prou senzill per als ulls humans.



La idea de CAPTCHA neix de la prova de Turing. Una prova de Turing és un mètode per comprovar si una màquina pot pensar o no com un ésser humà. Curiosament, una prova CAPTCHA es pot anomenar 'prova de Turing inversa' ja que en aquest cas, l'ordinador crea la prova que desafia els humans.

Per què el vostre lloc web necessita validació CAPTCHA?

Els CAPTCHA s’utilitzen principalment per evitar que els robots envien automàticament formularis amb contingut brossa i altres continguts nocius. Fins i tot empreses com Google l’utilitzen per evitar que el seu sistema ataqui correu brossa. Aquests són alguns dels motius pels quals el vostre lloc web es pot beneficiar de la validació CAPTCHA:



  • Els CAPTCHA ajuden a evitar que els pirates informàtics i els robots facin correu brossa als sistemes de registre creant comptes falsos. Si no se'ls impedeix, poden utilitzar aquests comptes amb finalitats nefastes.
  • Els CAPTCHA poden prohibir els atacs d'inici de sessió amb força bruta del vostre lloc web que els pirates informàtics utilitzen per provar d'iniciar la sessió mitjançant milers de contrasenyes.
  • Els CAPTCHA poden restringir els robots de correu brossa a la secció de revisió proporcionant comentaris falsos.
  • CAPTCHA ajuda a prevenir la inflació de bitllets, ja que algunes persones compren un gran nombre de bitllets per a la seva revenda. CAPTCHA pot fins i tot evitar registres falsos a esdeveniments gratuïts.
  • Els CAPTCHA poden restringir els ciberdelictes de brossa contra blogs amb comentaris i enllaços a llocs web nocius.

Hi ha molts més motius que permeten integrar la validació CAPTCHA al vostre lloc web. Podeu fer-ho amb el codi següent.

El vídeo amazon prime no funciona a la televisió

Codi CAPTCHA HTML

HTML, o HyperText Markup Language, descriu l'estructura d'una pàgina web. Utilitzeu el següent codi HTML per estructurar el formulari de validació CAPTCHA:












captcha text



Refresh






Aquest codi consta principalment de 7 elements:

  • : Aquest element s'utilitza per mostrar l'encapçalament del formulari CAPTCHA.

  • : Aquest element s'utilitza per mostrar el text CAPTCHA.
  • - Aquest element s’utilitza per crear un quadre d’entrada per escriure el CAPTCHA.
  • : Aquest botó envia el formulari i comprova si el CAPTCHA i el text mecanografiat són iguals o no.
  • : Aquest botó s'utilitza per actualitzar el CAPTCHA.
  • : Aquest element s'utilitza per mostrar la sortida segons el text introduït.
  • : Aquest és l'element pare que conté tots els altres elements.

Els fitxers CSS i JavaScript estan enllaçats a aquesta pàgina HTML mitjançant el fitxer i elements respectivament. Heu d'afegir el fitxer enllaç etiqueta dins del fitxer cap etiqueta i guió etiqueta al final del fitxer cos .

També podeu integrar aquest codi amb els formularis existents del vostre lloc web.

Relacionat: Full de trucs HTML Essentials: etiquetes, atributs i molt més



Codi CSS CAPTCHA

CSS, o Fulls d’estil en cascada, s’utilitza per donar estil als elements HTML. Utilitzeu el codi CSS següent per donar estil als elements HTML anteriors:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 220px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
height: 80%;
width: 80%;
font-size: 30px;
letter-spacing: 3px;
margin: auto;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#refreshButton {
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#textBox {
height: 25px;
}
.incorrectCaptcha {
color: #FF0000;
}
.correctCaptcha {
color: #7FFF00;
}

Afegiu o elimineu propietats CSS d’aquest codi segons les vostres preferències. També podeu donar un aspecte elegant al contenidor del formulari mitjançant el fitxer Propietat CSS box-shadow .

Codi CAPTCHA de JavaScript

JavaScript s'utilitza per afegir funcionalitat a una pàgina web que no sigui estàtica. Utilitzeu el codi següent per afegir una funcionalitat completa al formulari de validació CAPTCHA:

// document.querySelector() is used to select an element from the document using its ID
let captchaText = document.querySelector('#captcha');
var ctx = captchaText.getContext('2d');
ctx.font = '30px Roboto';
ctx.fillStyle = '#08e5ff';

let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submitButton');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refreshButton');

// alphaNums contains the characters with which you want to create the 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 = [];
// This loop generates a random string of 7 characters using alphaNums
// Further this string is displayed as a CAPTCHA
for (let i = 1; i <= 7; i++) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
var c = emptyArr.join('');
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);

// This event listener is stimulated whenever the user press the 'Enter' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
userText.addEventListener('keyup', function(e) {
// Key Code Value of 'Enter' Button is 13
if (e.keyCode === 13) {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
}
});
// This event listener is stimulated whenever the user clicks the 'Submit' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
submitButton.addEventListener('click', function() {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
});
// This event listener is stimulated whenever the user press the 'Refresh' button
// A new random CAPTCHA is generated and displayed after the user clicks the 'Refresh' button
refreshButton.addEventListener('click', function() {
userText.value = '';
let refreshArr = [];
for (let j = 1; j <= 7; j++) {
refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
c = refreshArr.join('');
ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);
output.innerHTML = '';
});

Ara teniu un formulari de validació CAPTCHA completament funcional. Si voleu fer una ullada al codi complet, podeu clonar el fitxer Dipòsit GitHub d’aquest projecte CAPTCHA-Validator . Després de clonar el dipòsit, executeu el fitxer HTML i obtindreu la següent sortida:

com eliminar malware de l'iPhone

Quan introduïu el codi CAPTCHA correcte al quadre d'entrada, es mostrarà la següent sortida:

Quan introduïu cap codi CAPTCHA incorrecte al quadre d'entrada, es mostrarà la següent sortida:

Assegureu el vostre lloc web amb CAPTCHA

En el passat, moltes organitzacions i empreses han patit grans pèrdues com ara incompliments de dades, atacs de correu brossa, etc. com a conseqüència de no disposar de formularis CAPTCHA als seus llocs web. Es recomana afegir CAPTCHA al vostre lloc web, ja que afegeix una capa de seguretat per evitar que els llocs web siguin cibercriminals.

Google també va llançar un servei gratuït anomenat 'reCAPTCHA' que ajuda a protegir els llocs web contra el correu brossa i l'abús. CAPTCHA i reCAPTCHA semblen semblants, però no són el mateix. De vegades, els CAPTCHA se senten frustrants i difícils d’entendre per a molts usuaris. Tot i això, hi ha una raó important per què se’ls fa difícils.

Compartir Compartir Tweet Correu electrònic Com funcionen els CAPTCHA i per què són tan difícils?

CAPTCHA i reCAPTCHA eviten el correu brossa. Com funcionen? I per què trobeu els CAPTCHA tan difícils de resoldre?

Llegiu a continuació Temes relacionats
  • Programació
  • HTML
  • JavaScript
  • CSS
Sobre l'autor Yuvraj Chandra(60 articles publicats)

Yuvraj és estudiant universitari en ciències de la computació a la Universitat de Delhi, Índia. És un apassionat del desenvolupament web Full Stack. Quan no escriu, explora la profunditat de les diferents tecnologies.

Més de Yuvraj Chandra

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us