Izveidojiet CAPTCHA validācijas veidlapu, izmantojot HTML, CSS un JavaScript

Izveidojiet CAPTCHA validācijas veidlapu, izmantojot HTML, CSS un JavaScript

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





Ja savā vietnē neesat ieviesis CAPTCHA validāciju, tas var radīt jums lielas problēmas, iestatot jūs kā surogātpasta izplatītāju mērķi.



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





Kas ir CAPTCHA?

CAPTCHA apzīmē 'pilnīgi automatizētu publisko Tjūringa testu, lai informētu datorus un cilvēkus.' Šo terminu 2003. gadā izdomāja Luiss fon Āns, Manuels Blūms, Nikolass Dž. Hopers un Džons Lengfords. Tas ir izaicinājuma-atbildes testa veids, ko izmanto, lai noteiktu, vai lietotājs ir cilvēks vai nē.

CAPTCHA papildina vietņu drošību, nodrošinot izaicinājumus, kurus 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 pietiekami vienkārši cilvēka acīm.



CAPTCHA ideja radusies no Tjūringa testa. Tjūringa tests ir metode, lai pārbaudītu, vai mašīna spēj domāt kā cilvēks vai nē. Interesanti, ka CAPTCHA testu var saukt par “reverso Tjūringa testu”, jo šajā gadījumā dators izveido testu, kas izaicina cilvēkus.

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

CAPTCHA galvenokārt tiek izmantoti, lai roboti automātiski neiesniegtu veidlapas ar surogātpastu un citu kaitīgu saturu. Pat tādi uzņēmumi kā Google to izmanto, lai novērstu to sistēmas nevēlamu uzbrukumu. Šeit ir daži iemesli, kāpēc jūsu vietne gūst labumu no CAPTCHA validācijas:



  • CAPTCHA palīdz novērst hakerus un robotus no surogātpasta reģistrācijas sistēmām, izveidojot viltotus kontus. Ja tie netiek novērsti, viņi var izmantot šos kontus nelietīgiem mērķiem.
  • CAPTCHA var aizliegt brutāla spēka pieteikšanās uzbrukumus no jūsu vietnes, ko hakeri izmanto, lai mēģinātu pieteikties, izmantojot tūkstošiem paroļu.
  • CAPTCHA var ierobežot robotprogrammatūru no surogātpasta pārsūtīšanas, sniedzot nepatiesus komentārus.
  • CAPTCHA palīdz novērst biļešu inflāciju, jo daži cilvēki pērk lielu skaitu biļešu tālākpārdošanai. CAPTCHA var pat novērst viltus reģistrāciju bezmaksas pasākumiem.
  • CAPTCHAs var ierobežot kibernoziegumus no surogātpasta emuāriem ar viltīgiem komentāriem un saitēm uz kaitīgām vietnēm.

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

kā redzēt, kam ir piekļuve Google dokumentam

HTML CAPTCHA kods

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












captcha text



Refresh






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

  • : Šis elements tiek izmantots, lai parādītu veidlapas CAPTCHA virsrakstu.

  • : Šis elements tiek izmantots, lai parādītu CAPTCHA tekstu.
  • - Šo elementu izmanto, lai izveidotu ievades lodziņu CAPTCHA ierakstīšanai.
  • : Šī poga iesniedz veidlapu un pārbauda, ​​vai CAPTCHA un ievadītais teksts ir vienādi.
  • : Šo pogu izmanto, 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 elementi. Jums jāpievieno saite atzīme iekšpusē galvu tagu un skripts atzīme beigās ķermenis .

Šo kodu varat arī integrēt esošajās savas vietnes formās.

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



CSS CAPTCHA kods

CSS jeb kaskādes stila lapas tiek izmantotas HTML elementu noformēšanai. Izmantojiet šo CSS kodu, lai noformētu iepriekš minētos 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;
}

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

JavaScript CAPTCHA kods

JavaScript tiek izmantots, lai pievienotu funkcionalitāti citādi statiskai tīmekļa lapai. Izmantojiet šo kodu, lai CAPTCHA validācijas veidlapai pievienotu pilnu funkcionalitāti:

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

Tagad jums ir pilnībā funkcionāla CAPTCHA validācijas veidlapa! Ja vēlaties apskatīt visu kodu, varat to klonēt Šī CAPTCHA-Validator projekta GitHub krātuve . Pēc krātuves klonēšanas izpildiet HTML failu, un jūs iegūsit šādu rezultātu:

kā atrast dziesmu, kas izmantota YouTube videoklipā

Ievades lodziņā ievadot pareizo CAPTCHA kodu, tiks parādīta šāda izvade:

Ievades lodziņā ievadot nepareizu CAPTCHA kodu, tiks parādīta šāda izvade:

Padariet savu vietni drošu, izmantojot CAPTCHA

Agrāk daudzas organizācijas un uzņēmumi ir cietuši lielus zaudējumus, piemēram, datu pārkāpumus, surogātpasta uzbrukumus utt., Jo viņu vietnēs nav CAPTCHA veidlapu. Ir ļoti ieteicams savai vietnei pievienot CAPTCHA, jo tas pievieno drošības slāni, lai novērstu vietnes kibernoziedznieku uzbrukumus.

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 daudziem lietotājiem šķiet nomākti un grūti saprotami. Lai gan, ir svarīgs iemesls, kāpēc tie ir sarežģīti.

Kopīgot Kopīgot Čivināt E -pasts Kā CAPTCHA darbojas un kāpēc tās ir tik sarežģītas?

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

Lasīt Tālāk Saistītās tēmas
  • Programmēšana
  • HTML
  • JavaScript
  • CSS
Par autoru Yuvraj Chandra(Publicēti 60 raksti)

Yuvraj ir datorzinātņu bakalaura students Deli universitātē, Indijā. Viņš aizraujas ar Full Stack tīmekļa izstrādi. Kad viņš neraksta, viņš pēta dažādu tehnoloģiju dziļumu.

Vairāk no Yuvraj Chandra

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu