Ustvarite obrazec za preverjanje CAPTCHA z uporabo HTML, CSS in JavaScript

Ustvarite obrazec za preverjanje CAPTCHA z uporabo HTML, CSS in JavaScript

Danes so CAPTCHA sestavni del varnosti spletnih mest. Na spletu se vsak dan opravi na milijone testov CAPTCHA.





Če na svojem spletnem mestu niste uveljavili preverjanja CAPTCHA, bi vam to lahko povzročilo veliko težavo in vas postavilo za tarčo pošiljateljev neželene pošte.



Tukaj je vse, kar morate vedeti o CAPTCHA -jih in o tem, kako jih lahko preprosto uporabite na svojem spletnem mestu z uporabo HTML, CSS in JavaScript.





Kaj je CAPTCHA?

CAPTCHA pomeni 'Popolnoma avtomatiziran javni Turingov test za povezovanje računalnikov in ljudi narazen.' Ta izraz so leta 2003 skovali Luis von Ahn, Manuel Blum, Nicholas J. Hopper in John Langford. To je vrsta testa izziv-odziv, ki se uporablja za ugotavljanje, ali je uporabnik človek ali ne.

CAPTCHA dodajajo varnost spletnim mestom, saj ponujajo izzive, ki jih boti težko izvajajo, a sorazmerno enostavni za ljudi. Na primer, prepoznavanje vseh podob avtomobila iz niza več slik je za bote težko, a dovolj preprosto za človeške oči.



Zamisel o CAPTCHA izvira iz Turingovega testa. Turingov test je metoda za preverjanje, ali lahko stroj razmišlja kot človek ali ne. Zanimivo je, da se preskus CAPTCHA lahko imenuje 'povratni Turingov test', saj v tem primeru računalnik ustvari test, ki izziva ljudi.

Zakaj vaša spletna stran potrebuje potrditev CAPTCHA?

CAPTCHA se večinoma uporabljajo za preprečevanje samodejnega pošiljanja obrazcev z neželeno in drugo škodljivo vsebino robotom. Tudi podjetja, kot je Google, ga uporabljajo za preprečevanje neželenih napadov svojega sistema. Tukaj je nekaj razlogov, zakaj ima vaša spletna stran koristi od potrjevanja CAPTCHA:



  • CAPTCHA -ji pomagajo preprečiti hekerjem in botom, da vsiljujejo registracijske sisteme z ustvarjanjem ponarejenih računov. Če jim to ne prepreči, lahko te račune uporabijo v zlobne namene.
  • CAPTCHA lahko prepovejo napade za prijavo z grobo silo z vašega spletnega mesta, ki jih hekerji uporabljajo za poskus prijave z uporabo tisočih gesel.
  • CAPTCHA lahko robotom omejijo pošiljanje neželene pošte v razdelku za pregled z lažnimi komentarji.
  • CAPTCHA pomaga pri preprečevanju inflacije vozovnic, saj nekateri kupijo veliko število vstopnic za nadaljnjo prodajo. CAPTCHA lahko celo prepreči lažne registracije na brezplačne dogodke.
  • CAPTCHA -ji lahko omejijo kibernetske prevarante pri pošiljanju neželene e -pošte s komičnimi komentarji in povezavami do škodljivih spletnih mest.

Obstaja veliko več razlogov, ki podpirajo vključitev preverjanja CAPTCHA na vaše spletno mesto. To lahko storite z naslednjo kodo.

kako izbrisati vodoravno črto v Wordu

Koda CAPTCHA HTML

HTML ali jezik označevanja hiperteksta opisuje strukturo spletne strani. Za strukturiranje potrditvenega obrazca CAPTCHA uporabite naslednjo kodo HTML:












captcha text



Refresh






Ta koda je v glavnem sestavljena iz 7 elementov:

  • : Ta element se uporablja za prikaz naslova obrazca CAPTCHA.

  • : Ta element se uporablja za prikaz besedila CAPTCHA.
  • - Ta element se uporablja za ustvarjanje vnosnega polja za vnos CAPTCHA.
  • : Ta gumb pošlje obrazec in preveri, ali sta CAPTCHA in vneseno besedilo enaka ali ne.
  • : Ta gumb se uporablja za osvežitev CAPTCHA.
  • : Ta element se uporablja za prikaz izpisa glede na vneseno besedilo.
  • : To je nadrejeni element, ki vsebuje vse ostale elemente.

Datoteki CSS in JavaScript sta povezani s to stranjo HTML prek in elementov. Dodati morate povezava oznako znotraj glavo oznako in skript oznako na koncu telo .

To kodo lahko vključite tudi v obstoječe oblike svojega spletnega mesta.

Povezano: Goljufski list HTML Essentials: oznake, atributi in drugo



Koda CAPTCHA CSS

CSS ali Cascading Style Sheets se uporablja za oblikovanje elementov HTML. Za oblikovanje zgornjih elementov HTML uporabite naslednjo kodo CSS:

@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;
}

Dodajte ali odstranite lastnosti CSS iz te kode glede na vaše želje. Z uporabo datoteke CSS polje-senčna lastnost .

Koda JavaScript CAPTCHA

JavaScript se uporablja za dodajanje funkcionalnosti sicer statični spletni strani. Uporabite naslednjo kodo, da v obrazec za preverjanje CAPTCHA dodate popolno funkcionalnost:

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

Zdaj imate popolnoma funkcionalen obrazec za potrditev CAPTCHA! Če si želite ogledati celotno kodo, jo lahko klonirate Skladišče GitHub tega projekta CAPTCHA-Validator . Ko klonirate skladišče, zaženite datoteko HTML in dobili boste naslednji izhod:

Zazidan telefon Android se ne vklopi

Ko v polje za vnos vnesete pravilno kodo CAPTCHA, se prikaže naslednji izhod:

Ko v polje za vnos vnesete napačno kodo CAPTCHA, se prikaže naslednji izhod:

Naj bo vaše spletno mesto varno s CAPTCHA

V preteklosti je veliko organizacij in podjetij utrpelo velike izgube, kot so kršitve podatkov, napadi neželene pošte itd., Ker na svojih spletnih straneh niso imeli obrazcev CAPTCHA. Zelo priporočljivo je, da na svojo spletno stran dodate CAPTCHA, saj doda varnostni sloj, da prepreči spletno mesto kibernetskih kriminalcev.

Google je predstavil tudi brezplačno storitev, imenovano 'reCAPTCHA', ki pomaga pri zaščiti spletnih mest pred neželeno pošto in zlorabo. CAPTCHA in reCAPTCHA sta videti podobna, vendar nista povsem enaki. Včasih so CAPTCHA za mnoge uporabnike frustrirajoče in težko razumljive. Čeprav obstaja pomemben razlog, zakaj so oteženi.

Deliti Deliti Cvrkutati E-naslov Kako delujejo CAPTCHA in zakaj so tako težki?

CAPTCHA in reCAPTCHA preprečujejo neželeno pošto. Kako delujejo? In zakaj se vam zdijo CAPTCHA tako težko rešljive?

Preberite Naprej Sorodne teme
  • Programiranje
  • HTML
  • JavaScript
  • CSS
O avtorju Yuvraj Chandra(Objavljenih 60 člankov)

Yuvraj je dodiplomski študent računalništva na Univerzi v Delhiju v Indiji. Navdušen je nad spletnim razvojem Full Stack. Ko ne piše, raziskuje globino različnih tehnologij.

Več od Yuvraja Chandre

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti