Lumikha ng isang CAPTCHA Validation Form Gamit ang HTML, CSS at JavaScript

Ngayon ang mga CAPTCHA ay isang mahalagang bahagi ng seguridad ng website. Milyun-milyong mga pagsubok sa CAPTCHA ang nakumpleto sa online araw-araw.

Kung hindi mo naipatupad ang pagpapatunay ng CAPTCHA sa iyong website, maaari itong lumikha ng isang malaking problema para sa iyo, na maitatakda ka bilang isang target sa mga spammer.

Narito ang lahat ng kailangan mong malaman tungkol sa CAPTCHAs at kung paano mo madaling maisasagawa ang mga ito sa iyong website gamit ang HTML, CSS, at JavaScript.

Ano ang CAPTCHA?

Ang CAPTCHA ay nangangahulugang 'Ganap na Automated na pagsubok sa Public Turing upang masabi sa Mga Computer at Tao.' Ang katagang ito ay nilikha noong 2003 nina Luis von Ahn, Manuel Blum, Nicholas J. Hopper, at John Langford. Ito ay isang uri ng pagsubok na hamon-tugon na ginagamit upang matukoy kung ang gumagamit ay tao o hindi.

Ang mga CAPTCHA ay nagdaragdag ng seguridad sa mga website sa pamamagitan ng pagbibigay ng mga hamon na mahirap gawin ng mga bot ngunit medyo madali para sa mga tao. Halimbawa, ang pagkilala sa lahat ng mga imahe ng isang kotse mula sa isang hanay ng maraming mga imahe ay mahirap para sa mga bot ngunit sapat na simple para sa mga mata ng tao.

Ang ideya ng CAPTCHA ay nagmula sa Turing Test. Ang Turing Test ay isang pamamaraan upang subukan kung ang isang makina ay maaaring mag-isip tulad ng isang tao o hindi. Kapansin-pansin, ang isang pagsubok sa CAPTCHA ay maaaring tawaging isang 'reverse Turing Test' dahil sa kasong ito, lumilikha ang computer ng pagsubok na hamon sa mga tao.

Bakit Kailangan ng Iyong Website ang Pagpapatunay ng CAPTCHA?

Ang mga CAPTCHA ay pangunahing ginagamit upang maiwasan ang mga bot mula sa awtomatikong pagsumite ng mga form sa pamamagitan ng spam at iba pang nakakapinsalang nilalaman. Kahit na ang mga kumpanya tulad ng Google ay ginagamit ito upang maiwasan ang kanilang system mula sa mga pag-atake ng spam. Narito ang ilan sa mga kadahilanan kung bakit ang iyong website ay nakatayo upang makinabang mula sa pagpapatunay ng CAPTCHA:

Tumutulong ang mga CAPTCHA upang maiwasan ang mga hacker at bot mula sa pag-spam ng mga system sa pagpaparehistro sa pamamagitan ng paglikha ng mga pekeng account. Kung hindi sila pinipigilan, maaari nilang gamitin ang mga account na iyon para sa masamang hangarin.
Maaaring pagbawalan ng mga CAPTCHA ang brute force pag-log in na mga pag-atake mula sa iyong website na ginagamit ng mga hacker upang subukang mag-log in gamit ang libu-libong mga password.
Maaaring paghigpitan ng mga CAPTCHA ang mga bot mula sa pag-spam sa seksyon ng pagsusuri sa pamamagitan ng pagbibigay ng maling mga komento.
Ang CAPTCHAs ay tumutulong sa pag-iwas sa inflation inflation habang ang ilang mga tao ay bibili ng isang malaking bilang ng mga tiket para sa muling pagbebenta. Maaari ring pigilan ng CAPTCHA ang mga maling pagrehistro sa mga libreng kaganapan.
Maaaring paghigpitan ng CAPTCHA ang mga cyber crook mula sa pag-spam ng mga blog na may mga nakakatawang komento at link sa mga mapanganib na website.

Marami pang mga kadahilanan na sumusuporta sa pagsasama ng pagpapatotoo ng CAPTCHA sa iyong website. Maaari mo itong gawin sa sumusunod na code.

ilipat ang file mula sa isang google drive papunta sa isa pa

HTML CAPTCHA Code

Inilalarawan ng HTML, o HyperText Markup Language, ang istraktura ng isang web page. Gamitin ang sumusunod na HTML Code upang mabuo ang iyong Form sa Pagpapatunay ng CAPTCHA:

  
  
  
  
  
  
  
  
  
 captcha text  
  
  
  
 Refresh

Pangunahing binubuo ang code na ito ng 7 mga elemento:

: Ang elementong ito ay ginagamit upang ipakita ang heading ng form na CAPTCHA.
: Ginagamit ang elementong ito upang maipakita ang teksto ng CAPTCHA.
- Ginagamit ang elementong ito upang lumikha ng isang kahon ng pag-input upang mai-type ang CAPTCHA.
: Ang pindutang ito ay nagsusumite ng form at suriin kung ang CAPTCHA at ang na-type na teksto ay pareho o hindi.
: Ginagamit ang pindutan na ito upang i-refresh ang CAPTCHA.
: Ang elementong ito ay ginagamit upang ipakita ang output ayon sa ipinasok na teksto.
: Ito ang sangkap ng magulang na naglalaman ng lahat ng iba pang mga elemento.

Ang mga file ng CSS at JavaScript ay naka-link sa pahinang HTML sa pamamagitan ng at elemento ayon sa pagkakabanggit. Dapat mong idagdag ang link tag sa loob ng ulo tag at iskrip tag sa dulo ng katawan .

Maaari mo ring isama ang code na ito sa mga umiiral na mga form ng iyong website.

Kaugnay: Ang HTML Essentials Cheat Sheet: Mga Tags, Katangian, at Higit Pa

Code ng CSS CAPTCHA

Ang CSS, o Cascading Style Sheets, ay ginagamit upang mai-istilo ang mga elemento ng HTML. Gamitin ang sumusunod na CSS code upang i-istilo ang mga elemento sa itaas ng 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;  
}

Magdagdag o mag-alis ng mga pag-aari ng CSS mula sa code na ito alinsunod sa iyong kagustuhan. Maaari ka ring magbigay ng isang matikas na hitsura sa lalagyan ng form gamit ang Pag-aari ng box-shadow ng CSS .

Code ng JavaScript CAPTCHA

JavaScript ay ginagamit upang magdagdag ng pag-andar sa isang hindi static na webpage. Gamitin ang sumusunod na code upang magdagdag ng kumpletong pag-andar sa form ng pagpapatunay ng 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 = '';  
});

Ngayon mayroon kang isang ganap na gumaganang form ng pagpapatunay ng CAPTCHA! Kung nais mong tingnan ang kumpletong code, maaari mong i-clone ang GitHub repository ng CAPTCHA-Validator Project na ito . Matapos i-clone ang repository, ipatupad ang HTML file at makukuha mo ang sumusunod na output:

hindi gumagana ang mga keyboard ng apple wired keyboard

Kapag naipasok mo ang tamang CAPTCHA code sa input box, ipapakita ang sumusunod na output:

Kapag nagpasok ka ng anumang maling CAPTCHA code sa input box, ipapakita ang sumusunod na output:

Gawing Secure ang Iyong Website Sa Mga CAPTCHA

Noong nakaraan, maraming mga organisasyon at negosyo ang nagdusa ng matinding pagkalugi tulad ng mga paglabag sa data, pag-atake ng spam, atbp bilang resulta ng walang mga CAPTCHA form sa kanilang mga website. Masidhing inirerekumenda na idagdag ang CAPTCHA sa iyong website, dahil nagdaragdag ito ng isang layer ng seguridad upang maiwasan ang website mula sa mga cybercriminal.

Naglunsad din ang Google ng isang libreng serbisyo na tinatawag na 'reCAPTCHA' na tumutulong sa pagprotekta sa mga website mula sa spam at pang-aabuso. Ang CAPTCHA at reCAPTCHA ay tila magkatulad, ngunit hindi sila magkatulad na bagay. Minsan ang mga CAPTCHA ay nakakadismaya at mahirap maintindihan para sa maraming mga gumagamit. Bagaman, mayroong isang mahalagang dahilan kung bakit sila naging mahirap.

Magbahagi Magbahagi Mag-tweet Email Paano Gumagana ang CAPTCHAs at Bakit Napakahirap Nila?

Pinipigilan ng mga CAPTCHA at reCAPTCHA ang spam. Paano sila gumagana? At bakit nakita mong napakahirap malutas ang mga CAPTCHA?

Basahin Susunod Mga Kaugnay na Paksa

Programming
HTML
JavaScript
CSS

Tungkol sa May-akda Yuvraj Chandra(60 Mga Artikulo Na-publish)

Si Yuvraj ay isang undergraduate na mag-aaral sa Computer Science sa University of Delhi, India. Masigasig siya sa Full Stack Web Development. Kapag hindi siya nagsusulat, sinisiyasat niya ang lalim ng iba't ibang mga teknolohiya.

Higit pa Mula kay Yuvraj Chandra

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe