Lag et CAPTCHA -valideringsskjema ved hjelp av HTML, CSS og JavaScript

I dag er CAPTCHA en integrert del av nettstedssikkerhet. Millioner av CAPTCHA -tester gjennomføres online hver dag.

Hvis du ikke har implementert CAPTCHA -validering på nettstedet ditt, kan det skape et stort problem for deg og sette deg opp som et mål for spammere.

Her er alt du trenger å vite om CAPTCHAer og hvordan du enkelt kan implementere dem på nettstedet ditt ved hjelp av HTML, CSS og JavaScript.

Hva er CAPTCHA?

CAPTCHA står for 'Fullstendig automatisert offentlig Turing -test for å fortelle datamaskiner og mennesker.' Dette begrepet ble laget i 2003 av Luis von Ahn, Manuel Blum, Nicholas J. Hopper og John Langford. Det er en type utfordring-respons-test som brukes til å avgjøre om brukeren er menneskelig eller ikke.

CAPTCHA -er gir sikkerhet til nettsteder ved å tilby utfordringer som er vanskelige for roboter å utføre, men relativt enkle for mennesker. For eksempel er det vanskelig for roboter å identifisere alle bildene av en bil fra et sett med flere bilder, men enkelt nok for menneskelige øyne.

Ideen om CAPTCHA stammer fra Turing -testen. En Turing -test er en metode for å teste om en maskin kan tenke som et menneske eller ikke. Interessant nok kan en CAPTCHA -test kalles en 'reverse Turing Test' siden datamaskinen i dette tilfellet lager testen som utfordrer mennesker.

Hvorfor trenger nettstedet ditt CAPTCHA -validering?

CAPTCHA brukes hovedsakelig for å forhindre at roboter automatisk sender inn skjemaer med spam og annet skadelig innhold. Til og med selskaper som Google bruker det til å forhindre at systemet angriper spam. Her er noen av grunnene til at nettstedet ditt kan dra fordel av CAPTCHA -validering:

CAPTCHAs bidrar til å forhindre hackere og roboter i å spamme registreringssystemene ved å opprette falske kontoer. Hvis de ikke er forhindret, kan de bruke disse kontoene til uærlige formål.
CAPTCHAs kan forby brute force-påloggingsangrep fra nettstedet ditt, som hackere bruker for å prøve å logge inn med tusenvis av passord.
CAPTCHA -er kan begrense roboter fra å spamme anmeldelsesdelen ved å gi falske kommentarer.
CAPTCHAs hjelper til med å forhindre billettinflasjon ettersom noen kjøper et stort antall billetter for videresalg. CAPTCHA kan til og med forhindre falske registreringer til gratis arrangementer.
CAPTCHA -er kan begrense cyber -skurkene fra å spamme blogger med dodgy kommentarer og lenker til skadelige nettsteder.

Det er mange flere grunner som støtter integrering av CAPTCHA -validering på nettstedet ditt. Du kan gjøre det med følgende kode.

windows 10 fortsetter å miste wifi -tilkoblingen

HTML CAPTCHA -kode

HTML, eller HyperText Markup Language, beskriver strukturen til en webside. Bruk følgende HTML -kode for å strukturere CAPTCHA -valideringsskjemaet:

  
  
  
  
  
  
  
  
  
 captcha text  
  
  
  
 Refresh

Denne koden består hovedsakelig av 7 elementer:

: Dette elementet brukes til å vise overskriften til CAPTCHA -skjemaet.
: Dette elementet brukes til å vise CAPTCHA -teksten.
- Dette elementet brukes til å lage en inndataboks for å skrive CAPTCHA.
: Denne knappen sender inn skjemaet og kontrollerer om CAPTCHA og den skrevne teksten er den samme eller ikke.
: Denne knappen brukes til å oppdatere CAPTCHA.
: Dette elementet brukes til å vise utdataene i henhold til den angitte teksten.
: Dette er det overordnede elementet som inneholder alle de andre elementene.

CSS- og JavaScript -filer er knyttet til denne HTML -siden gjennom og elementer henholdsvis. Du må legge til lenke tag inne i hode tag og manus tag på slutten av kropp .

Du kan også integrere denne koden med eksisterende former for nettstedet ditt.

I slekt: HTML Essentials Cheat Sheet: Merker, attributter og mer

CSS CAPTCHA -kode

CSS, eller Cascading Style Sheets, brukes til å style HTML -elementer. Bruk følgende CSS -kode for å style HTML -elementene ovenfor:

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

Legg til eller fjern CSS -egenskaper fra denne koden i henhold til dine preferanser. Du kan også gi et elegant utseende til formbeholderen ved hjelp av CSS-skyggeegenskap .

JavaScript CAPTCHA -kode

JavaScript brukes til å legge til funksjonalitet på en ellers statisk webside. Bruk følgende kode for å legge til fullstendig funksjonalitet i CAPTCHA -valideringsskjemaet:

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

Nå har du et fullt funksjonelt CAPTCHA -valideringsskjema! Hvis du vil se på hele koden, kan du klone GitHub-depot for dette CAPTCHA-Validator-prosjektet . Etter å ha klonet depotet, kjør HTML -filen, og du får følgende utdata:

hvordan overføre filer til virtualbox

Når du skriver inn riktig CAPTCHA -kode i inndataboksen, vises følgende utgang:

Når du skriver inn feil CAPTCHA -kode i inndataboksen, vises følgende utgang:

Gjør nettstedet ditt sikkert med CAPTCHA

Tidligere har mange organisasjoner og bedrifter lidd store tap som databrudd, spamangrep, etc. som følge av at de ikke har CAPTCHA -skjemaer på nettstedene sine. Det anbefales på det sterkeste å legge til CAPTCHA på nettstedet ditt, ettersom det legger til et sikkerhetslag for å forhindre nettstedet fra cyberkriminelle.

Google lanserte også en gratis tjeneste kalt 'reCAPTCHA' som hjelper til med å beskytte nettsteder mot spam og misbruk. CAPTCHA og reCAPTCHA virker like, men de er ikke helt det samme. Noen ganger føles CAPTCHA frustrerende og vanskelig å forstå for mange brukere. Selv om det er en viktig grunn til at de er vanskelig.

Dele Dele kvitring E -post Hvordan fungerer CAPTCHAer og hvorfor er de så vanskelige?

CAPTCHA og reCAPTCHA forhindrer spam. Hvordan fungerer de? Og hvorfor synes du CAPTCHA er så tøffe å løse?

Les neste Relaterte temaer

Programmering
HTML
JavaScript
CSS

Om forfatteren Yuvraj Chandra(60 artikler publisert)

Yuvraj er en informatikkstudent ved University of Delhi, India. Han brenner for Full Stack webutvikling. Når han ikke skriver, utforsker han dybden i forskjellige teknologier.

Mer fra Yuvraj Chandra

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere