HTML, CSS ve JavaScript Kullanarak CAPTCHA Doğrulama Formu Oluşturun

HTML, CSS ve JavaScript Kullanarak CAPTCHA Doğrulama Formu Oluşturun

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 tamamlanır.





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



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





CAPTCHA Nedir?

CAPTCHA, 'Bilgisayarlara ve İnsanlara Ayrı Ayrı Anlatmak 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 yapılmıştır. Kullanıcının insan olup olmadığını belirlemek için kullanılan bir tür sorgulama-yanıt testidir.

CAPTCHA'lar, botların gerçekleştirmesi zor, ancak insanlar için nispeten kolay zorluklar sağlayarak web sitelerine güvenlik katar. Örneğin, bir arabanın tüm görüntülerini bir dizi çoklu görüntüden tanımlamak, botlar için zor, 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 eden 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 çoğunlukla botların spam ve diğer zararlı içerik içeren 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 faydalanması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. Engellenmezse, bu hesapları hain amaçlarla kullanabilirler.
  • CAPTCHA'lar, bilgisayar korsanlarının binlerce parola kullanarak oturum açmayı denemek için kullandığı web sitenizden kaba kuvvetle oturum açma saldırılarını yasaklayabilir.
  • CAPTCHA'lar, yanlış yorumlar sağlayarak botların inceleme bölümüne spam göndermesini kısıtlayabilir.
  • CAPTCHA'lar, bazı insanlar yeniden satmak için çok sayıda bilet satın aldığından, bilet enflasyonunun önlenmesine yardımcı olur. CAPTCHA, ücretsiz etkinliklere yanlış kayıt yapılmasını bile önleyebilir.
  • CAPTCHA'lar, siber dolandırıcıların bloglara tehlikeli yorumlar ve zararlı web sitelerine bağlantılar içeren spam göndermelerini kısıtlayabilir.

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

xbox one x vs xbox serisi x

HTML CAPTCHA Kodu

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












captcha text



Refresh






Bu kod esas olarak 7 öğeden oluşur:

  • : Bu öğe, CAPTCHA formunun başlığını görüntülemek için kullanılır.

  • : Bu öğe, CAPTCHA metnini görüntülemek için kullanılır.
  • - Bu öğe, CAPTCHA'yı yazmak için bir giriş kutusu oluşturmak için kullanılır.
  • : Bu buton formu gönderir ve CAPTCHA ile yazılan metnin aynı olup olmadığını kontrol eder.
  • : Bu düğme CAPTCHA'yı yenilemek için kullanılır.
  • : Girilen metne göre çıktıyı görüntülemek için bu eleman kullanılır.
  • : Bu, diğer tüm öğeleri içeren ana öğedir.

CSS ve JavaScript dosyaları, bu HTML sayfasına aşağıdakiler aracılığıyla bağlanır: ve elemanları sırasıyla. Eklemelisiniz bağlantı içindeki etiket kafa etiket ve senaryo etiketin sonunda vücut .

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

İlgili: HTML Essentials Hile Sayfası: Etiketler, Nitelikler ve Daha Fazlası



CSS CAPTCHA Kodu

CSS veya Basamaklı Stil Sayfaları, HTML öğelerine stil vermek için kullanılır. Yukarıdaki HTML öğelerine stil vermek için aşağıdaki CSS kodunu kullanın:

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

Tercihinize göre bu koddan CSS özellikleri ekleyin veya kaldırın. Ayrıca form kabına şık bir görünüm kazandırabilirsiniz. CSS kutu gölge özelliği .

JavaScript CAPTCHA Kodu

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

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

Artık tamamen işlevsel bir CAPTCHA doğrulama formunuz var! Kodun tamamına bir göz atmak isterseniz, kopyalayabilirsiniz. Bu CAPTCHA-Validator Projesinin GitHub deposu . Depoyu klonladıktan sonra HTML dosyasını çalıştırın ve aşağıdaki çıktıyı alacaksınız:

facebook seni takip edenleri nasıl görebilirim

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'larla Web Sitenizi Güvenli Hale Getirin

Geçmişte birçok kurum ve işletme, web sitelerinde CAPTCHA formlarının bulunmaması nedeniyle veri ihlalleri, spam saldırıları vb. gibi ağır kayıplar yaşadı. Web sitesini siber suçlulardan korumak için bir güvenlik katmanı eklediğinden, web sitenize CAPTCHA eklemeniz önemle 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 tam olarak aynı şey değiller. Bazen CAPTCHA'lar birçok kullanıcı için sinir bozucu ve anlaşılması zor geliyor. Yine de, neden zorlaştırıldıklarına dair önemli bir sebep var.

Paylaş Paylaş Cıvıldamak E-posta CAPTCHA'lar Nasıl Çalışır ve Neden Bu Kadar Zor?

CAPTCHA'lar ve reCAPTCHA'lar istenmeyen postaları önler. Nasıl çalışırlar? Ve neden CAPTCHA'ları çözmeyi bu kadar zor buluyorsunuz?

Sonrakini Oku İlgili konular
  • Programlama
  • HTML
  • JavaScript
  • CSS
Yazar hakkında Yuvraj Chandra(60 Makale Yayımlandı)

Yuvraj, Hindistan Delhi Üniversitesi'nde Bilgisayar Bilimleri lisans öğrencisidir. Full Stack Web Geliştirme konusunda tutkulu. Yazmadığı zamanlarda farklı teknolojilerin derinliğini keşfediyor.

Yuvraj Chandra'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın