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

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

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

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

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

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

instagram viewer

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

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

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

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

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

HTML कैप्चा कोड

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









एचटीएमएल, सीएसएस और जावास्क्रिप्ट का उपयोग कर कैप्चा सत्यापनकर्ता




कैप्चा पाठ


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

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

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

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

सम्बंधित: HTML अनिवार्य धोखा शीट: टैग, विशेषताएँ, और अधिक

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

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

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
तन {
पृष्ठभूमि-रंग: # 232331;
फ़ॉन्ट-परिवार: 'रोबोटो', संस-सेरिफ़;
}
#captchaBackground {
ऊंचाई: 200 पीएक्स;
चौड़ाई: 250px;
पृष्ठभूमि-रंग: # 2d3748;
प्रदर्शन: फ्लेक्स;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
फ्लेक्स-दिशा: कॉलम;
}
# सप्तचर्चा {
सफ़ेद रंग;
}
# कपट {
मार्जिन-तल: 1em;
फ़ॉन्ट-आकार: 30 पीएक्स;
पत्र-रिक्ति: 3 पीएक्स;
रंग: # 08e5ff;
}
.सेंटर {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: कॉलम;
संरेखित-आइटम: केंद्र;
}
#जमा करने वाला बटन {
मार्जिन-टॉप: 2em;
मार्जिन-तल: 2em;
पृष्ठभूमि-रंग: # 08e5ff;
सीमा: 0px;
फोंट की मोटाई: बोल्ड;
}
#refreshButton {
पृष्ठभूमि-रंग: # 08e5ff;
सीमा: 0px;
फोंट की मोटाई: बोल्ड;
}
#पाठ बॉक्स {
ऊंचाई: 25 पीएक्स;
}
।गलत कैप्चा {
रंग: # FF0000;
}
.correct कपट:
रंग: # 7FFF00;
}

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

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

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

// document.querySelector () का उपयोग डॉक्यूमेंट से किसी तत्व को उसकी आईडी का चयन करने के लिए किया जाता है
आज्ञा देना captchaText = document.querySelector ('# कैप्चा');
userText = document.querySelector ('# textBox') होने दें;
let जमा करें Button = document.querySelector ('# submitButton');
आउटपुट दें = document.querySelector ('# आउटपुट');
let ताज़ा करेंButton = document.querySelector ('# ताज़ाबटन');
// अल्फ़ानाम में वे अक्षर हैं जिनके साथ आप कैप्चा बनाना चाहते हैं
आज्ञा देना ',' M ',' N ',' O ',' P ',' Q ',' R ',' S ',' T ',' U ',' V ',' W ',' X ',' 'Y', 'Z', 'a', 'b', 'c', 'डी', 'ई', 'एफ', 'जी', 'एच', 'आई', 'जे', 'के', 'एल', 'एम', 'एन', 'ओ', 'पी' ',' q ',' r ',' s ',' t ',' u ',' v ',' w ',' x ',' y ',' z ',' 0 ',' 1 ',' '2', '3', '4', '5', '6', '7', '8', '9'];
ख़ाली करना = फिरना [];
// यह लूप, अल्फ़ान्यूम्स का उपयोग करके 7 अक्षरों का एक यादृच्छिक स्ट्रिंग उत्पन्न करता है
// आगे इस स्ट्रिंग को कैप्चा के रूप में प्रदर्शित किया गया है
for (let i = 1; i <= 7; i ++) {
vacArr.push (अल्फ़ानाम्स [Math.floor (Math.random)) * alpNums.length)]);
}
captchaText.innerHTML = blankArr.join ('');
// जब भी उपयोगकर्ता "एंटर" बटन दबाता है तो यह ईवेंट श्रोता उत्तेजित होता है
// "सही बात!" या "गलत, कृपया पुनः प्रयास करें" संदेश है
// कैप्चा के साथ इनपुट टेक्स्ट को मान्य करने के बाद प्रदर्शित किया गया
userText.addEventListener ('कीप', फंक्शन (ई) {
// "Enter" बटन का कुंजी कोड मूल्य 13 है
अगर (ई .कोड 13) {
अगर (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "सही!"
} अन्य {
आउटपुट।
output.innerHTML = "गलत, कृपया पुनः प्रयास करें";
}
}
});
जब भी उपयोगकर्ता "सबमिट" बटन पर क्लिक करता है, तो यह ईवेंट श्रोता उत्तेजित होता है
// "सही बात!" या "गलत, कृपया पुनः प्रयास करें" संदेश है
// कैप्चा के साथ इनपुट टेक्स्ट को मान्य करने के बाद प्रदर्शित किया गया
submitButton.addEventListener ('क्लिक करें', फंक्शन () {
अगर (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "सही!"
} अन्य {
आउटपुट।
output.innerHTML = "गलत, कृपया पुनः प्रयास करें";
}
});
जब भी उपयोगकर्ता "ताज़ा करें" बटन दबाता है, तो यह ईवेंट श्रोता उत्तेजित होता है
// एक नया यादृच्छिक कैप्चा उत्पन्न होता है और उपयोगकर्ता "रिफ्रेश" बटन पर क्लिक करने के बाद प्रदर्शित होता है
ताज़ा करें
userText.value = "";
let ताज़ा करें = [];
for (let j = 1; जे <= 7; जे ++) {
रिफ्रेशअर.पुश (अल्फ़न्यूम्स [मैथ.फ्लोर (गणित.ग्रे।) * अल्फानम्स.लॉन्ग्लिश]]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

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

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

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

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

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

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

ईमेल
कैसे CAPTCHAs काम करते हैं और वे इतना मुश्किल क्यों हैं?

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

आगे पढ़िए

संबंधित विषय
  • प्रोग्रामिंग
  • एचटीएमएल
  • जावास्क्रिप्ट
  • सीएसएस
लेखक के बारे में
युवराज चंद्रा (10 लेख प्रकाशित)

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

युवराज चंद्र से अधिक

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

टेक टिप्स, समीक्षा, मुफ्त ईबुक और विशेष सौदों के लिए हमारे न्यूज़लेटर में शामिल हों!

एक और क़दम…!

कृपया हमें आपके द्वारा भेजे गए ईमेल में अपने ईमेल पते की पुष्टि करें।

.