Utwórz formularz weryfikacji CAPTCHA za pomocą HTML, CSS i JavaScript

Utwórz formularz weryfikacji CAPTCHA za pomocą HTML, CSS i JavaScript

Obecnie CAPTCHA są integralną częścią bezpieczeństwa witryny. Miliony testów CAPTCHA są przeprowadzane online każdego dnia.





Jeśli nie wdrożyłeś w swojej witrynie walidacji CAPTCHA, może to stworzyć dla Ciebie duży problem, ustawiając Cię jako cel dla spamerów.



Oto wszystko, co musisz wiedzieć o CAPTCHA i o tym, jak łatwo zaimplementować je w swojej witrynie za pomocą HTML, CSS i JavaScript.





Co to jest CAPTCHA?

CAPTCHA oznacza „Całkowicie zautomatyzowany publiczny test Turinga, aby odróżnić komputery od ludzi”. Termin ten został ukuty w 2003 roku przez Luisa von Ahna, Manuela Bluma, Nicholasa J. Hoppera i Johna Langforda. Jest to rodzaj testu wyzwanie-odpowiedź, który służy do określenia, czy użytkownik jest człowiekiem, czy nie.

CAPTCHA zwiększają bezpieczeństwo stron internetowych, dostarczając wyzwań, które są trudne do wykonania dla botów, ale stosunkowo łatwe dla ludzi. Na przykład identyfikacja wszystkich obrazów samochodu z zestawu wielu obrazów jest trudna dla botów, ale wystarczająco prosta dla ludzkich oczu.



Idea CAPTCHA wywodzi się z testu Turinga. Test Turinga to metoda sprawdzania, czy maszyna może myśleć jak człowiek, czy nie. Co ciekawe, test CAPTCHA można nazwać „odwróconym testem Turinga”, ponieważ w tym przypadku komputer tworzy test, który rzuca wyzwanie ludziom.

Dlaczego Twoja witryna wymaga weryfikacji CAPTCHA?

CAPTCHA są używane głównie do zapobiegania automatycznemu przesyłaniu przez boty formularzy zawierających spam i inne szkodliwe treści. Nawet firmy takie jak Google używają go, aby chronić swój system przed atakami spamowymi. Oto kilka powodów, dla których Twoja witryna może skorzystać z weryfikacji CAPTCHA:



  • CAPTCHA pomagają zapobiegać spamowaniu systemów rejestracji przez hakerów i boty poprzez tworzenie fałszywych kont. Jeśli im nie zapobiegną, mogą używać tych kont do nikczemnych celów.
  • CAPTCHA mogą zabronić ataków typu brute force na logowanie z Twojej witryny, które hakerzy wykorzystują do logowania się przy użyciu tysięcy haseł.
  • CAPTCHA mogą uniemożliwić botom spamowanie sekcji recenzji, podając fałszywe komentarze.
  • CAPTCHA pomagają zapobiegać inflacji biletów, ponieważ niektórzy ludzie kupują dużą liczbę biletów w celu odsprzedaży. CAPTCHA może nawet zapobiec fałszywym rejestracjom na bezpłatne wydarzenia.
  • CAPTCHA mogą uniemożliwić cyberprzestępcom spamowanie blogów z podejrzanymi komentarzami i linkami do szkodliwych stron internetowych.

Istnieje wiele innych powodów, dla których warto zintegrować walidację CAPTCHA z Twoją witryną. Możesz to zrobić za pomocą następującego kodu.

jak pobrać książkę z książek google

Kod HTML CAPTCHA

HTML lub HyperText Markup Language opisuje strukturę strony internetowej. Użyj następującego kodu HTML, aby ustrukturyzować formularz weryfikacji CAPTCHA:












captcha text



Refresh






Ten kod składa się głównie z 7 elementów:

  • : Ten element służy do wyświetlania nagłówka formularza CAPTCHA.

  • : Ten element służy do wyświetlania tekstu CAPTCHA.
  • - Ten element służy do tworzenia pola wejściowego do wpisania CAPTCHA.
  • : Ten przycisk przesyła formularz i sprawdza, czy CAPTCHA i wpisany tekst są takie same, czy nie.
  • : Ten przycisk służy do odświeżania CAPTCHA.
  • : Ten element służy do wyświetlania danych wyjściowych zgodnie z wprowadzonym tekstem.
  • : To jest element nadrzędny, który zawiera wszystkie inne elementy.

Pliki CSS i JavaScript są połączone z tą stroną HTML za pomocą oraz elementy odpowiednio. Musisz dodać połączyć tag wewnątrz głowa tag i scenariusz tag na końcu ciało .

Możesz również zintegrować ten kod z istniejącymi formularzami swojej witryny.

Związane z: Ściągawka z podstaw HTML: tagi, atrybuty i więcej



Kod CSS CAPTCHA

CSS, czyli kaskadowe arkusze stylów, służy do stylizowania elementów HTML. Użyj następującego kodu CSS, aby nadać styl powyższym elementom 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;
}

Dodaj lub usuń właściwości CSS z tego kodu zgodnie z własnymi preferencjami. Możesz również nadać elegancki wygląd kontenerowi formularza za pomocą CSS box-shadow właściwość .

Kod JavaScript CAPTCHA

JavaScript służy do dodawania funkcji do statycznej strony internetowej. Użyj poniższego kodu, aby dodać pełną funkcjonalność do formularza weryfikacji 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 = '';
});

Teraz masz w pełni funkcjonalny formularz weryfikacji CAPTCHA! Jeśli chcesz zobaczyć cały kod, możesz sklonować Repozytorium GitHub tego projektu CAPTCHA-Validator . Po sklonowaniu repozytorium uruchom plik HTML, a otrzymasz następujące dane wyjściowe:

w jaką grę powinienem zagrać schemat blokowy

Po wpisaniu poprawnego kodu CAPTCHA w polu wprowadzania zostanie wyświetlony następujący wynik:

Po wprowadzeniu nieprawidłowego kodu CAPTCHA w polu wejściowym zostanie wyświetlony następujący wynik:

Zabezpiecz swoją witrynę za pomocą CAPTCHA

W przeszłości wiele organizacji i firm poniosło duże straty, takie jak naruszenia danych, ataki spamowe itp., ponieważ nie posiadały formularzy CAPTCHA na swoich stronach internetowych. Zdecydowanie zaleca się dodanie CAPTCHA do swojej witryny, ponieważ dodaje warstwę bezpieczeństwa, która chroni witrynę przed cyberprzestępcami.

Google uruchomił również bezpłatną usługę o nazwie „reCAPTCHA”, która pomaga w ochronie witryn przed spamem i nadużyciami. CAPTCHA i reCAPTCHA wydają się podobne, ale to nie to samo. Czasami kody CAPTCHA są dla wielu użytkowników frustrujące i trudne do zrozumienia. Chociaż istnieje ważny powód, dla którego są one trudne.

Udział Udział Ćwierkać E-mail Jak działają CAPTCHA i dlaczego są tak trudne?

CAPTCHA i reCAPTCHA zapobiegają spamowi. Jak oni pracują? I dlaczego uważasz, że CAPTCHA jest tak trudne do rozwiązania?

Czytaj dalej Powiązane tematy
  • Programowanie
  • HTML
  • JavaScript
  • CSS
O autorze Yuvraj Chandra(60 opublikowanych artykułów)

Yuvraj jest studentem informatyki na Uniwersytecie w Delhi w Indiach. Jest pasjonatem Full Stack Web Development. Kiedy nie pisze, bada głębię różnych technologii.

Więcej od Yuvraja Chandra

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować