Sukurkite CAPTCHA patvirtinimo formą naudodami HTML, CSS ir „JavaScript“

Sukurkite CAPTCHA patvirtinimo formą naudodami HTML, CSS ir „JavaScript“

Šiuo metu CAPTCHA yra neatskiriama svetainės saugumo dalis. Kasdien internete atliekami milijonai CAPTCHA testų.





Jei neįdiegėte CAPTCHA patvirtinimo savo svetainėje, tai gali sukelti jums didelių problemų, nes jūs būsite šlamšto siuntėjų taikinys.



Čia yra viskas, ką reikia žinoti apie CAPTCHA ir kaip galite lengvai juos įdiegti savo svetainėje naudodami HTML, CSS ir „JavaScript“.



Kas yra CAPTCHA?

CAPTCHA reiškia „visiškai automatizuotas viešasis Turingo testas, skirtas kompiuteriams ir žmonėms atskirti“. Šį terminą 2003 metais sugalvojo Luisas von Ahnas, Manuelis Blumas, Nicholas J. Hopperis ir Johnas Langfordas. Tai tam tikro tipo iššūkio-atsako testas, naudojamas nustatyti, ar vartotojas yra žmogus, ar ne.

CAPTCHA papildo svetainių saugumą teikdamos iššūkius, kuriuos robotai sunkiai atlieka, tačiau yra gana lengvi žmonėms. Pavyzdžiui, robotams sunku nustatyti visus automobilio atvaizdus iš kelių vaizdų rinkinio, bet pakankamai paprasta žmogaus akims.



CAPTCHA idėja kilo iš Tiuringo testo. Tiuringo testas - tai metodas, leidžiantis patikrinti, ar mašina gali mąstyti kaip žmogus, ar ne. Įdomu tai, kad CAPTCHA testą galima pavadinti „atvirkštinio Turingo testu“, nes šiuo atveju kompiuteris sukuria testą, kuris kelia iššūkį žmonėms.

Kodėl jūsų svetainei reikia CAPTCHA patvirtinimo?

CAPTCHA dažniausiai naudojami siekiant užkirsti kelią robotams automatiškai pateikti formas su šlamštu ir kitu kenksmingu turiniu. Net tokios įmonės kaip „Google“ naudoja tai, kad apsaugotų savo sistemą nuo atakų. Štai keletas priežasčių, kodėl jūsų svetainė turi naudos iš CAPTCHA patvirtinimo:



  • CAPTCHAs padeda užkirsti kelią įsilaužėliams ir robotams, kad jie suklastotų registracijos sistemas, sukurdami netikras paskyras. Jei jiems neužkertamas kelias, jie gali naudoti tas paskyras piktybiniais tikslais.
  • CAPTCHA gali uždrausti žiaurios jėgos prisijungimo priepuolius iš jūsų svetainės, kuriuos įsilaužėliai naudoja bandydami prisijungti naudodami tūkstančius slaptažodžių.
  • CAPTCHA gali apriboti robotų siuntimą į šlamštą peržiūros skyriuje, pateikdami melagingus komentarus.
  • CAPTCHA padeda išvengti bilietų infliacijos, nes kai kurie žmonės perka daug bilietų perparduoti. CAPTCHA netgi gali užkirsti kelią klaidingoms nemokamų įvykių registracijoms.
  • CAPTCHA gali apriboti elektroninius sukčius, kad jie negalėtų siūlyti šlamšto tinklaraščiuose, kuriuose yra nemalonių komentarų ir nuorodų į kenksmingas svetaines.

Yra daug daugiau priežasčių, kurios palaiko CAPTCHA patvirtinimo integravimą į jūsų svetainę. Tai galite padaryti naudodami šį kodą.

pridėti paveikslui kraštinę

HTML CAPTCHA kodas

HTML arba „HyperText Markup Language“ apibūdina tinklalapio struktūrą. CAPTCHA patvirtinimo formos struktūrai naudokite šį HTML kodą:












captcha text



Refresh






Šį kodą daugiausia sudaro 7 elementai:

  • : Šis elementas naudojamas CAPTCHA formos antraštei rodyti.

  • : Šis elementas naudojamas rodyti CAPTCHA tekstą.
  • - Šis elementas naudojamas kuriant įvesties langelį CAPTCHA įvesti.
  • : Šis mygtukas pateikia formą ir patikrina, ar CAPTCHA ir įvestas tekstas sutampa.
  • : Šis mygtukas naudojamas atnaujinti CAPTCHA.
  • : Šis elementas naudojamas rodyti išvestį pagal įvestą tekstą.
  • : Tai pirminis elementas, kuriame yra visi kiti elementai.

CSS ir „JavaScript“ failai yra susieti su šiuo HTML puslapiu per ir atitinkamai elementai. Turite pridėti nuoroda žyma viduje galva žyma ir scenarijus pabaigoje kūnas .

Taip pat galite integruoti šį kodą į esamas savo svetainės formas.

Susijęs: „HTML Essentials“ apgaulės lapas: žymos, atributai ir dar daugiau

CSS CAPTCHA kodas

CSS arba kaskadiniai stiliaus lapai naudojami HTML elementams formuoti. Naudokite šį CSS kodą, kad stilizuotumėte aukščiau pateiktus HTML elementus:

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

Pridėkite arba pašalinkite CSS ypatybes iš šio kodo pagal savo pageidavimus. Taip pat galite elegantiškai atrodyti formos talpykloje naudodami „CSS box-shadow“ ypatybė .

„JavaScript“ CAPTCHA kodas

„JavaScript“ yra naudojamas norint pridėti funkcionalumą kitu atveju statiškam tinklalapiui. Naudokite šį kodą, kad pridėtumėte visas CAPTCHA patvirtinimo formos funkcijas:

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

Dabar turite visiškai veikiančią CAPTCHA patvirtinimo formą! Jei norite peržiūrėti visą kodą, galite jį klonuoti Šio „CAPTCHA-Validator“ projekto „GitHub“ saugykla . Klonavę saugyklą, paleiskite HTML failą ir gausite tokią išvestį:

kaip rasti ip adresą „Windows 10“ naudojant komandų eilutę

Kai įvesties lauke įvesite teisingą CAPTCHA kodą, bus rodomas toks rezultatas:

Kai įvesties laukelyje įvesite neteisingą CAPTCHA kodą, bus rodomas toks rezultatas:

Apsaugokite savo svetainę naudodami CAPTCHA

Anksčiau daugelis organizacijų ir įmonių patyrė didelių nuostolių, pvz., Duomenų pažeidimų, šlamšto atakų ir pan. Dėl to, kad jų svetainėse nebuvo CAPTCHA formų. Labai rekomenduojama į svetainę įtraukti CAPTCHA, nes ji prideda apsauginį sluoksnį, kad svetainė nebūtų kibernetinių nusikaltėlių.

„Google“ taip pat pristatė nemokamą paslaugą „reCAPTCHA“, kuri padeda apsaugoti svetaines nuo šlamšto ir piktnaudžiavimo. CAPTCHA ir reCAPTCHA atrodo panašūs, tačiau jie nėra visiškai tas pats. Kartais CAPTCHA daugeliui vartotojų atrodo varginantys ir sunkiai suprantami. Nors yra svarbi priežastis, kodėl jie yra sunkūs.

Dalintis Dalintis „Tweet“ Paštu Kaip veikia CAPTCHA ir kodėl jie tokie sunkūs?

CAPTCHA ir reCAPTCHA apsaugo nuo šlamšto. Kaip jie veikia? Ir kodėl jums atrodo, kad CAPTCHA taip sunku išspręsti?

Skaityti toliau Susijusios temos
  • Programavimas
  • HTML
  • „JavaScript“
  • CSS
Apie autorių Yuvraj Chandra(Paskelbti 60 straipsnių)

Yuvraj yra kompiuterių mokslo bakalauro studentas Delyje, Indijoje. Jis aistringas „Full Stack“ žiniatinklio kūrimui. Kai jis nerašo, jis tyrinėja skirtingų technologijų gylį.

Daugiau iš Yuvraj Chandra

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia