- Katılım
- 7 May 2010
- Konular
- 10,579
- Mesajlar
- 58,614
- Çözüm
- 219
- Online süresi
- 10mo 29d
- Reaksiyon Skoru
- 16,721
- Altın Konu
- 444
- TM Yaşı
- 16 Yıl 1 Ay 4 Gün
- Başarım Puanı
- 691
- MmoLira
- 19,925
- DevLira
- 601
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!
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.
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.
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:
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.
- Katılım
- 3 Ara 2017
- Konular
- 2,165
- Mesajlar
- 11,970
- Çözüm
- 87
- Online süresi
- 1y 2mo
- Reaksiyon Skoru
- 18,274
- Altın Konu
- 91
- TM Yaşı
- 8 Yıl 6 Ay 7 Gün
- Başarım Puanı
- 506
- Yaş
- 28
- MmoLira
- 119,538
- DevLira
- 176
Eline sağlık paylaşım için teşekkürler
- Katılım
- 7 May 2010
- Konular
- 10,579
- Mesajlar
- 58,614
- Çözüm
- 219
- Online süresi
- 10mo 29d
- Reaksiyon Skoru
- 16,721
- Altın Konu
- 444
- TM Yaşı
- 16 Yıl 1 Ay 4 Gün
- Başarım Puanı
- 691
- MmoLira
- 19,925
- DevLira
- 601
Rica ederim
Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)
Benzer konular
Altın Konu
CSS Görüntüleme Özelliği