În prezent, CAPTCHA sunt o parte integrantă a securității site-ului web. Milioane de teste CAPTCHA sunt finalizate online în fiecare zi.

Dacă nu ați implementat validarea CAPTCHA pe site-ul dvs. web, aceasta ar putea crea o mare problemă pentru dvs., configurându-vă ca țintă pentru spammeri.

Iată tot ce trebuie să știți despre CAPTCHA și cum le puteți implementa cu ușurință pe site-ul dvs. web utilizând HTML, CSS și JavaScript.

Ce este CAPTCHA?

CAPTCHA înseamnă „Testul Turing public complet automatizat pentru a distinge computerele și oamenii în afară”. Acest termen a fost inventat în 2003 de Luis von Ahn, Manuel Blum, Nicholas J. Hopper și John Langford. Este un tip de test provocare-răspuns care este utilizat pentru a determina dacă utilizatorul este sau nu om.

CAPTCHA adaugă securitate site-urilor web oferind provocări dificile de realizat pentru roboți, dar relativ ușoare pentru oameni. De exemplu, identificarea tuturor imaginilor unei mașini dintr-un set de imagini multiple este dificilă pentru roboți, dar suficient de simplă pentru ochii omului.

Ideea CAPTCHA își are originea în testul Turing. Un test Turing este o metodă pentru a testa dacă o mașină poate gândi sau nu ca un om. Interesant este faptul că un test CAPTCHA poate fi numit „Test Turing invers”, deoarece în acest caz, computerul creează testul care provoacă oamenii.

De ce site-ul dvs. are nevoie de validare CAPTCHA?

CAPTCHA-urile sunt utilizate în principal pentru a împiedica roboții să trimită automat formulare cu spam și alt conținut dăunător. Chiar și companii precum Google îl folosesc pentru a preveni sistemul lor de atacuri spam. Iată câteva dintre motivele pentru care site-ul dvs. web beneficiază de validarea CAPTCHA:

• CAPTCHA ajută la prevenirea hackerilor și a roboților de la spam-ul sistemelor de înregistrare prin crearea de conturi false. Dacă nu sunt prevenite, pot folosi aceste conturi în scopuri nefaste.
• CAPTCHA-urile pot interzice atacurile de conectare cu forță brută de pe site-ul dvs. pe care hackerii le folosesc pentru a încerca conectarea folosind mii de parole.
• CAPTCHA-urile pot restricționa roboții să trimită spam către secțiunea de examinare, oferind comentarii false.
• CAPTCHA ajută la prevenirea inflației biletelor, deoarece unii oameni cumpără un număr mare de bilete pentru revânzare. CAPTCHA poate preveni chiar înregistrări false la evenimente gratuite.
• CAPTCHA-urile pot restricționa escrocii cibernetici de la trimiterea de spam-uri pe bloguri cu comentarii neplăcute și linkuri către site-uri web dăunătoare.

Există mai multe motive care acceptă integrarea validării CAPTCHA pe site-ul dvs. web. Puteți face acest lucru cu următorul cod.

Cod HTML CAPTCHA

HTML, sau HyperText Markup Language, descrie structura unei pagini web. Utilizați următorul cod HTML pentru a vă structura formularul de validare CAPTCHA:

Validator Captcha Folosind HTML, CSS și JavaScript



text captcha




Reîmprospăta

Acest cod constă în principal din 7 elemente:

• : Acest element este utilizat pentru a afișa titlul formularului CAPTCHA.
• : Acest element este utilizat pentru a afișa textul CAPTCHA.
• - Acest element este utilizat pentru a crea o casetă de intrare pentru a tasta CAPTCHA.
• : Acest buton trimite formularul și verifică dacă CAPTCHA și textul tastat sunt identice sau nu.
• : Acest buton este folosit pentru a reîmprospăta CAPTCHA.
• : Acest element este utilizat pentru a afișa ieșirea conform textului introdus.
• : Acesta este elementul părinte care conține toate celelalte elemente.

Fișierele CSS și JavaScript sunt conectate la această pagină HTML prin intermediul și respectiv elemente. Trebuie să adăugați legătură eticheta în interiorul cap eticheta și scenariu etichetă la sfârșitul fișierului corp.

De asemenea, puteți integra acest cod cu formularele existente ale site-ului dvs. web.

Legate de: Foaia de trucuri HTML Essentials: etichete, atribute și multe altele

Cod CSS CAPTCHA

CSS sau Cascading Style Sheets este folosit pentru a stiliza elemente HTML. Utilizați următorul cod CSS pentru a stiliza elementele HTML de mai sus:

@ import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
corp {
culoare de fundal: # 232331;
font-family: „Roboto”, sans-serif;
}
#captchaBackground {
înălțime: 200px;
lățime: 250px;
culoare de fundal: # 2d3748;
display: flex;
align-items: centru;
justify-content: centru;
direcție flexibilă: coloană;
}
#captchaHeading {
culoare albă;
}
#captcha {
marginea-jos: 1em;
dimensiunea fontului: 30 px;
spațierea literelor: 3 px;
culoare: # 08e5ff;
}
.centru {
display: flex;
direcție flexibilă: coloană;
align-items: centru;
}
#buton de trimitere {
marginea-sus: 2em;
marginea-fund: 2em;
culoare de fundal: # 08e5ff;
chenar: 0px;
font-weight: bold;
}
#refreshButton {
culoare de fundal: # 08e5ff;
chenar: 0px;
font-weight: bold;
}
#casetă de text {
înălțime: 25 px;
}
.Captcha incorect {
culoare: # FF0000;
}
.correctCaptcha {
culoare: # 7FFF00;
}

Adăugați sau eliminați proprietăți CSS din acest cod în funcție de preferințe. De asemenea, puteți da un aspect elegant containerului formularului folosind Proprietate CSS box-shadow.

Cod JavaScript CAPTCHA

JavaScript este folosit pentru a adăuga funcționalitate unei pagini web altfel statice. Utilizați următorul cod pentru a adăuga funcționalitate completă la formularul de validare CAPTCHA:

// document.querySelector () este folosit pentru a selecta un element din document folosind ID-ul acestuia
să captchaText = document.querySelector ('# captcha');
lasă userText = document.querySelector ('# textBox');
permiteți submitButton = document.querySelector ('# submitButton');
let output = document.querySelector ('# output');
lasă refreshButton = document.querySelector ('# refreshButton');
// alphaNums conține caracterele cu care doriți să creați 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'];
lasa golArr = [];
// Această buclă generează un șir aleatoriu de 7 caractere folosind alphaNums
// Mai departe, acest șir este afișat ca CAPTCHA
pentru (să i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Acest ascultător de evenimente este stimulat de fiecare dată când utilizatorul apasă butonul „Enter”
// "Corect!" sau mesajul „Incorect, vă rugăm să încercați din nou” este
// afișat după validarea textului de intrare cu CAPTCHA
userText.addEventListener ('tastare', funcție (e) {
// Valoarea codului cheii al butonului „Enter” este 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Corect!";
} altceva {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Incorect, vă rugăm să încercați din nou";
}
}
});
// Acest ascultător de evenimente este stimulat de fiecare dată când utilizatorul dă clic pe butonul „Trimite”
// "Corect!" sau mesajul „Incorect, vă rugăm să încercați din nou” este
// afișat după validarea textului de intrare cu CAPTCHA
submitButton.addEventListener ('click', function () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Corect!";
} altceva {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Incorect, vă rugăm să încercați din nou";
}
});
// Acest ascultător de evenimente este stimulat de fiecare dată când utilizatorul apasă butonul „Reîmprospătare”
// Un nou CAPTCHA aleatoriu este generat și afișat după ce utilizatorul face clic pe butonul „Reîmprospătare”
refreshButton.addEventListener („clic”, funcție () {
userText.value = "";
let refreshArr = [];
pentru (fie j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Acum aveți un formular de validare complet funcțional CAPTCHA! Dacă doriți să aruncați o privire asupra codului complet, puteți clona Depozitul GitHub al acestui proiect CAPTCHA-Validator. După clonarea depozitului, executați fișierul HTML și veți obține următoarea ieșire:

Când introduceți codul CAPTCHA corect în caseta de intrare, va fi afișată următoarea ieșire:

Când introduceți un cod CAPTCHA incorect în caseta de intrare, va fi afișată următoarea ieșire:

Asigurați-vă site-ul web sigur cu CAPTCHA

În trecut, multe organizații și companii au suferit pierderi mari, cum ar fi încălcarea datelor, atacuri de spam etc. ca urmare a lipsei formularelor CAPTCHA pe site-urile lor web. Este foarte recomandat să adăugați CAPTCHA pe site-ul dvs. web, deoarece adaugă un strat de securitate pentru a preveni site-ul web de criminali cibernetici.

Google a lansat, de asemenea, un serviciu gratuit numit „reCAPTCHA” care ajută la protejarea site-urilor web de spam și abuz. CAPTCHA și reCAPTCHA par asemănătoare, dar nu sunt chiar același lucru. Uneori, CAPTCHA se simte frustrant și dificil de înțeles pentru mulți utilizatori. Deși există un motiv important pentru care sunt făcute dificile.

Cum funcționează CAPTCHA și de ce sunt atât de dificile?

CAPTCHA și reCAPTCHA previn spamul. Cum funcționează? Și de ce găsești CAPTCHA atât de greu de rezolvat?

Citiți în continuare

Despre autor