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. 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 zor ama 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 otomatik olarak spam ve diğer zararlı içerikler içeren formları 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 satmak için çok sayıda bilet satın aldığından, bilet enflasyonunun önlenmesine 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:

HTML, CSS ve JavaScript Kullanan Captcha Doğrulayıcı



captcha metni




Yenile

Bu kod esas olarak 7 unsurdan 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 düğme 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.
• : Bu eleman, girilen metne göre çıktıyı görüntülemek için kullanılır.
• : Bu, diğer tüm öğeleri içeren ana öğedir.

CSS ve JavaScript dosyaları bu HTML sayfasına şu yolla bağlanır: ve sırasıyla elemanlar. Eklemelisiniz bağlantı içindeki etiket baş etiket ve senaryo sonundaki etiket vücut.

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

İlişkili: HTML Essentials Hile Sayfası: Etiketler, Nitelikler ve Daha Fazlası

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:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
vücut {
arka plan rengi: # 232331;
yazı tipi ailesi: 'Roboto', sans-serif;
}
#captchaBackground {
yükseklik: 200px;
genişlik: 250px;
arka plan rengi: # 2d3748;
ekran: esnek;
hizalama öğeleri: merkez;
haklı içerik: merkez;
esnek yön: sütun;
}
#captchaHeading {
Beyaz renk;
}
#captcha {
kenar boşluğu alt: 1em;
yazı tipi boyutu: 30px;
harf aralığı: 3px;
renk: # 08e5ff;
}
.center {
ekran: esnek;
esnek yön: sütun;
hizalama öğeleri: merkez;
}
#submitButton {
kenar boşluğu: 2em;
kenar boşluğu alt: 2em;
arka plan rengi: # 08e5ff;
sınır: 0px;
yazı tipi ağırlığı: kalın;
}
#refreshButton {
arka plan rengi: # 08e5ff;
sınır: 0px;
yazı tipi ağırlığı: kalın;
}
#Metin kutusu {
yükseklik: 25px;
}
.Yanlış Captcha {
renk: # FF0000;
}
.correctCaptcha {
renk: # 7FFF00;
}

Tercihinize göre bu koddan CSS özelliklerini ekleyin veya kaldırın. Ayrıca, form kapsayıcısına şık bir görünüm de verebilirsiniz. CSS kutu-gölge özelliği.

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:

// document.querySelector (), kimliğini kullanarak belgeden bir öğe seçmek için kullanılır
let captchaText = document.querySelector ('# captcha');
let userText = document.querySelector ('# textBox');
let submitButton = document.querySelector ('# submitButton');
let output = document.querySelector ('# output');
yenilemeButton = document.querySelector ('# refreshButton');
// alphaNums, CAPTCHA'yı oluşturmak istediğiniz karakterleri içerir
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 = [];
// Bu döngü, alphaNums kullanarak 7 karakterden oluşan rastgele bir dizi oluşturur
// Ayrıca bu dize bir CAPTCHA olarak görüntülenir
için (i = 1 olsun; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Bu olay dinleyicisi, kullanıcı "Enter" düğmesine her bastığında uyarılır
// "Doğru!" veya "Yanlış, lütfen tekrar deneyin" mesajı
// giriş metnini CAPTCHA ile doğruladıktan sonra görüntülenir
userText.addEventListener ('keyup', function (e) {
// "Enter" Düğmesinin Anahtar Kodu Değeri 13'tür
eğer (e.keyCode 13) {
eğer (userText.value captchaText.innerHTML) {
output.classList.add ("rightCaptcha");
output.innerHTML = "Doğru!";
} Başka {
output.classList.add ("wrongCaptcha");
output.innerHTML = "Yanlış, lütfen tekrar deneyin";
}
}
});
// Bu olay dinleyicisi, kullanıcı "Gönder" düğmesini her tıkladığında uyarılır
// "Doğru!" veya "Yanlış, lütfen tekrar deneyin" mesajı
// giriş metnini CAPTCHA ile doğruladıktan sonra görüntülenir
submitButton.addEventListener ('click', function () {
eğer (userText.value captchaText.innerHTML) {
output.classList.add ("rightCaptcha");
output.innerHTML = "Doğru!";
} Başka {
output.classList.add ("wrongCaptcha");
output.innerHTML = "Yanlış, lütfen tekrar deneyin";
}
});
// Bu olay dinleyicisi, kullanıcı "Yenile" düğmesine her bastığında uyarılır
// Yeni bir rastgele CAPTCHA oluşturulur ve kullanıcı "Yenile" düğmesini tıkladıktan sonra görüntülenir
yenilemeButton.addEventListener ('click', function () {
userText.value = "";
yenilemeArr = [];
for (j = 1 olsun; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = renewArr.join ('');
output.innerHTML = "";
});

Artık tamamen işlevsel bir CAPTCHA doğrulama formunuz var! Kodun tamamına bir göz atmak isterseniz, Bu CAPTCHA-Doğrulayıcı Projesinin GitHub deposu. 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 veri ihlalleri, spam saldırıları vb. Gibi ağır kayıplar yaşadı. web sitelerinde CAPTCHA formlarının bulunmamasının bir sonucu olarak. 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.

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

Yazar hakkında