आजकल कैप्चा वेबसाइट सुरक्षा का एक अभिन्न अंग हैं। हर दिन लाखों कैप्चा परीक्षण ऑनलाइन पूरे किए जाते हैं।

यदि आपने अपनी वेबसाइट पर कैप्चा सत्यापन लागू नहीं किया है, तो यह आपके लिए एक बड़ी समस्या पैदा कर सकता है, जो आपको स्पैमर के लक्ष्य के रूप में स्थापित कर सकता है।

---

---

यहां वह सब कुछ है जो आपको कैप्चा के बारे में जानने की जरूरत है और आप उन्हें HTML, CSS और जावास्क्रिप्ट का उपयोग करके आसानी से अपनी वेबसाइट पर कैसे लागू कर सकते हैं।

कैप्चा क्या है?

CAPTCHA का अर्थ है 'कंप्यूटर और इंसानों को अलग बताने के लिए पूरी तरह से स्वचालित सार्वजनिक ट्यूरिंग परीक्षण।' यह शब्द 2003 में लुइस वॉन आह, मैनुअल ब्लम, निकोलस जे। हॉपर और जॉन लैंगफोर्ड द्वारा गढ़ा गया था। यह एक प्रकार की चुनौती-प्रतिक्रिया परीक्षण है जिसका उपयोग यह निर्धारित करने के लिए किया जाता है कि उपयोगकर्ता मानव है या नहीं।

कैप्चा ऐसी चुनौतियाँ प्रदान करके वेबसाइटों को सुरक्षा प्रदान करते हैं जो बॉट्स के लिए प्रदर्शन करना मुश्किल है लेकिन मनुष्यों के लिए अपेक्षाकृत आसान है। उदाहरण के लिए, कई छवियों के सेट से कार की सभी छवियों की पहचान करना बॉट्स के लिए मुश्किल है लेकिन मानव आंखों के लिए काफी आसान है।

कैप्चा का विचार ट्यूरिंग टेस्ट से उत्पन्न हुआ है। ट्यूरिंग टेस्ट यह जांचने का एक तरीका है कि मशीन इंसानों की तरह सोच सकती है या नहीं। दिलचस्प बात यह है कि कैप्चा टेस्ट को 'रिवर्स ट्यूरिंग टेस्ट' कहा जा सकता है क्योंकि इस मामले में कंप्यूटर इंसानों को चुनौती देने वाला टेस्ट बनाता है।

आपकी वेबसाइट को कैप्चा सत्यापन की आवश्यकता क्यों है?

कैप्चा का उपयोग मुख्य रूप से बॉट्स को स्पैम और अन्य हानिकारक सामग्री के साथ स्वचालित रूप से फ़ॉर्म सबमिट करने से रोकने के लिए किया जाता है। यहां तक ​​कि गूगल जैसी कंपनियां भी इसका इस्तेमाल अपने सिस्टम को स्पैम अटैक से बचाने के लिए करती हैं। कैप्चा सत्यापन से आपकी वेबसाइट को लाभ होने के कुछ कारण यहां दिए गए हैं:

---

---

• कैप्चा फर्जी अकाउंट बनाकर हैकर्स और बॉट्स को रजिस्ट्रेशन सिस्टम को स्पैम करने से रोकने में मदद करते हैं। यदि उन्हें रोका नहीं गया, तो वे उन खातों का उपयोग नापाक उद्देश्यों के लिए कर सकते हैं।
• CAPTCHA आपकी वेबसाइट से क्रूर बल लॉग-इन हमलों को मना कर सकते हैं जिनका उपयोग हैकर्स हजारों पासवर्ड का उपयोग करके लॉग इन करने का प्रयास करने के लिए करते हैं।
• कैप्चा झूठी टिप्पणियां प्रदान करके बॉट को समीक्षा अनुभाग को स्पैम करने से प्रतिबंधित कर सकते हैं।
• कैप्चा टिकट मुद्रास्फीति को रोकने में सहायता करते हैं क्योंकि कुछ लोग पुनर्विक्रय के लिए बड़ी संख्या में टिकट खरीदते हैं। कैप्चा मुफ्त घटनाओं के झूठे पंजीकरण को भी रोक सकता है।
• कैप्चा साइबर बदमाशों को नकली टिप्पणियों और हानिकारक वेबसाइटों के लिंक वाले ब्लॉग को स्पैम करने से प्रतिबंधित कर सकते हैं।

और भी कई कारण हैं जो आपकी वेबसाइट में CAPTCHA सत्यापन को एकीकृत करने का समर्थन करते हैं। आप निम्न कोड के साथ ऐसा कर सकते हैं।

फेसबुक हैक होने पर क्या करें?

एचटीएमएल कैप्चा कोड

HTML, या हाइपरटेक्स्ट मार्कअप लैंग्वेज, एक वेब पेज की संरचना का वर्णन करती है। अपने कैप्चा सत्यापन फॉर्म की संरचना के लिए निम्नलिखित HTML कोड का उपयोग करें:

---

---










captcha text



Refresh








इस कोड में मुख्य रूप से 7 तत्व होते हैं:

• : इस तत्व का उपयोग कैप्चा फॉर्म के शीर्षक को प्रदर्शित करने के लिए किया जाता है।

• : इस तत्व का उपयोग कैप्चा टेक्स्ट को प्रदर्शित करने के लिए किया जाता है।
• - इस तत्व का उपयोग कैप्चा टाइप करने के लिए एक इनपुट बॉक्स बनाने के लिए किया जाता है।
• : यह बटन फॉर्म को सबमिट करता है और जांचता है कि कैप्चा और टाइप किया गया टेक्स्ट समान है या नहीं।
• : इस बटन का उपयोग कैप्चा को रिफ्रेश करने के लिए किया जाता है।
• : इस तत्व का उपयोग दर्ज किए गए टेक्स्ट के अनुसार आउटपुट प्रदर्शित करने के लिए किया जाता है।
• : यह मूल तत्व है जिसमें अन्य सभी तत्व शामिल हैं।

CSS और JavaScript फ़ाइलें इस HTML पृष्ठ से के माध्यम से जुड़ी हुई हैं तथा तत्व क्रमशः। आपको जोड़ना होगा संपर्क के अंदर टैग करें सिर टैग और लिपि के अंत में टैग करें तन .

आप इस कोड को अपनी वेबसाइट के मौजूदा रूपों के साथ भी एकीकृत कर सकते हैं।

सम्बंधित: HTML Essentials चीट शीट: टैग, विशेषताएँ, और बहुत कुछ

सीएसएस कैप्चा कोड

CSS, या कैस्केडिंग स्टाइल शीट्स, का उपयोग HTML तत्वों को स्टाइल करने के लिए किया जाता है। उपरोक्त HTML तत्वों को स्टाइल करने के लिए निम्नलिखित CSS कोड का उपयोग करें:

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

अपनी पसंद के अनुसार इस कोड से CSS गुण जोड़ें या निकालें। आप प्रपत्र कंटेनर का उपयोग करके एक सुंदर रूप भी दे सकते हैं CSS बॉक्स-छाया गुण .

जावास्क्रिप्ट कैप्चा कोड

जावास्क्रिप्ट अन्यथा स्थिर वेबपेज में कार्यक्षमता जोड़ने के लिए उपयोग किया जाता है। कैप्चा सत्यापन फॉर्म में पूर्ण कार्यक्षमता जोड़ने के लिए निम्नलिखित कोड का उपयोग करें:

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


अब आपके पास पूरी तरह कार्यात्मक कैप्चा सत्यापन फॉर्म है! यदि आप पूरा कोड देखना चाहते हैं, तो आप क्लोन कर सकते हैं इस कैप्चा-सत्यापनकर्ता परियोजना का गिटहब भंडार . रिपॉजिटरी को क्लोन करने के बाद, HTML फ़ाइल को निष्पादित करें और आपको निम्न आउटपुट मिलेगा:

स्मार्ट टीवी क्या है और यह क्या करता है

जब आप इनपुट बॉक्स में सही कैप्चा कोड दर्ज करते हैं, तो निम्न आउटपुट प्रदर्शित होगा:

जब आप इनपुट बॉक्स में कोई गलत कैप्चा कोड दर्ज करते हैं, तो निम्न आउटपुट प्रदर्शित होगा:

कैप्चा के साथ अपनी वेबसाइट को सुरक्षित बनाएं

अतीत में, कई संगठनों और व्यवसायों को अपनी वेबसाइटों पर कैप्चा फॉर्म नहीं होने के परिणामस्वरूप डेटा उल्लंघनों, स्पैम हमलों आदि जैसे भारी नुकसान हुए हैं। अपनी वेबसाइट में कैप्चा जोड़ने की अत्यधिक अनुशंसा की जाती है, क्योंकि यह वेबसाइट को साइबर अपराधियों से बचाने के लिए एक सुरक्षा परत जोड़ती है।

Google ने 'reCAPTCHA' नाम से एक मुफ्त सेवा भी शुरू की है जो वेबसाइटों को स्पैम और दुरुपयोग से बचाने में मदद करती है। CAPTCHA और reCAPTCHA एक जैसे लगते हैं, लेकिन वे बिल्कुल एक जैसे नहीं हैं। कभी-कभी कैप्चा कई उपयोगकर्ताओं के लिए निराशाजनक और समझने में मुश्किल महसूस करते हैं। हालाँकि, इसका एक महत्वपूर्ण कारण है कि उन्हें कठिन क्यों बनाया गया है।

साझा करना साझा करना कलरव ईमेल कैप्चा कैसे काम करते हैं और वे इतने कठिन क्यों हैं?

कैप्चा और रीकैप्चा स्पैम को रोकते हैं। वे कैसे काम करते हैं? और आपको CAPTCHAs को हल करना इतना कठिन क्यों लगता है?

आगे पढ़िए संबंधित विषय

• प्रोग्रामिंग
• एचटीएमएल
• जावास्क्रिप्ट
• सीएसएस

लेखक के बारे में युवराज चंद्र(60 लेख प्रकाशित)

युवराज दिल्ली विश्वविद्यालय, भारत में कंप्यूटर विज्ञान के स्नातक छात्र हैं। उन्हें फुल स्टैक वेब डेवलपमेंट का शौक है। जब वह नहीं लिख रहा होता है, तो वह विभिन्न तकनीकों की गहराई की खोज कर रहा होता है।

युवराज चंद्र की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें