Looge CAPTCHA valideerimisvorm, kasutades HTML -i, CSS -i ja JavaScripti

Looge CAPTCHA valideerimisvorm, kasutades HTML -i, CSS -i ja JavaScripti

Tänapäeval on CAPTCHA -d veebisaidi turvalisuse lahutamatu osa. Iga päev viiakse veebis läbi miljoneid CAPTCHA teste.





Kui te pole oma veebisaidil CAPTCHA valideerimist rakendanud, võib see teile suure probleemi tekitada, seades teid rämpsposti saatjate sihtmärgiks.



Siin on kõik, mida peate teadma CAPTCHA -de kohta ja kuidas saate neid hõlpsalt oma veebisaidil HTML -i, CSS -i ja JavaScripti abil rakendada.



Mis on CAPTCHA?

CAPTCHA tähistab 'Täielikult automatiseeritud avaliku Turingi testi, et öelda arvutitele ja inimestele peale selle'. Selle termini lõid 2003. aastal Luis von Ahn, Manuel Blum, Nicholas J. Hopper ja John Langford. See on väljakutse-vastuse test, mida kasutatakse selleks, et teha kindlaks, kas kasutaja on inimene või mitte.

CAPTCHA -d lisavad veebisaitidele turvalisust, pakkudes väljakutseid, mida robotite jaoks on raske täita, kuid inimestele suhteliselt lihtne. Näiteks on kõigi piltide tuvastamine mitme pildi hulgast robotite jaoks keeruline, kuid inimese silmade jaoks piisavalt lihtne.



CAPTCHA idee pärineb Turingi testist. Turingi test on meetod, mille abil saab kontrollida, kas masin suudab mõelda nagu inimene või mitte. Huvitaval kombel võib CAPTCHA testi nimetada „pöördturingi testiks”, kuna sel juhul loob arvuti testi, mis esitab inimestele väljakutse.

Miks vajab teie veebisait CAPTCHA valideerimist?

CAPTCHA -sid kasutatakse peamiselt selleks, et robotid ei esitaks automaatselt rämpsposti ja muu kahjuliku sisuga vorme. Isegi sellised ettevõtted nagu Google kasutavad seda oma süsteemi rämpsposti rünnakute vältimiseks. Siin on mõned põhjused, miks teie veebisait saab CAPTCHA valideerimisest kasu:



  • CAPTCHA -d aitavad vältida häkkerite ja robotite registreerimissüsteemide rämpsposti saatmist, luues võltskontosid. Kui neid ei takistata, saavad nad neid kontosid kasutada pahatahtlikel eesmärkidel.
  • CAPTCHA-d võivad keelata jõhkra jõuga sisselogimisrünnakud teie veebisaidilt, mida häkkerid kasutavad tuhandete paroolide abil sisselogimiseks.
  • CAPTCHA -d võivad valesid kommentaare andes piirata robotite ülevaatamise jaotises rämpsposti saatmist.
  • CAPTCHA aitab vältida piletite inflatsiooni, kuna mõned inimesed ostavad edasimüümiseks suure hulga pileteid. CAPTCHA võib isegi takistada tasuta üritustele vale registreerimist.
  • CAPTCHA -d võivad piirata küberkuritegude rämpsposti ajaveebi rämpspostiga, lisades häbiväärseid kommentaare ja linke kahjulikele veebisaitidele.

On palju muid põhjuseid, mis toetavad CAPTCHA valideerimise integreerimist oma veebisaidile. Seda saate teha järgmise koodiga.

kuidas tõmblema emotsioone

HTML CAPTCHA kood

HTML ehk HyperText Markup Language kirjeldab veebilehe ülesehitust. Kasutage oma CAPTCHA valideerimisvormi struktureerimiseks järgmist HTML -koodi:












captcha text



Refresh






See kood koosneb peamiselt seitsmest elemendist:

  • : Seda elementi kasutatakse vormi CAPTCHA pealkirja kuvamiseks.

  • : Seda elementi kasutatakse CAPTCHA teksti kuvamiseks.
  • - Seda elementi kasutatakse CAPTCHA sisestamiseks sisendkasti loomiseks.
  • : See nupp esitab vormi ja kontrollib, kas CAPTCHA ja trükitud tekst on samad või mitte.
  • : Seda nuppu kasutatakse CAPTCHA värskendamiseks.
  • : Seda elementi kasutatakse väljundi kuvamiseks vastavalt sisestatud tekstile.
  • : See on põhielement, mis sisaldab kõiki teisi elemente.

CSS- ja JavaScripti failid on selle HTML -lehega lingitud ja elemente vastavalt. Peate lisama link silt sees pea silt ja skript sildi lõpus keha .

Samuti saate selle koodi integreerida oma veebisaidi olemasolevate vormidega.

Seotud: HTML Essentialsi petuleht: sildid, atribuudid ja palju muud

CSS CAPTCHA kood

CSS -i ehk kaskaadlaadilehti kasutatakse HTML -elementide stiilimiseks. Ülaltoodud HTML -elementide stiilimiseks kasutage järgmist CSS -koodi:

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

Lisage või eemaldage sellest koodist CSS -i atribuudid vastavalt oma eelistustele. Samuti saate vormikonteinerile elegantse välimuse anda, kasutades CSS box-shadow atribuut .

JavaScripti CAPTCHA kood

JavaScript kasutatakse funktsionaalsuse lisamiseks muidu staatilisele veebilehele. CAPTCHA valideerimisvormi täieliku funktsionaalsuse lisamiseks kasutage järgmist koodi:

// 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üüd on teil täielikult toimiv CAPTCHA valideerimisvorm! Kui soovite kogu koodi vaadata, saate selle kloonida Selle CAPTCHA-valideerimisprojekti GitHubi hoidla . Pärast hoidla kloonimist käivitage HTML -fail ja saate järgmise väljundi:

parim sait mänguarvuti ehitamiseks

Kui sisestate sisendkasti õige CAPTCHA -koodi, kuvatakse järgmine väljund:

Kui sisestate sisendkasti vale CAPTCHA -koodi, kuvatakse järgmine väljund:

Tehke oma veebisait turvaliseks CAPTCHA -de abil

Varem on paljud organisatsioonid ja ettevõtted kandnud suuri kahjusid, näiteks andmete rikkumise, rämpsposti rünnakute jms tõttu, kuna nende veebisaitidel pole CAPTCHA vorme. On väga soovitatav lisada oma veebisaidile CAPTCHA, kuna see lisab turvakihi, mis takistab veebisaiti küberkurjategijate eest.

Google käivitas ka tasuta teenuse nimega reCAPTCHA, mis aitab kaitsta veebisaite rämpsposti ja väärkohtlemise eest. CAPTCHA ja reCAPTCHA tunduvad sarnased, kuid need pole päris sama asi. Mõnikord tunduvad CAPTCHA -d paljude kasutajate jaoks masendavad ja raskesti mõistetavad. Kuigi on raske põhjus, miks nad on keerulised.

Jaga Jaga Piiksuma E -post Kuidas CAPTCHA -d töötavad ja miks need nii rasked on?

CAPTCHA -d ja reCAPTCHA -d takistavad rämpsposti. Kuidas need toimivad? Ja miks leiate, et CAPTCHA -sid on nii raske lahendada?

Loe edasi Seotud teemad
  • Programmeerimine
  • HTML
  • JavaScript
  • CSS
Autori kohta Yuvraj Chandra(60 artiklit avaldatud)

Yuvraj on arvutiteaduse bakalaureuseõppe üliõpilane Indias Delhi ülikoolis. Ta on kirglik Full Stacki veebiarenduse vastu. Kui ta ei kirjuta, uurib ta erinevate tehnoloogiate sügavust.

Veel Yuvraj Chandrast

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin