Maak een CAPTCHA-validatieformulier met HTML, CSS en JavaScript

Maak een CAPTCHA-validatieformulier met HTML, CSS en JavaScript

Tegenwoordig zijn CAPTCHA's een integraal onderdeel van websitebeveiliging. Elke dag worden er miljoenen CAPTCHA-tests online uitgevoerd.





Als u CAPTCHA-validatie niet op uw website heeft geïmplementeerd, kan dit een groot probleem voor u opleveren, waardoor u een doelwit wordt voor spammers.



Hier vindt u alles wat u moet weten over CAPTCHA's en hoe u ze eenvoudig op uw website kunt implementeren met HTML, CSS en JavaScript.





Wat is CAPTCHA?

CAPTCHA staat voor 'Completely Automated Public Turing test to tell Computers and Humans Apart'. Deze term werd in 2003 bedacht door Luis von Ahn, Manuel Blum, Nicholas J. Hopper en John Langford. Het is een soort challenge-response-test die wordt gebruikt om te bepalen of de gebruiker een mens is of niet.

CAPTCHA's voegen beveiliging toe aan websites door uitdagingen te bieden die moeilijk zijn voor bots om uit te voeren, maar relatief eenvoudig voor mensen. Het identificeren van alle afbeeldingen van een auto uit een reeks van meerdere afbeeldingen is bijvoorbeeld moeilijk voor bots, maar eenvoudig genoeg voor menselijke ogen.



Het idee van CAPTCHA komt voort uit de Turing Test. Een Turing Test is een methode om te testen of een machine kan denken als een mens of niet. Interessant is dat een CAPTCHA-test een 'omgekeerde Turing-test' kan worden genoemd, omdat in dit geval de computer de test maakt die mensen uitdaagt.

Waarom heeft uw website CAPTCHA-validatie nodig?

CAPTCHA's worden voornamelijk gebruikt om te voorkomen dat bots automatisch formulieren met spam en andere schadelijke inhoud indienen. Zelfs bedrijven zoals Google gebruiken het om hun systeem te beschermen tegen spamaanvallen. Hier zijn enkele van de redenen waarom uw website baat heeft bij CAPTCHA-validatie:



  • CAPTCHA's helpen voorkomen dat hackers en bots de registratiesystemen spammen door nepaccounts aan te maken. Als ze niet worden voorkomen, kunnen ze die accounts voor snode doeleinden gebruiken.
  • CAPTCHA's kunnen brute force-inlogaanvallen van uw website verbieden die hackers gebruiken om in te loggen met duizenden wachtwoorden.
  • CAPTCHA's kunnen voorkomen dat bots de beoordelingssectie spammen door valse opmerkingen te geven.
  • CAPTCHA's helpen bij het voorkomen van ticketinflatie, aangezien sommige mensen een groot aantal tickets kopen om door te verkopen. CAPTCHA kan zelfs valse registraties voor gratis evenementen voorkomen.
  • CAPTCHA's kunnen voorkomen dat cybercriminelen blogs spammen met onbetrouwbare opmerkingen en links naar schadelijke websites.

Er zijn nog veel meer redenen die de integratie van CAPTCHA-validatie in uw website ondersteunen. Dat kan met de volgende code.

hoe meld ik me aan bij Playstation Network

HTML CAPTCHA-code

HTML, of HyperText Markup Language, beschrijft de structuur van een webpagina. Gebruik de volgende HTML-code om uw CAPTCHA-validatieformulier te structureren:












captcha text



Refresh






Deze code bestaat hoofdzakelijk uit 7 elementen:

  • : Dit element wordt gebruikt om de kop van het CAPTCHA-formulier weer te geven.

  • : Dit element wordt gebruikt om de CAPTCHA-tekst weer te geven.
  • - Dit element wordt gebruikt om een ​​invoervak ​​te maken om de CAPTCHA in te typen.
  • : Deze knop verzendt het formulier en controleert of de CAPTCHA en de getypte tekst hetzelfde zijn of niet.
  • : Deze knop wordt gebruikt om de CAPTCHA te vernieuwen.
  • : Dit element wordt gebruikt om de uitvoer weer te geven volgens de ingevoerde tekst.
  • : Dit is het bovenliggende element dat alle andere elementen bevat.

CSS- en JavaScript-bestanden zijn gekoppeld aan deze HTML-pagina via de en elementen respectievelijk. Je moet de . toevoegen koppeling tag in de hoofd tag en script tag aan het einde van de lichaam .

U kunt deze code ook integreren met bestaande vormen van uw website.

Verwant: De HTML Essentials Cheat Sheet: Tags, attributen en meer



CSS CAPTCHA-code

CSS, of Cascading Style Sheets, wordt gebruikt om HTML-elementen op te maken. Gebruik de volgende CSS-code om de bovenstaande HTML-elementen op te maken:

@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;
}

Voeg naar wens CSS-eigenschappen toe aan of verwijder deze uit deze code. U kunt de formuliercontainer ook een elegante uitstraling geven met de CSS box-schaduw eigenschap .

JavaScript CAPTCHA-code

JavaScript wordt gebruikt om functionaliteit toe te voegen aan een anders statische webpagina. Gebruik de volgende code om volledige functionaliteit toe te voegen aan het CAPTCHA-validatieformulier:

// 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 = '';
});

Nu heb je een volledig functioneel CAPTCHA-validatieformulier! Als je de volledige code wilt zien, kun je de GitHub-repository van dit CAPTCHA-Validator-project . Na het klonen van de repository, voer je het HTML-bestand uit en je krijgt de volgende uitvoer:

telefoon maakt geen verbinding met computer

Wanneer u de juiste CAPTCHA-code invoert in het invoerveld, wordt de volgende uitvoer weergegeven:

Wanneer u een onjuiste CAPTCHA-code invoert in het invoervak, wordt de volgende uitvoer weergegeven:

Maak uw website veilig met CAPTCHA's

In het verleden hebben veel organisaties en bedrijven zware verliezen geleden, zoals datalekken, spamaanvallen, enz. als gevolg van het niet hebben van CAPTCHA-formulieren op hun websites. Het wordt ten zeerste aanbevolen om CAPTCHA aan uw website toe te voegen, omdat het een beveiligingslaag toevoegt om te voorkomen dat de website cybercriminelen krijgt.

Google lanceerde ook een gratis service genaamd 'reCAPTCHA' die helpt bij het beschermen van websites tegen spam en misbruik. CAPTCHA en reCAPTCHA lijken op elkaar, maar ze zijn niet helemaal hetzelfde. Soms voelen CAPTCHA's frustrerend en moeilijk te begrijpen voor veel gebruikers. Hoewel, er is een belangrijke reden waarom ze moeilijk zijn gemaakt.

Deel Deel Tweeten E-mail Hoe werken CAPTCHA's en waarom zijn ze zo moeilijk?

CAPTCHA's en reCAPTCHA's voorkomen spam. Hoe werken ze? En waarom vind je CAPTCHA's zo moeilijk op te lossen?

Lees volgende Gerelateerde onderwerpen
  • Programmeren
  • HTML
  • JavaScript
  • CSS
Over de auteur Yuvraj Chandra(60 artikelen gepubliceerd)

Yuvraj is een student Computerwetenschappen aan de Universiteit van Delhi, India. Hij is gepassioneerd door Full Stack Web Development. Als hij niet aan het schrijven is, onderzoekt hij de diepte van verschillende technologieën.

Meer van Yuvraj Chandra

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren