Î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 dificil de realizat de 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 de oprire informație de configurare a sistemului greșită

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:

---

---










captcha text



Refresh








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

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


Acum aveți un formular de validare complet funcțional CAPTCHA! Dacă doriți să aruncați o privire la codul 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:

xbox one controller wireless nu se va conecta

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 la 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.

Acțiune Acțiune Tweet E-mail 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 Subiecte asemănătoare

• Programare
• HTML
• JavaScript
• CSS

Despre autor Yuvraj Chandra(60 de articole publicate)

Yuvraj este student la Universitatea din Delhi, India. Este pasionat de dezvoltarea web Full Stack. Când nu scrie, explorează profunzimea diferitelor tehnologii.

Mai multe de la Yuvraj Chandra

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona