Altın Konu HTML, CSS ve JavaScript Kullanarak CAPTCHA Doğrulama Formu Oluşturun

Replicant · 29 Nis 2021

Merhaba, günümüzde CAPTCHA'lar web sitesi güvenliğinin ayrılmaz bir parçasıdır. Her gün milyonlarca CAPTCHA testi çevrimiçi olarak tamamlanmaktadır.

Web sitenize CAPTCHA doğrulamasını uygulamadıysanız, sizi spam gönderenlerin hedefi olarak belirleyerek sizin için büyük bir sorun yaratabilir.

İşte CAPTCHA'lar hakkında bilmeniz gereken her şey ve bunları HTML, CSS ve JavaScript kullanarak web sitenize nasıl kolayca uygulayabileceğiniz.

CAPTCHA nedir?

CAPTCHA, "Bilgisayarları ve İnsanları Ayırmak için Tamamen Otomatikleştirilmiş Genel Turing testi" anlamına gelir. Bu terim, 2003 yılında Luis von Ahn, Manuel Blum, Nicholas J. Hopper ve John Langford tarafından icat edildi. Kullanıcının insan olup olmadığını belirlemek için kullanılan bir tür meydan okuma-yanıt testi.

CAPTCHA'lar, botların gerçekleştirmesi zor ancak insanlar için nispeten kolay olan zorluklar sağlayarak web sitelerine güvenlik ekler. Örneğin, bir arabanın tüm görüntülerini bir dizi birden fazla görüntüden tanımlamak, botlar için zordur, ancak insan gözü için yeterince basittir.

CAPTCHA fikri, Turing Testinden kaynaklanmaktadır. Turing Testi, bir makinenin insan gibi düşünüp düşünemeyeceğini test etmek için kullanılan bir yöntemdir. İlginç bir şekilde, bir CAPTCHA testi "ters Turing Testi" olarak adlandırılabilir çünkü bu durumda bilgisayar, insanlara meydan okuyan testi oluşturur.

Web Sitenizin Neden CAPTCHA Doğrulamasına İhtiyacı Var?

CAPTCHA'lar temel olarak botların spam ve diğer zararlı içerikli formları otomatik olarak göndermesini önlemek için kullanılır. Google gibi şirketler bile sistemlerini spam saldırılarından korumak için kullanıyor. Web sitenizin CAPTCHA doğrulamasından yararlanmasının nedenlerinden bazıları şunlardır:

CAPTCHA'lar, sahte hesaplar oluşturarak bilgisayar korsanlarının ve botların kayıt sistemlerine spam göndermesini önlemeye yardımcı olur. Engellenmezlerse, bu hesapları kötü amaçlarla kullanabilirler.
CAPTCHA'lar, web sitenizden bilgisayar korsanlarının binlerce parola kullanarak giriş yapmayı denemek için kullandıkları kaba kuvvet giriş saldırılarını yasaklayabilir.
CAPTCHA'lar, yanlış yorumlar sağlayarak botların inceleme bölümünde spam göndermesini kısıtlayabilir.
CAPTCHA'lar, bazı insanlar yeniden satış için çok sayıda bilet satın aldığından bilet enflasyonunu önlemeye yardımcı olur. CAPTCHA, ücretsiz etkinliklere yanlış kayıtları bile önleyebilir.
CAPTCHA'lar, siber dolandırıcıların tehlikeli yorumlar ve zararlı web sitelerine bağlantılar içeren spam bloglarını kısıtlayabilir.

CAPTCHA doğrulamasını web sitenize entegre etmeyi destekleyen daha birçok neden vardır. Bunu aşağıdaki kodla yapabilirsiniz.

HTML CAPTCHA Kodu

HTML veya HyperText Markup Language, bir web sayfasının yapısını açıklar. CAPTCHA Doğrulama Formunuzu yapılandırmak için aşağıdaki HTML Kodunu kullanın:

Kod:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="center"> <h1 id="captchaHeading">Captcha Validator Using HTML, CSS and JavaScript</h1> <div id="captchaBackground"> <span id="captcha">captcha text</span> <input id="textBox" type="text" name="text"> <div id="buttons"> <input id="submitButton" type="submit"> <button id="refreshButton" type="submit">Refresh</button> </div> <span id="output"></span> </div> </div> <script src="script.js"></script> </body> </html>

Bu kod esas olarak 7 unsurdan oluşur:

<h1 id = "captchaHeading"> <h1> : Bu öğe, CAPTCHA formunun başlığını görüntülemek için kullanılır.
<span id = "captcha"> </span> : Bu öğe, CAPTCHA metnini görüntülemek için kullanılır.
<input id = "textBox" type = "text" name = "text"> - Bu öğe, CAPTCHA'yı yazmak için bir giriş kutusu oluşturmak için kullanılır.
<input id = "submitButton" type = "submit"> : Bu düğme formu gönderir ve CAPTCHA ile yazılan metnin aynı olup olmadığını kontrol eder.
<button id = "renewButton" type = "submit"> </button> : Bu düğme CAPTCHA'yı yenilemek için kullanılır.
<span id = "output"> </span> : Bu öğe, çıktıyı girilen metne göre görüntülemek için kullanılır.
<div class = "center"> </div> : Bu, diğer tüm öğeleri içeren ana öğedir.

CSS ve JavaScript dosyaları, bu HTML sayfasına <link rel = "stylesheet" type = "text / css" href = "styles.css"> ve <script src = "script.js"> </script> öğeleriyle bağlanır sırasıyla. Bağlantı etiketini head etiketinin içine ve komut dosyası etiketini gövdenin sonuna eklemelisiniz .

Bu kodu web sitenizin mevcut formlarıyla da entegre edebilirsiniz.

CSS CAPTCHA Kodu

CSS veya Basamaklı Stil Sayfaları, HTML öğelerini biçimlendirmek için kullanılır. Yukarıdaki HTML öğelerinin stilini belirlemek için aşağıdaki CSS kodunu kullanın:

Kod:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); body { background-color: #232331; font-family: 'Roboto', sans-serif; } #captchaBackground { height: 200px; width: 250px; background-color: #2d3748; display: flex; align-items: center; justify-content: center; flex-direction: column; } #captchaHeading { color: white; } #captcha { margin-bottom: 1em; font-size: 30px; letter-spacing: 3px; color: #08e5ff; } .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; }

Tercihinize göre bu koddan CSS özelliklerini ekleyin veya kaldırın. CSS box-shadow özelliğini kullanarak form kapsayıcısına zarif bir görünüm de verebilirsiniz .

JavaScript CAPTCHA Kodu

JavaScript , aksi halde statik bir web sayfasına işlevsellik eklemek için kullanılır. CAPTCHA doğrulama formuna tam işlevsellik eklemek için aşağıdaki kodu kullanın:

Kod:

// document.querySelector() is used to select an element from the document using its ID let captchaText = document.querySelector('#captcha'); 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)]); } captchaText.innerHTML = emptyArr.join(''); // 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 === captchaText.innerHTML) { 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 === captchaText.innerHTML) { 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)]); } captchaText.innerHTML = refreshArr.join(''); output.innerHTML = ""; });

Artık tamamen işlevsel bir CAPTCHA doğrulama formunuz var! Kodun tamamına bir göz atmak isterseniz,
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
klonlayabilirsiniz . Depoyu klonladıktan sonra, HTML dosyasını çalıştırın ve aşağıdaki çıktıyı alacaksınız:

Giriş kutusuna doğru CAPTCHA kodunu girdiğinizde, aşağıdaki çıktı görüntülenecektir:

Giriş kutusuna herhangi bir yanlış CAPTCHA kodu girdiğinizde, aşağıdaki çıktı görüntülenecektir:

CAPTCHA ile Web Sitenizi Güvenli Hale Getirin

Geçmişte, birçok kuruluş ve işletme, web sitelerinde CAPTCHA formlarının bulunmaması nedeniyle veri ihlalleri, spam saldırıları vb. Gibi ağır kayıplara maruz kalmıştır. Web sitesini siber suçlulardan korumak için bir güvenlik katmanı eklediği için web sitenize CAPTCHA eklemeniz şiddetle tavsiye edilir.

Google ayrıca, web sitelerini spam ve kötüye kullanımdan korumaya yardımcı olan "reCAPTCHA" adlı ücretsiz bir hizmet başlattı. CAPTCHA ve reCAPTCHA benzer görünüyor, ancak tamamen aynı şey değiller. Bazen CAPTCHA'lar çoğu kullanıcı için sinir bozucu ve anlaşılması zor gelebilir. Yine de, neden zorlaştırıldıklarının önemli bir nedeni var.