Opret en CAPTCHA -valideringsformular ved hjælp af HTML, CSS og JavaScript

I dag er CAPTCHA'er en integreret del af hjemmesidesikkerhed. Millioner af CAPTCHA -tests gennemføres online hver dag.

Hvis du ikke har implementeret CAPTCHA -validering på dit websted, kan det skabe et stort problem for dig og oprette dig som et mål for spammere.

Her er alt hvad du behøver at vide om CAPTCHA'er, og hvordan du nemt kan implementere dem på dit websted ved hjælp af HTML, CSS og JavaScript.

Hvad er CAPTCHA?

CAPTCHA står for 'Helt automatiseret offentlig Turing -test for at fortælle computere og mennesker fra hinanden.' Dette udtryk blev opfundet i 2003 af Luis von Ahn, Manuel Blum, Nicholas J. Hopper og John Langford. Det er en type udfordring-svar-test, der bruges til at afgøre, om brugeren er menneske eller ej.

CAPTCHA'er tilføjer sikkerhed til websteder ved at levere udfordringer, der er vanskelige for robotter at udføre, men relativt lette for mennesker. For eksempel er det svært for robotter at identificere alle billederne af en bil fra et sæt med flere billeder, men simpelt nok for menneskelige øjne.

Ideen med CAPTCHA stammer fra Turing -testen. En Turing -test er en metode til at teste, om en maskine kan tænke som et menneske eller ej. Interessant nok kan en CAPTCHA -test kaldes en 'reverse Turing Test', da computeren i dette tilfælde skaber testen, der udfordrer mennesker.

Hvorfor har dit websted brug for CAPTCHA -validering?

CAPTCHA'er bruges hovedsageligt til at forhindre bots i automatisk at indsende formularer med spam og andet skadeligt indhold. Selv virksomheder som Google bruger det til at forhindre deres system i at angribe spam. Her er nogle af grundene til, at dit websted kan drage fordel af CAPTCHA -validering:

CAPTCHA'er hjælper med at forhindre hackere og bots i at spamme registreringssystemerne ved at oprette falske konti. Hvis de ikke forhindres, kan de bruge disse konti til uhyggelige formål.
CAPTCHA'er kan forbyde brute force-log-in-angreb fra dit websted, som hackere bruger til at prøve at logge ind ved hjælp af tusindvis af adgangskoder.
CAPTCHA'er kan begrænse bots fra at spamme gennemgangssektionen ved at give falske kommentarer.
CAPTCHA'er hjælper med at forhindre billetinflation, da nogle mennesker køber et stort antal billetter til videresalg. CAPTCHA kan endda forhindre falske registreringer til gratis begivenheder.
CAPTCHA'er kan begrænse cyber -skurke fra at spamme blogs med dodgy kommentarer og links til skadelige websteder.

Der er mange flere grunde, der understøtter integration af CAPTCHA -validering på dit websted. Du kan gøre det med følgende kode.

ingen internet sikret fix windows 10

HTML CAPTCHA -kode

HTML eller HyperText Markup Language beskriver strukturen på en webside. Brug følgende HTML -kode til at strukturere din CAPTCHA -valideringsformular:

  
  
  
  
  
  
  
  
  
 captcha text  
  
  
  
 Refresh

Denne kode består hovedsageligt af 7 elementer:

: Dette element bruges til at vise overskriften på CAPTCHA -formularen.
: Dette element bruges til at vise CAPTCHA -teksten.
- Dette element bruges til at oprette en inputboks til at skrive CAPTCHA.
: Denne knap sender formularen og kontrollerer, om CAPTCHA og den indtastede tekst er ens eller ej.
: Denne knap bruges til at opdatere CAPTCHA.
: Dette element bruges til at vise output i henhold til den indtastede tekst.
: Dette er det overordnede element, der indeholder alle de andre elementer.

CSS- og JavaScript -filer er knyttet til denne HTML -side via og elementer henholdsvis. Du skal tilføje link mærke inde i hoved tag og manuskript tag i slutningen af legeme .

Du kan også integrere denne kode med eksisterende former for dit websted.

Relaterede: HTML Essentials Cheat Sheet: Tags, attributter og mere

CSS CAPTCHA -kode

CSS eller Cascading Style Sheets bruges til at style HTML -elementer. Brug følgende CSS -kode til at style ovenstående HTML -elementer:

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

Tilføj eller fjern CSS -egenskaber fra denne kode i henhold til dine præferencer. Du kan også give et elegant udseende til formbeholderen ved hjælp af CSS box-shadow egenskab .

JavaScript CAPTCHA -kode

JavaScript bruges til at tilføje funktionalitet til en ellers statisk webside. Brug følgende kode til at tilføje komplet funktionalitet til CAPTCHA -valideringsformularen:

// 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 har du en fuldt funktionel CAPTCHA -valideringsformular! Hvis du vil se på den komplette kode, kan du klone GitHub-depot af dette CAPTCHA-Validator-projekt . Efter kloning af depotet skal du eksekvere HTML -filen, og du får følgende output:

websteder at gå på, når de keder sig

Når du indtaster den korrekte CAPTCHA -kode i inputboksen, vises følgende output:

Når du indtaster en forkert CAPTCHA -kode i inputboksen, vises følgende output:

Gør dit websted sikkert med CAPTCHA'er

Tidligere har mange organisationer og virksomheder lidt store tab som databrud, spamangreb osv. Som følge af ikke at have CAPTCHA -formularer på deres websteder. Det anbefales stærkt at tilføje CAPTCHA til dit websted, da det tilføjer et sikkerhedslag for at forhindre webstedet i at komme fra cyberkriminelle.

Google lancerede også en gratis service kaldet 'reCAPTCHA', der hjælper med at beskytte websteder mod spam og misbrug. CAPTCHA og reCAPTCHA virker ens, men de er ikke helt det samme. Nogle gange føles CAPTCHA'er frustrerende og vanskelige at forstå for mange brugere. Selvom der er en vigtig grund til, hvorfor de bliver svære.

Del Del Tweet E -mail Hvordan fungerer CAPTCHA'er, og hvorfor er de så vanskelige?

CAPTCHA og reCAPTCHA forhindrer spam. Hvordan fungerer de? Og hvorfor synes du CAPTCHA er så svære at løse?

Læs Næste Relaterede emner

Programmering
HTML
JavaScript
CSS

Om forfatteren Yuvraj Chandra(60 artikler udgivet)

Yuvraj er en datalogi bachelorstuderende ved University of Delhi, Indien. Han brænder for Full Stack Web Development. Når han ikke skriver, undersøger han dybden af forskellige teknologier.

Mere fra Yuvraj Chandra

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere