Mūsdienās CAPTCHA ir neatņemama vietņu drošības sastāvdaļa. Katru dienu tiešsaistē tiek aizpildīti miljoniem CAPTCHA testu.

Ja neesat savā vietnē ieviesis CAPTCHA validāciju, tas var radīt jums lielas problēmas, nosakot jūs kā mēstuļu sūtītāju mērķi.

Šeit ir viss, kas jums jāzina par CAPTCHA un kā tos ērti ieviest savā vietnē, izmantojot HTML, CSS un JavaScript.

Kas ir CAPTCHA?

CAPTCHA nozīmē "Pilnīgi automatizēts publiskais Turinga tests, lai informētu datorus un cilvēkus atsevišķi". Šo terminu 2003. gadā izdomāja Luiss fon Ahns, Manuels Blūms, Nikolass Dž. Hopers un Džons Langfords. Tas ir izaicinājuma un reakcijas testa veids, ko izmanto, lai noteiktu, vai lietotājs ir cilvēks.

CAPTCHA papildina vietņu drošību, piedāvājot problēmas, kuras robotiem ir grūti izpildīt, bet salīdzinoši viegli cilvēkiem. Piemēram, robotiem ir grūti identificēt visus automašīnas attēlus no vairāku attēlu kopas, bet cilvēka acīm tas ir pietiekami vienkārši.

CAPTCHA ideja rodas no Turingas testa. Tjūringa tests ir metode, kā pārbaudīt, vai mašīna var domāt kā cilvēks vai nē. Interesanti, ka CAPTCHA testu var saukt par "reverso Turinga testu", jo šajā gadījumā dators izveido testu, kas izaicina cilvēkus.

Kāpēc jūsu vietnei nepieciešama CAPTCHA validācija?

CAPTCHA galvenokārt tiek izmantoti, lai neļautu robotiem automātiski iesniegt veidlapas ar surogātpastu un citu kaitīgu saturu. Pat tādi uzņēmumi kā Google to izmanto, lai novērstu to, ka viņu sistēmā notiek surogātpasta uzbrukumi. Šeit ir daži iemesli, kāpēc jūsu vietne gūst labumu no CAPTCHA validācijas:

• CAPTCHA palīdz novērst hakeriem un robotprogrammām nevēlamu surogātpastu reģistrācijas sistēmās, izveidojot viltus kontus. Ja viņiem netraucē, viņi šos kontus var izmantot ļaunprātīgiem mērķiem.
• CAPTCHA var aizliegt brutālu piespiedu pieteikšanās uzbrukumus no jūsu vietnes, kurus hakeri izmanto, lai mēģinātu pieteikties, izmantojot tūkstošiem paroļu.
• CAPTCHA var ierobežot robotus no mēstules sūtīt pārskatīšanas sadaļu, sniedzot nepatiesus komentārus.
• CAPTCHA palīdz novērst biļešu inflāciju, jo daži cilvēki iegādājas lielu skaitu biļešu tālākpārdošanai. CAPTCHA pat var novērst nepatiesu reģistrēšanos bezmaksas pasākumos.
• CAPTCHA var ierobežot kibernoziedznieku blogu sūtīšanu uz emuāriem ar asprātīgiem komentāriem un saitēm uz kaitīgām vietnēm.

Ir daudz vairāk iemeslu, kas atbalsta CAPTCHA validācijas integrēšanu jūsu vietnē. To var izdarīt, izmantojot šādu kodu.

HTML CAPTCHA kods

HTML jeb HyperText Markup Language apraksta tīmekļa lapas struktūru. Izmantojiet šo HTML kodu, lai strukturētu savu CAPTCHA validācijas veidlapu:

Captcha Validator, izmantojot HTML, CSS un JavaScript



captcha teksts




atjaunot

Šis kods galvenokārt sastāv no 7 elementiem:

• : Šis elements tiek izmantots, lai parādītu CAPTCHA formas virsrakstu.
• : Šis elements tiek izmantots, lai parādītu tekstu CAPTCHA.
• - Šis elements tiek izmantots, lai izveidotu ievades lodziņu, lai ierakstītu CAPTCHA.
• : Šī poga iesniedz veidlapu un pārbauda, ​​vai CAPTCHA un ievadītais teksts ir vienādi.
• : Šī poga tiek izmantota, lai atsvaidzinātu CAPTCHA.
• : Šis elements tiek izmantots, lai parādītu izvadi atbilstoši ievadītajam tekstam.
• : Šis ir vecāku elements, kas satur visus pārējos elementus.

CSS un JavaScript faili ir saistīti ar šo HTML lapu, izmantojot un attiecīgi. Jums jāpievieno saite tag iekšā galva un scenārijs taga beigās ķermeņa.

Jūs varat arī integrēt šo kodu ar esošajām vietnes formām.

Saistīts: HTML Essentials apkrāptu lapa: tagi, atribūti un citi

CSS CAPTCHA kods

CSS jeb Cascading Style Sheets tiek izmantots HTML elementu veidošanai. Lai veidotu iepriekš minētos HTML elementus, izmantojiet šo CSS kodu:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
ķermenis {
fona krāsa: # 232331;
fontu saime: 'Roboto', sans-serif;
}
#captchaBackground {
augstums: 200 pikseļi;
platums: 250px;
fona krāsa: # 2d3748;
displejs: elastīgs;
align-items: centrs;
attaisnot-saturs: centrs;
elastības virziens: kolonna;
}
#captchaHeading {
krāsa: balta;
}
#captcha {
margin-bottom: 1em;
fonta lielums: 30 pikseļi;
burtu atstarpes: 3px;
krāsa: # 08e5ff;
}
.center {
displejs: elastīgs;
elastības virziens: kolonna;
align-items: centrs;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
fona krāsa: # 08e5ff;
apmale: 0px;
fonta svars: treknrakstā;
}
#refreshButton {
fona krāsa: # 08e5ff;
apmale: 0px;
fonta svars: treknrakstā;
}
#textBox {
augstums: 25px;
}
.incorrectCaptcha {
krāsa: # FF0000;
}
.correctCaptcha {
krāsa: # 7FFF00;
}

Pievienojiet vai noņemiet CSS rekvizītus no šī koda atbilstoši savām vēlmēm. Veidlapas konteineram varat piešķirt arī elegantu izskatu, izmantojot CSS box-shadow īpašums.

JavaScript CAPTCHA kods

JavaScript tiek izmantots, lai pievienotu funkcionalitāti citādi statiskai vietnei. Izmantojiet šo kodu, lai pievienotu pilnīgu funkcionalitāti CAPTCHA validācijas veidlapai:

// document.querySelector () tiek izmantots, lai atlasītu elementu no dokumenta, izmantojot tā ID
ļaujiet captchaText = document.querySelector ('# captcha');
ļaujiet userText = document.querySelector ('# textBox');
ļaujiet iesniegt taustiņu = document.querySelector ('# iesniedziet pogu');
let output = document.querySelector ('# output');
ļaujiet refreshButton = document.querySelector ('# refreshButton');
// alphaNums satur rakstzīmes, ar kurām vēlaties izveidot CAPTCHA
ļaujiet 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'];
ļaujiet tukšajamArr = [];
// Šī cilpa ģenerē nejaušu virkni 7 rakstzīmēs, izmantojot alphaNums
// Turklāt šī virkne tiek parādīta kā CAPTCHA
par (lai i = 1; i <= 7; i ++) {
emptyArr.push (alfaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Šis notikumu klausītājs tiek stimulēts ikreiz, kad lietotājs nospiež pogu "Enter"
// "Pareizi!" vai "Nepareizs, lūdzu, mēģiniet vēlreiz" ziņojums ir
// tiek parādīts pēc ievades teksta validēšanas ar CAPTCHA
userText.addEventListener ('keyup', funkcija (e) {
// Pogas "Enter" atslēgas kods ir 13
ja (e.keyCode 13) {
ja (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Pareizi!";
} cits
output.classList.add ("wrongCaptcha");
output.innerHTML = "Nepareizi, lūdzu, mēģiniet vēlreiz";
}
}
});
// Šis notikumu klausītājs tiek stimulēts ikreiz, kad lietotājs noklikšķina uz pogas Iesniegt
// "Pareizi!" vai "Nepareizs, lūdzu, mēģiniet vēlreiz" ziņojums ir
// tiek parādīts pēc ievades teksta validēšanas ar CAPTCHA
submitButton.addEventListener ('klikšķis', funkcija () {
ja (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Pareizi!";
} cits
output.classList.add ("wrongCaptcha");
output.innerHTML = "Nepareizi, lūdzu, mēģiniet vēlreiz";
}
});
// Šis notikumu klausītājs tiek stimulēts ikreiz, kad lietotājs nospiež pogu "Atsvaidzināt"
// Ja lietotājs noklikšķina uz pogas "Atsvaidzināt", tiek ģenerēts un parādīts jauns izlases veida CAPTCHA
refreshButton.addEventListener ('klikšķis', funkcija () {
userText.value = "";
ļaujiet refreshArr = [];
par (lai j = 1; j <= 7; j ++) {
refreshArr.push (alfaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Tagad jums ir pilnībā funkcionāla CAPTCHA validācijas veidlapa! Ja vēlaties apskatīt pilnu kodu, varat to klonēt Šī CAPTCHA-Validator projekta GitHub krātuve. Pēc repozitorija klonēšanas izpildiet HTML failu un saņemsit šādu izvadi:

Ievadot pareizo CAPTCHA kodu ievades lodziņā, tiks parādīta šāda izeja:

Ievadot jebkuru nepareizu CAPTCHA kodu ievades lodziņā, tiks parādīta šāda izeja:

Padariet savu vietni drošu ar CAPTCHA

Iepriekš daudzas organizācijas un uzņēmumi ir cietuši smagus zaudējumus, piemēram, datu pārkāpumus, surogātpasta uzbrukumus utt. kā rezultātā viņu vietnēs nav CAPTCHA veidlapu. Ļoti ieteicams savai vietnei pievienot CAPTCHA, jo tas papildina drošības slāni, lai vietne netiktu pakļauta kibernoziedzniekiem.

Google arī uzsāka bezmaksas pakalpojumu ar nosaukumu "reCAPTCHA", kas palīdz aizsargāt vietnes no surogātpasta un ļaunprātīgas izmantošanas. CAPTCHA un reCAPTCHA šķiet līdzīgi, taču tie nav gluži viens un tas pats. Dažreiz CAPTCHA jūtas nomākta un grūti saprotama daudziem lietotājiem. Lai gan ir svarīgs iemesls, kāpēc viņi tiek apgrūtināti.

Kā CAPTCHA darbojas un kāpēc viņi ir tik grūti?

CAPTCHA un reCAPTCHA novērš surogātpastu. Kā viņi strādā? Un kāpēc jums šķiet tik grūti atrisināt CAPTCHA?

Lasiet Tālāk

Par autoru