Създайте формуляр за проверка на CAPTCHA, използвайки HTML, CSS и JavaScript

Създайте формуляр за проверка на CAPTCHA, използвайки HTML, CSS и JavaScript

В днешно време CAPTCHA са неразделна част от сигурността на уебсайтовете. Милиони CAPTCHA тестове се изпълняват онлайн всеки ден.





Ако не сте внедрили валидирането на CAPTCHA на уебсайта си, това може да създаде голям проблем за вас, като ви настрои като цел за спамери.



Ето всичко, което трябва да знаете за CAPTCHA и как можете лесно да ги внедрите на уебсайта си с помощта на HTML, CSS и JavaScript.





Какво е CAPTCHA?

CAPTCHA означава „Напълно автоматизиран публичен тест на Тюринг, за да разкаже компютрите и хората отделно“. Този термин е въведен през 2003 г. от Луис фон Ан, Мануел Блум, Никълъс Дж. Хопър и Джон Лангфорд. Това е вид тест предизвикателство-отговор, който се използва, за да се определи дали потребителят е човек или не.

CAPTCHA добавят сигурност към уебсайтовете, като предоставят предизвикателства, които са трудни за изпълнение на ботовете, но сравнително лесни за хората. Например, идентифицирането на всички изображения на автомобил от набор от множество изображения е трудно за ботовете, но достатъчно просто за човешките очи.



Идеята за CAPTCHA произлиза от Теста на Тюринг. Тестът на Тюринг е метод за проверка дали една машина може да мисли като човек или не. Интересното е, че тестът CAPTCHA може да се нарече „обратен тест на Тюринг“, тъй като в този случай компютърът създава теста, който предизвиква хората.

Защо вашият уебсайт се нуждае от CAPTCHA валидиране?

CAPTCHA се използват главно за предотвратяване на автоматично изпращане на формуляри със спам и друго вредно съдържание. Дори компании като Google го използват, за да предотвратят тяхната система от спам атаки. Ето някои от причините вашият уебсайт да се възползва от валидирането на CAPTCHA:



  • CAPTCHA помагат за предотвратяване на хакери и ботове от спам на системите за регистрация чрез създаване на фалшиви акаунти. Ако не бъдат предотвратени, те могат да използват тези акаунти за злобни цели.
  • CAPTCHA могат да забранят атаки за влизане с груба сила от вашия уебсайт, които хакерите използват, за да опитат да влязат, използвайки хиляди пароли.
  • CAPTCHA могат да ограничат ботовете от спам в секцията за преглед, като предоставят неверни коментари.
  • CAPTCHA помага за предотвратяване на инфлацията на билети, тъй като някои хора купуват голям брой билети за препродажба. CAPTCHA може дори да предотврати фалшиви регистрации за безплатни събития.
  • CAPTCHAs могат да ограничат кибер -мошениците от спам блогове с измамни коментари и връзки към вредни уебсайтове.

Има много повече причини, които поддържат интегрирането на валидирането на CAPTCHA във вашия уебсайт. Можете да направите това със следния код.

xbox one x срещу xbox series x

HTML CAPTCHA код

HTML или HyperText Markup Language описва структурата на уеб страница. Използвайте следния HTML код, за да структурирате формуляра си за проверка на CAPTCHA:












captcha text



Refresh






Този код се състои главно от 7 елемента:

  • : Този елемент се използва за показване на заглавието на формуляра CAPTCHA.

  • : Този елемент се използва за показване на CAPTCHA текста.
  • - Този елемент се използва за създаване на поле за въвеждане за въвеждане на CAPTCHA.
  • : Този бутон изпраща формуляра и проверява дали CAPTCHA и въведеният текст са еднакви или не.
  • : Този бутон се използва за опресняване на CAPTCHA.
  • : Този елемент се използва за показване на изхода според въведения текст.
  • : Това е родителският елемент, който съдържа всички останали елементи.

CSS и JavaScript файловете са свързани към тази HTML страница чрез и елементи съответно. Трябва да добавите връзка маркер вътре в глава етикет и скрипт маркер в края на тяло .

Можете също да интегрирате този код със съществуващите форми на вашия уебсайт.

Свързани: Измамата на HTML Essentials: Етикети, атрибути и др



CSS CAPTCHA код

CSS или каскадни таблици със стилове се използват за стилизиране на HTML елементи. Използвайте следния CSS код, за да оформите горните HTML елементи:

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

Добавете или премахнете CSS свойства от този код според вашите предпочитания. Можете също така да придадете елегантен вид на контейнера за формуляр, като използвате CSS box-shadow свойство .

JavaScript CAPTCHA код

JavaScript се използва за добавяне на функционалност към иначе статична уеб страница. Използвайте следния код, за да добавите пълна функционалност към формуляра за валидиране на 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 = '';
});

Сега имате напълно функционален формуляр за валидиране на CAPTCHA! Ако искате да разгледате пълния код, можете да го клонирате GitHub хранилище на този CAPTCHA-Validator Project . След клониране на хранилището, изпълнете HTML файла и ще получите следния изход:

как да направите gmail по подразбиране

Когато въведете правилния CAPTCHA код в полето за въвеждане, ще се покаже следният изход:

Когато въведете неправилен CAPTCHA код в полето за въвеждане, ще се покаже следният изход:

Направете вашия уебсайт защитен с CAPTCHA

В миналото много организации и фирми са претърпели големи загуби като пробиви на данни, спам атаки и т.н. в резултат на липсата на формуляри CAPTCHA на уебсайтовете си. Силно се препоръчва да добавите CAPTCHA към вашия уебсайт, тъй като той добавя защитен слой, за да предотврати киберпрестъпниците на уебсайта.

Google също пусна безплатна услуга, наречена „reCAPTCHA“, която помага за защита на уебсайтовете от спам и злоупотреба. CAPTCHA и reCAPTCHA изглеждат сходни, но не са едно и също нещо. Понякога CAPTCHA се чувстват разочароващи и трудни за разбиране за много потребители. Въпреки това, има важна причина защо те са направени трудни.

Дял Дял Туит електронна поща Как работят CAPTCHA и защо са толкова трудни?

CAPTCHA и reCAPTCHA предотвратяват спама. Как работят те? И защо смятате, че CAPTCHA са толкова трудни за решаване?

Прочетете Напред Свързани теми
  • Програмиране
  • HTML
  • JavaScript
  • CSS
За автора Юврадж Чандра(60 статии са публикувани)

Юврадж е студент по компютърни науки в Университета в Делхи, Индия. Той е страстен за Full Stack Web Development. Когато не пише, той изследва дълбочината на различните технологии.

Още от Yuvraj Chandra

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате