Šiais laikais CAPTCHA yra neatskiriama svetainės saugumo dalis. Kiekvieną dieną internetu atliekami milijonai CAPTCHA testų.

Jei neįdiegėte CAPTCHA patvirtinimo savo svetainėje, tai gali sukelti jums didelę problemą, nustatydami jus kaip tikslą šlamšto siuntėjams.

Č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šojo Tiuringo testas, skirtas atskirti kompiuterius ir žmones“. Šią sąvoką 2003 m. Sugalvojo Luisas von Ahnas, Manuelis Blumas, Nicholas J. Bunkeris ir Johnas Langfordas. Tai yra atsakymo į iššūkį testo tipas, naudojamas norint nustatyti, ar vartotojas yra žmogus, ar ne.

„CAPTCHA“ prideda svetainių saugumą teikdami iššūkius, kuriuos robotams sunku atlikti, bet žmonėms palyginti lengva. Pavyzdžiui, robotams sunku nustatyti visus automobilio vaizdus iš kelių vaizdų rinkinio, bet žmogaus akims - pakankamai paprasta.

CAPTCHA idėja kilo iš Tiuringo testo. Tiuringo testas yra metodas patikrinti, ar mašina gali mąstyti kaip žmogus, ar ne. Įdomu tai, kad CAPTCHA testą galima pavadinti „atvirkštiniu Turingo testu“, nes šiuo atveju kompiuteris sukuria testą, kuris iššaukia žmones.

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

CAPTCHA dažniausiai naudojami siekiant užkirsti kelią robotams automatiškai pateikti formas su šlamštu ir kitu žalingu turiniu. Net tokios kompanijos, kaip „Google“, naudoja ją tam, kad išvengtų šlamšto atakų. Štai keletas priežasčių, kodėl jūsų svetainei naudinga patvirtinti CAPTCHA:

• CAPTCHA padeda užkirsti kelią įsilaužėliams ir robotams nuo šlamšto registracijos sistemose, sukurdami padirbtas paskyras. Jei jiems nebus užkirstas kelias, jie gali naudoti tas paskyras kenksmingiems tikslams.
• CAPTCHA gali uždrausti grubus prisijungimo iš jūsų svetainės išpuolius, kuriuos įsilaužėliai bando prisijungti naudodami tūkstančius slaptažodžių.
• CAPTCHA gali apriboti robotus nuo šlamšto peržiūros skiltyje, pateikdami melagingus komentarus.
• „CAPTCHA“ padeda išvengti bilietų infliacijos, nes kai kurie žmonės perka daug bilietų perparduoti. CAPTCHA netgi gali užkirsti kelią neteisingai registruotis į nemokamus renginius.
• „CAPTCHA“ gali apriboti kibernetinius nusikaltėlius nuo šlamšto tinklaraščiuose su vengiančiais komentarais ir nuorodomis į kenksmingas svetaines.

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

HTML CAPTCHA kodas

HTML arba „HyperText Markup Language“ apibūdina tinklalapio struktūrą. Naudokite šį HTML kodą, kad sukurtumėte CAPTCHA patvirtinimo formą:

„Captcha Validator“, naudojant HTML, CSS ir „JavaScript“



captcha tekstas




Atnaujinti

Šį kodą daugiausia sudaro 7 elementai:

• : Šis elementas naudojamas CAPTCHA formos antraštei rodyti.
• : Šis elementas naudojamas CAPTCHA tekstui rodyti.
• - Šis elementas naudojamas kuriant įvesties laukelį, kad būtų įvesta CAPTCHA.
• : Šis mygtukas pateikia formą ir patikrina, ar CAPTCHA ir įvestas tekstas yra vienodi.
• : Šis mygtukas naudojamas atnaujinti CAPTCHA.
• : Šis elementas naudojamas rodyti išvestį pagal įvestą tekstą.
• : Tai yra pagrindinis elementas, kuriame yra visi kiti elementai.

CSS ir „JavaScript“ failai yra susieti su šiuo HTML puslapiu per ir elementai. Turite pridėti nuoroda žymos viduje galva žyma ir scenarijus žymos 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 „Cascading Style Sheets“ yra naudojamas HTML elementų stiliui kurti. Norėdami sukurti anksčiau nurodytų HTML elementų stilių, naudokite šį CSS kodą:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
kūnas {
fono spalva: # 232331;
šriftų šeima: 'Roboto', sans-serif;
}
#captchaBackground {
aukštis: 200 taškų;
plotis: 250px;
fono spalva: # 2d3748;
ekranas: lankstus;
lygiuoti daiktai: centras;
pateisinti-turinys: centras;
lankstumo kryptis: kolona;
}
#captchaHeading {
spalva: balta;
}
#captcha {
paraštė-apačia: 1em;
šrifto dydis: 30 taškų;
tarpai tarp raidžių: 3px;
spalva: # 08e5ff;
}
.center {
ekranas: lankstus;
lankstumo kryptis: kolona;
lygiuoti daiktai: centras;
}
#submitButton {
paraštė-viršus: 2em;
paraštė-apačia: 2em;
fono spalva: # 08e5ff;
kraštinė: 0 taškų;
šrifto svoris: paryškintas;
}
#refreshButton {
fono spalva: # 08e5ff;
kraštinė: 0 taškų;
šrifto svoris: paryškintas;
}
#textBox {
aukštis: 25px;
}
.incorrectCaptcha {
spalva: # FF0000;
}
.correctCaptcha {
spalva: # 7FFF00;
}

Pridėkite arba pašalinkite CSS ypatybes iš šio kodo pagal savo pageidavimus. Taip pat galite suteikti elegantišką formos konteinerio išvaizdą naudodami CSS langelio šešėlio ypatybė.

„JavaScript“ CAPTCHA kodas

„JavaScript“ yra naudojamas funkcionalumui pridėti prie kitaip statinio tinklalapio. Norėdami pridėti pilną funkcionalumą CAPTCHA patvirtinimo formoje, naudokite šį kodą:

// document.querySelector () naudojamas elementui iš dokumento pasirinkti naudojant jo ID
tegul captchaText = document.querySelector ('# captcha');
tegul userText = document.querySelector ('# textBox');
tegul PateiktiButton = document.querySelector ('# pateiktiButton');
tegul išvestis = document.querySelector ('# output');
tegul refreshButton = document.querySelector ('# refreshButton');
// alphaNums yra simboliai, su kuriais norite sukurti CAPTCHA
tegul alfaNums = ['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'];
tegul tuščiasArr = [];
// Ši kilpa sukuria atsitiktinę 7 simbolių eilutę naudodama alphaNums
// Toliau ši eilutė rodoma kaip CAPTCHA
už (tegul i = 1; i <= 7; i ++) {
blankArr.push (alfaNums [Math.floor (Math.random () * alfaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Šis įvykių klausytojas yra stimuliuojamas, kai tik vartotojas paspaudžia mygtuką „Enter“
// "Teisingai!" arba pranešimas „Neteisinga, bandykite dar kartą“ yra
// rodomas patvirtinus įvesties tekstą naudojant CAPTCHA
userText.addEventListener ('klavišas', funkcija (e) {
// Rakto kodas „Enter“ mygtuko reikšmė yra 13
jei (el. rakto kodas 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Teisingai!";
} Kitas {
output.classList.add ("correctCaptcha");
output.innerHTML = "Neteisinga, bandykite dar kartą";
}
}
});
// Šis įvykių klausytojas skatinamas, kai tik vartotojas paspaudžia mygtuką „Pateikti“
// "Teisingai!" arba pranešimas „Neteisinga, bandykite dar kartą“ yra
// rodomas patvirtinus įvesties tekstą naudojant CAPTCHA
pateiktiButton.addEventListener ('spustelėkite', funkcija () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Teisingai!";
} Kitas {
output.classList.add ("correctCaptcha");
output.innerHTML = "Neteisinga, bandykite dar kartą";
}
});
// Šis įvykių klausytojas stimuliuojamas, kai tik vartotojas paspaudžia mygtuką „Atnaujinti“
// Naujas atsitiktinis CAPTCHA sugeneruojamas ir rodomas vartotojui spustelėjus mygtuką „Atnaujinti“
refreshButton.addEventListener ('spustelėkite', funkcija () {
userText.value = "";
tegul refreshArr = [];
už (tegul j = 1; j <= 7; j ++) {
refreshArr.push (alfaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

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

Kai įvesties laukelyje įvesite teisingą CAPTCHA kodą, bus rodoma ši išvestis:

Kai įvesties laukelyje įvesite neteisingą CAPTCHA kodą, bus rodoma ši išvestis:

Padarykite savo svetainę saugią naudodami CAPTCHA

Anksčiau daugelis organizacijų ir įmonių patyrė didelių nuostolių, pvz., Duomenų pažeidimai, šlamšto atakos ir kt. dėl to, kad jų interneto svetainėse nėra CAPTCHA formų. Labai rekomenduojama pridėti CAPTCHA į savo svetainę, nes ji prideda saugos sluoksnį, kad svetainė nebūtų kibernetinių nusikaltėlių.

„Google“ taip pat pristatė nemokamą paslaugą, vadinamą „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 jaučiasi apmaudu ir sunkiai suprantama daugeliui vartotojų. Nors yra svarbi priežastis, kodėl jiems sunku.

Kaip CAPTCHA veikia ir kodėl jie tokie sunkūs?

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

Skaitykite toliau

Apie autorių