Направите ЦАПТЦХА образац за проверу користећи ХТМЛ, ЦСС и ЈаваСцрипт

Данас су ЦАПТЦХА саставни део безбедности веб локација. Милиони ЦАПТЦХА тестова свакодневно се завршавају на мрежи.

Ако нисте имплементирали ЦАПТЦХА валидацију на својој веб локацији, то би вам могло створити велики проблем, постављајући вас као мету пошиљаоцима нежељене поште.

Ево свега што требате знати о ЦАПТЦХА -овима и како их можете лако имплементирати на своју веб страницу користећи ХТМЛ, ЦСС и ЈаваСцрипт.

Шта је ЦАПТЦХА?

ЦАПТЦХА је скраћеница за „Потпуно аутоматизован јавни Турингов тест који говори рачунарима и људима одвојено“. Овај израз су 2003. године смислили Луис вон Ахн, Мануел Блум, Ницхолас Ј. Хоппер и Јохн Лангфорд. То је врста теста изазов-одговор који се користи за утврђивање да ли је корисник човек или не.

ЦАПТЦХА додају сигурност веб локацијама пружајући изазове које је роботима тешко извести, али релативно лако људима. На пример, идентификовање свих слика аутомобила из скупа више слика тешко је за роботе, али довољно једноставно за људске очи.

Идеја ЦАПТЦХА потиче из Туринговог теста. Турингов тест је метода којом се може испитати да ли машина може размишљати као човек или не. Занимљиво је да се ЦАПТЦХА тест може назвати „обрнутим Туринговим тестом“, јер у овом случају рачунар ствара тест који изазива људе.

Зашто је вашој веб страници потребна ЦАПТЦХА валидација?

ЦАПТЦХА се углавном користе за спречавање робота да аутоматски шаљу обрасце са нежељеном поштом и другим штетним садржајем. Чак га и компаније попут Гооглеа користе да спрече њихов систем од нежељених напада. Ево неких разлога зашто ваша веб локација има користи од ЦАПТЦХА валидације:

ЦАПТЦХА -е помажу у спречавању хакера и робота да спамују системе за регистрацију стварањем лажних налога. Ако нису спречени, могу да користе те налоге у зле сврхе.
ЦАПТЦХА-и могу забранити нападе пријављивања грубом силом са ваше веб локације које хакери користе за покушај пријављивања користећи хиљаде лозинки.
ЦАПТЦХА -и могу ограничити роботе да не шаљу нежељену пошту у одељак за преглед тако што ће давати лажне коментаре.
ЦАПТЦХА помаже у спречавању инфлације карата јер неки људи купују велики број карата за препродају. ЦАПТЦХА чак може спречити лажне регистрације на бесплатне догађаје.
ЦАПТЦХА могу ограничити сајбер преваранте на слање нежељене поште блоговима са сумњивим коментарима и везама до штетних веб локација.

Постоји много више разлога који подржавају интеграцију ЦАПТЦХА валидације у вашу веб локацију. То можете учинити помоћу следећег кода.

веб странице за које вам је досадно

ХТМЛ ЦАПТЦХА код

ХТМЛ или језик за означавање хипертекста описује структуру веб странице. Користите следећи ХТМЛ код за структуирање свог ЦАПТЦХА обрасца за проверу:

  
  
  
  
  
  
  
  
  
 captcha text  
  
  
  
 Refresh

Овај код се углавном састоји од 7 елемената:

: Овај елемент се користи за приказ наслова ЦАПТЦХА обрасца.
: Овај елемент се користи за приказ ЦАПТЦХА текста.
- Овај елемент се користи за креирање оквира за унос за унос ЦАПТЦХА.
: Ово дугме шаље образац и проверава да ли су ЦАПТЦХА и откуцани текст исти или нису.
: Ово дугме се користи за освежавање ЦАПТЦХА.
: Овај елемент се користи за приказ излаза према унетом тексту.
: Ово је родитељски елемент који садржи све остале елементе.

ЦСС и ЈаваСцрипт датотеке су повезане са овом ХТМЛ страницом путем и елементи респективно. Морате додати линк ознака унутар глава ознака и скрипта ознака на крају тело .

Такође можете интегрисати овај код са постојећим облицима ваше веб странице.

Повезан: ХТМЛ Ессентиалс Цхеат Схеет: ознаке, атрибути и још много тога

ЦСС ЦАПТЦХА код

ЦСС или Цасцадинг Стиле Схеетс се користи за стилизовање ХТМЛ елемената. Користите следећи ЦСС код за стилизовање горњих ХТМЛ елемената:

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

Додајте или уклоните ЦСС својства из овог кода према вашим жељама. Такође можете дати елегантан изглед контејнеру форме помоћу ЦСС бок-схадов својство .

ЈаваСцрипт ЦАПТЦХА код

ЈаваСцрипт се користи за додавање функционалности иначе статичној веб страници. Помоћу следећег кода додајте потпуну функционалност у образац за проверу ЦАПТЦХА:

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

Сада имате потпуно функционалан ЦАПТЦХА образац за потврду! Ако желите да погледате комплетан код, можете да га клонирате ГитХуб спремиште овог ЦАПТЦХА-Валидатор пројекта . Након клонирања спремишта, покрените ХТМЛ датотеку и добићете следећи излаз:

како ротирати мп4 видео прозоре 10

Када унесете исправан ЦАПТЦХА код у оквир за унос, приказаће се следећи излаз:

Када унесете било који погрешан ЦАПТЦХА код у оквир за унос, приказаће се следећи излаз:

Учините своју веб локацију сигурном помоћу ЦАПТЦХА -а

У прошлости су многе организације и предузећа претрпеле велике губитке, попут кршења података, напада нежељене поште итд., Због тога што немају ЦАПТЦХА обрасце на својим веб страницама. Препоручује се додавање ЦАПТЦХА на вашу веб локацију јер додаје безбедносни слој како би се спречило сајбер криминалце.

Гоогле је такође покренуо бесплатну услугу под називом „реЦАПТЦХА“ која помаже у заштити веб локација од нежељене поште и злоупотребе. ЦАПТЦХА и реЦАПТЦХА изгледају слично, али нису сасвим иста ствар. Понекад се ЦАПТЦХА -е осећају фрустрирајуће и тешко разумљиве за многе кориснике. Иако постоји важан разлог зашто су отежани.

Објави Објави Твеет Емаил Како функционишу ЦАПТЦХА -е и зашто су толико тешке?

ЦАПТЦХА и реЦАПТЦХА спречавају нежељену пошту. Како они раде? И зашто сматрате да је ЦАПТЦХА тако тешко решити?

Прочитајте следеће Повезане теме

Програмирање
ХТМЛ
ЈаваСцрипт
ЦСС

О аутору Иуврај Цхандра(Објављено 60 чланака)

Иуврај је студент основних студија рачунарства на Универзитету у Делхију у Индији. Он је страствен за Фулл Стацк Веб Девелопмент. Кад не пише, истражује дубину различитих технологија.

Још од Иуврај Цхандра

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили