Stop the bots with Google reCAPTCHA

Sep 14, 2025
कैसे करना है
Stop the bots with Google reCAPTCHA
(छवि क्रेडिट: भविष्य) [1 9]

बॉट्स को हमेशा एक नंबर गेम रखना - दुख की बात है, उपयोग में आसान मशीन लर्निंग लाइब्रेरी की उपलब्धता कई क्लासिक कैप्चा प्रकारों को सरल बना दिया। Google बोटिंग तूफान के अग्रभाग में सबसे आगे है - आखिरकार, कुछ ही मौजूद है यदि इसे बड़े जी के सूचकांक में (प्रमुख रूप से) पाया जा सकता है।

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

शुरू करने से पहले, हालांकि, कुछ बुनियादी चीजों को मंजूरी दे दी जानी चाहिए। सबसे पहले: बॉट बाहर रखना हमेशा एक सर्वर-साइड गेम होता है। ग्राहक पर आपके एंटी-बॉट उपाय के रिटर्न मूल्यों का निरीक्षण करना बेवकूफ है। एक हमलावर स्रोत कोड का विश्लेषण कर सकता है या वापसी सत्यापन को पैच करके बस इसके आसपास काम कर सकता है।

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

  • 8 अद्भुत Google API (और उनका उपयोग कैसे करें)

01. साइन-अप एक गो-गो!

[4 9] Stop the bots with Google reCAPTCHA: Sign-up a go-go!

Recaptcha में साइन इन करने के लिए अपने Google खाते का उपयोग करें (छवि क्रेडिट: टैम हन्ना) [1 9]

Google Recaptcha उपयोगकर्ताओं पर एक करीबी आंख रखता है। यहां सिर और साइन इन करने के लिए अपने Google खाते का उपयोग करें। डोमेन के तहत अपने पसंदीदा डोमेन के अलावा "लोकहोस्ट" जोड़ें। "मैं एक रोबोट नहीं हूं" चेकबॉक्स प्रकार चुनें क्योंकि यह सबसे प्रसिद्ध एंटी-बॉट उपाय है।

02. स्टोर साइट और सर्वर कुंजी

Google सर्वर और साइट कुंजी प्रदर्शित करके सेटअप प्रक्रिया के माध्यम से काम करने में दृढ़ता का पुरस्कार। जबकि बाद वाले को तीसरे पक्ष के साथ साझा किया जा सकता है, सुनिश्चित करें कि गुप्त कुंजी आपके सर्वर पर्यावरण की सीमा को कभी नहीं छोड़ती है।

03. साइट सत्यापन को समझें

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

04. Express.js सेट करें

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

 तमन @ तमन-थिंकपैड: ~ / nodespace / nodeverify $
एनपीएम init --y
/Home/tamhan/nodespace/nodeverify/package.json को लिखा:
  । । ।
तमन @ तमन-थिंकपैड: ~ / nodespace / nodeverify $
एनपीएम बॉडी-पार्सर एक्सप्रेस अनुरोध --सेव स्थापित करें
। । ।
+ [email protected]
+ [email protected]
+ [email protected] 

05. सेवा करने के लिए तैयार करें

अच्छी तरह से ज्ञात "मैं एक रोबोट नहीं हूं" चेकबॉक्स को एक HTML फ़ाइल की आवश्यकता होती है। यह देखते हुए कि यह एक नमूना है जो इंटरैक्शन प्रवाह का प्रदर्शन करता है, इस चरण के साथ दिखाई देने वाले मार्क-अप युक्त एक स्थिर दस्तावेज़ के साथ शुरू होता है।

 & lt; html & gt;
& lt; हेड और जीटी;
& lt; शीर्षक & gt; recaptcha डेमो: सरल पृष्ठ
& lt; / शीर्षक & gt;
& lt; स्क्रिप्ट src = "https://www.google.com/recaptcha/api.js" async defer & gt; & lt; / स्क्रिप्ट & gt;
& lt; / सिर & gt;
& lt; शरीर & gt;
& lt; फॉर्म एक्शन = "?" विधि = "पोस्ट" & gt;
& lt; div class = "g-recaptcha" डेटा-साइटकी = "your_site_key" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt; इनपुट प्रकार = "सबमिट करें" मान = "सबमिट करें" & gt;
& lt; / फॉर्म & gt;
& lt; / शरीर & gt;
& lt; / html & gt; 

06. समझें और परीक्षण करें

[9 6] [9 7] Stop the bots with Google reCAPTCHA: Understand and test

इन परिणामों को देखने के लिए कोड चलाएं (छवि क्रेडिट: टैम हन्ना) [1 9]

Google कैप्चा तर्क युक्त एपीआई फ़ाइल प्रदान करता है। जब api.js लोड हो जाता है, तो इसमें निहित कोड डोम का विश्लेषण करता है और किसी को प्रतिस्थापित करता है & lt; div & gt; सही वर्ग टैग युक्त टैग। & lt; सबमिट करें और जीटी; टैग इस लेखन के रूप में अकेले छोड़ दिए जाते हैं। किसी भी तरह से, ऊपर दिखाए गए परिणामों को देखने के लिए पसंद के ब्राउज़र में कोड चलाएं।

07. कुछ तत्व लोड करें

Express.js में एक वितरण श्रृंखला बनाना थोड़ा बुद्धि की आवश्यकता है। एक वास्तव में उपयोगी सहायक bodyparser है। जब एक प्रतिपादन वर्कफ़्लो में एम्बेडेड होता है, तो सर्वर से लौटाए गए व्यक्तिगत फ़ील्ड को ऑब्जेक्ट उन्मुख डिजाइन पैटर्न का उपयोग करके एक्सेस किया जा सकता है जो उन्हें संभालने में काफी सरल बनाते हैं।

 वीएआर एक्सप्रेस = आवश्यकता ("एक्सप्रेस");
var bodyparser = आवश्यकता ("बॉडी-पार्सर");
var अनुरोध = आवश्यकता ("अनुरोध");

var myapp = एक्सप्रेस ();

myapp.use (bodyparser.json ());
myapp.use (bodyparser.urlencoded ({विस्तारित: TRUE})); 

08. सत्यापित करने के लिए तैयार ...

Google का चेकबॉक्स पृष्ठभूमि में इसका जादू करता है - जब किया जाता है, एक नया फ़ील्ड कहा जाता है जी-रिकैप-प्रतिक्रिया फॉर्म विशेषताओं में जोड़ा जाता है। यह डेटा सत्यापन के लिए Google के सर्वर पर भेजा जाना चाहिए। इस चरण के साथ कोड में लंबी स्ट्रिंग आपको आपके द्वारा निर्दिष्ट Google के साथ प्रतिस्थापित की जाएगी।

 myapp.post ("/ tamstest", समारोह (अनुरोध, प्रतिक्रिया) {
var recaptcha_url = "https://www.google.com/recaptcha/api/siteverify?";
recaptcha_url + = "गुप्त = 6lewmzguaaaairsb2gv5akkx2cwyfulkzrmd7ws & amp;";
recaptcha_url + = "प्रतिक्रिया =" + अनुरोध। कोई ["जी-रिकैप्टा-प्रतिक्रिया"] + "& amp;";
recaptcha_url + = "रिमोटिप =" + अनुरोध। connection.remoteaddress; 

09. ... और Google के सर्वर पर पूछताछ

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

 अनुरोध (recaptcha_url, फ़ंक्शन (त्रुटि,
सम्मान, शरीर) {
शरीर = json.parse (शरीर);
अगर (body.success! == अपरिभाषित & amp; & amp; शरीर।
सफलता) {
वापसी प्रतिक्रिया। ({"संदेश":
"कैप्चा सत्यापन विफल"});
}
Responess.Header ("सामग्री-प्रकार",
"आवेदन / json")। भेजें (शरीर);
});
}); 

10. इसे ढीला सेट करें

Express.js के http सर्वर को हल करने की आवश्यकता है। यह app.listen संरचना का उपयोग करके सबसे अच्छा पूरा किया जाता है। ध्यान रखें कि 1024 से छोटा एक संख्या के साथ बंदरगाह यूनिक्सॉयड ऑपरेटिंग सिस्टम पर रूट उपयोगकर्ता तक सीमित हैं - इसलिए 3000 एक सुरक्षित शर्त है।

 var server = myapp.listen (3000, समारोह () {
Console.log ("सुनना" + सर्वर।
पता ()। बंदरगाह);
}); 

11. फॉर्म को समायोजित करें

अंत में, हमारे फॉर्म को नोड.जेएस के अंदर चल रहे स्थानीय सर्वर के संपर्क में रखा जाना चाहिए। यह क्रिया स्ट्रिंग को समायोजित करके सबसे अच्छा पूरा किया जाता है - लक्ष्य को वैध डोमेन पर इंगित करना सुनिश्चित करें, खासकर यदि आप स्थानीय express.js सर्वर का उपयोग नहीं करते हैं।

 & lt; शरीर & gt;
& lt; फॉर्म एक्शन = "http: // localhost: 3000 / tamstest" विधि = "पोस्ट" & gt;
& lt; div class = "g-recaptcha" डेटा-साइटकी = "6LEWMZGUAAAAAAAPSWPVP6HLULNJXA_SCWTWHYHGE" & gt; & lt; / div & gt;
& lt; br / & gt; 

12. इसे लाओ!

Stop the bots with Google reCAPTCHA: Bring it up!

क्लाइंट-सर्वर सिस्टम का परीक्षण करने के लिए पायथन के क्विक HTTP सर्वर का उपयोग करें (छवि क्रेडिट: टैम हन्ना) [1 9]

परीक्षण हमारे क्लाइंट-सर्वर सिस्टम को Google के मूल सत्यापन के कारण दो सर्वरों की आवश्यकता होती है। सौभाग्य से, पायथन एक त्वरित HTTP सर्वर प्रदान करता है - index.htm प्रदान करने के लिए इसका उपयोग करें, जबकि Express.js को लौटाए गए प्रतिक्रिया के सत्यापन करने के लिए सूचीबद्ध किया गया है।

 तमन @ तमन-थिंकपैड: ~ / nodespace / nodeverify $
नोड index.js
3000 पर सुनना
तमन @ तमन-थिंकपैड: ~ / nodespace / nodeverify $
python3 -m http.server
0.0.0.0 पोर्ट 8000 पर http की सेवा ... 

13. एक सूखी रन करें

Stop the bots with Google reCAPTCHA: Perform a dry run

अपने कैप्चा को टेस्ट रन दें (छवि क्रेडिट: टैम हन्ना) [1 9]

चलते समय, चेकबॉक्स की जांच करें और किसी भी चुनौतियों को पूरा करें बड़े जी आप पर फेंक सकते हैं। सर्वर आमतौर पर सत्यापन के मामले में ज्यादा मांग नहीं करता है, और ऊपर दिखाए गए सामग्रियों को प्रदर्शित करने के लिए आगे बढ़ता है।

14. सबमिट बटन को अक्षम करें

Stop the bots with Google reCAPTCHA: Disable the submit button

स्टार्टअप पर सबमिट बटन को अक्षम करना उपयोगिता के लिए अच्छा है (छवि क्रेडिट: टैम हन्ना) [1 9]

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

& lt; फॉर्म एक्शन = "http: // localhost: 3000 / tamstest" विधि = "पोस्ट" & gt;
& lt; div class = "g-recaptcha" डेटा-साइटकी = "6LEWMZGUAAAAAAAPSWPVP6HLULNJXA_SCWTWHYHGE" & gt; & lt; / div & gt;
& lt; br / & gt;
& lt; इनपुट प्रकार = "सबमिट करें" मान = "सबमिट करें" अक्षम & gt;
& lt; / फॉर्म & gt; 

15. कैप्चा घटनाओं को संभालें

Stop the bots with Google reCAPTCHA: Handle CAPTCHA events

अब एक ईवेंट हैंडलर जोड़ें (छवि क्रेडिट: टैम हन्ना) [1 9]

अगला, एक घटना हैंडलर जोड़ा जाना चाहिए। जब भी उपयोगकर्ता ने अपने क्लाइंट-साइड दृष्टिकोण से सत्यापन प्रयास पारित किया तो Google का कैप्चा एपीआई इसे आह्वान करेगा।

 & lt; html & gt;
& lt; हेड और जीटी; । । ।
& lt; स्क्रिप्ट और जीटी;
समारोह ondcfired (मान) {
console.log (मूल्य);
}
& lt; / स्क्रिप्ट & gt;
& lt; / सिर & gt;
& lt; शरीर & gt;
& lt; फॉर्म क्रिया = "http: // localhost: 3000 /
Tamstest "विधि =" पोस्ट "& gt;
& lt; div class = "g-recaptcha" डेटा-साइटकी = "6LEWMZGUAAAAAAPSWPVP6HLULNJXA_SCWTWHYHGE" डेटा-कॉलबैक =
"ondcfired" & gt; & lt; / div & gt; 

16. भ्रमण: गतिशील कैप्चा प्रतिपादन

Google पृष्ठ लोड के दौरान डेवलपर्स को रिकैप्टा तत्वों को फैलाने के लिए सीमित नहीं करता है। प्रस्तुत करना() Recaptcha API में मिली विधि आपको एक या अधिक नामित करने देती है & lt; div & gt; उस वेबसाइट पर टैग जो recaptcha विजेट में परिवर्तित किया जाना है।

 var myCallback = फ़ंक्शन (VAL) {कंसोल।
लॉग (वैल); };
Grecaptcha.Render (
document.getelementsbyid ('MY-ID'),
{
कॉलबैक: MyCallBack,
साइटकी: माईसाइटकी
}); 

17. यदि आवश्यक हो तो बटन सक्षम करें ...

इसके साथ, एक मुख्य मुद्दा बनी हुई है। सबमिट बटन को पुन: सक्षम किया जाना चाहिए जब रिकैप्चा द्वारा प्रदान की गई क्लिक ईवेंट हमारे एप्लिकेशन कोड में आती है। JQuery को इस तरह के एक साधारण उदाहरण में लोड करना अनावश्यक है, इसलिए इसके बजाय कुछ सादे जावास्क्रिप्ट पर वापस आएं।

 & lt; स्क्रिप्ट और जीटी;
समारोह ondcfired (मान) {
दस्तावेज़। GetElementById
("बटन")। अक्षम = गलत;
}
& lt; / स्क्रिप्ट & gt; 
 & lt; इनपुट प्रकार = "सबमिट करें" आईडी = "बटन"
मान = "सबमिट करें" अक्षम & gt; 

18. ... और हमारे बाद साफ करें

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

 फ़ंक्शन ondcexpired (मान) {
document.getElementById ("बटन")।
विकलांग = सत्य;
} 
 & lt; div class = "g-recaptcha" डेटा-साइटकी = "6LEWMZGUAAAAAAAPSWPVP6HLULNJXA_SCWTWHYHGE"
डेटा-कॉलबैक = "ondcfired" डेटा-एक्सपायर्ड-कॉलबैक = "ondcexpired" & gt; & lt; / div & gt; 

19. अतिरिक्त विशेषताओं का उपयोग करें

Stop the bots with Google reCAPTCHA: Handle CAPTCHA events

के साथ खेलने के लिए बहुत सारे उपयोगी गुण हैं (छवि क्रेडिट: टैम हन्ना) [1 9]

[2 9 6] यहां सिर

जावास्क्रिप्ट एपीआई में शामिल संपत्तियों की एक सूची खोजने के लिए। वे आपको विभिन्न व्यवहारों को समायोजित करने देते हैं - उदाहरण के लिए, पुनरावृत्ति विजेट को रात के अनुकूल रंग योजना में भी प्रस्तुत किया जा सकता है!

20. पारदर्शी रूप से काम करें ...

Google ने हाल ही में रिकैप्टा एपीआई का तीसरा संस्करण पेश किया है जिसके लिए स्पष्ट उपयोगकर्ता इंटरैक्शन की आवश्यकता नहीं है। इसके बजाए, आप इसे पृष्ठ प्रारंभिकता के दौरान बस लोड करते हैं - कोड स्वचालित रूप से वेब साइट पर जंगली चलने वाले उपयोगकर्ता के व्यवहार पर नज़र रखता है।

 & lt; स्क्रिप्ट src = "https://www.google.com/recaptcha/api.js?render=recaptcha_site_key" & gt; & gt; & gt; / स्क्रिप्ट & gt;
& lt; स्क्रिप्ट और जीटी;
grecaptcha.ready (फ़ंक्शन () {
Grecaptcha.execute ('recaptcha_site_key',
{एक्शन: 'होमपेज'})।
फिर (कार्य (टोकन) {
...
});
});
& lt; / स्क्रिप्ट & gt; 

21. ... और अतिरिक्त जानकारी प्रदान करें

वेबसाइट पर किए जा रहे कार्रवाई के बारे में अधिक डेटा से प्लग-इन लाभ। इस चरण के साथ स्निपेट यह घोषणा करेगा कि उपयोगकर्ता वर्तमान में आपके होमपेज का दौरा करता है। दस्तावेज में एपीआई पर अधिक जानकारी मिल सकती है।

 & lt; स्क्रिप्ट और जीटी;
grecaptcha.ready (फ़ंक्शन () {
Grecaptcha.execute ('recaptcha_site_key',
{एक्शन: 'होमपेज'});
});
& lt; / स्क्रिप्ट & gt; 

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(छवि क्रेडिट: भविष्य) [1 9]

सीएसएस उत्पन्न करने के लिए 26 सितंबर को रिच मिक्स पर हमसे जुड़ें, रचनात्मक ब्लोक, नेट और वेब डिज़ाइनर द्वारा आपके द्वारा लाए गए वेब डिजाइनरों के लिए एक बेस्पोक सम्मेलन। 15 अगस्त से पहले अपने शुरुआती पक्षी टिकट बुक करें www.generateconf.com

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका के अंक 287 में प्रकाशित किया गया था वेब डिजाइनर [34 9] यहां अंक 287 खरीदें

या वेब डिजाइनर की सदस्यता लें

संबंधित आलेख:

  • 8 आवश्यक वर्डप्रेस सुरक्षा रहस्य
  • कोडेपेन ने खुद को सुरक्षित कैसे किया
  • हैकर्स से आपकी वेबसाइट की सुरक्षा के लिए 9 सुरक्षा युक्तियाँ

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to use cloud storage as a creative

कैसे करना है Sep 14, 2025

(छवि क्रेडिट: पिक्साबे से जन Vašek) [1 9] आपको क्ला�..


How to use reference images: 13 essential tips for artists

कैसे करना है Sep 14, 2025

(छवि क्रेडिट: जोनाथन हार्डीस्टी) [1 9] 2 का पृ..


How to prepare a file for print

कैसे करना है Sep 14, 2025

एक कलाकारक के रूप में Wieden + केनेडी लंदन, मैं ..


Understand the Unity asset import pipeline

कैसे करना है Sep 14, 2025

यूनिटी दुनिया के सबसे लोकप्रिय गेम इंजनों में से ..


Generate endless colour palettes with Khroma

कैसे करना है Sep 14, 2025

का उत्कृष्ट उपयोग रंग सिद्धांत डिजाइन में �..


Download files for 3D World 232

कैसे करना है Sep 14, 2025

3 डी वर्ल्ड इश्यु 232 के लिए एक कॉम्पैनिंग फाइल डाउन�..


How to mix a gouache palette

कैसे करना है Sep 14, 2025

गौचे पानी के रंग की तुलना में अधिक क्षमाशील है, ले�..


How to create a Snapchat Geofilter in Photoshop

कैसे करना है Sep 14, 2025

ग्राहक लगातार दर्शकों के साथ जुड़ने के नए तरीकों की तलाश में हैं। स्नैपच�..


श्रेणियाँ