बॉट्स को हमेशा एक नंबर गेम रखना - दुख की बात है, उपयोग में आसान मशीन लर्निंग लाइब्रेरी की उपलब्धता कई क्लासिक कैप्चा प्रकारों को सरल बना दिया। Google बोटिंग तूफान के अग्रभाग में सबसे आगे है - आखिरकार, कुछ ही मौजूद है यदि इसे बड़े जी के सूचकांक में (प्रमुख रूप से) पाया जा सकता है।
इसके कारण, Google इंजीनियरों एंटी-बॉट सिस्टम और समाधानों को डिजाइन करने में महत्वपूर्ण मात्रा में प्रयास करते हैं। वे रिकैप्चा नामक उत्पाद के माध्यम से तीसरे पक्ष को उपलब्ध कराए जाते हैं, जिन्हें हम निम्नलिखित चरणों के दौरान एक साथ आगे बढ़ेंगे। अधिक उपकरणों के लिए बॉट से असंबंधित, हमारे देखें वेब डिजाइन उपकरण पद।
शुरू करने से पहले, हालांकि, कुछ बुनियादी चीजों को मंजूरी दे दी जानी चाहिए। सबसे पहले: बॉट बाहर रखना हमेशा एक सर्वर-साइड गेम होता है। ग्राहक पर आपके एंटी-बॉट उपाय के रिटर्न मूल्यों का निरीक्षण करना बेवकूफ है। एक हमलावर स्रोत कोड का विश्लेषण कर सकता है या वापसी सत्यापन को पैच करके बस इसके आसपास काम कर सकता है।
दूसरा, ध्यान रखें कि सभी बॉट बराबर नहीं बनाए जाते हैं। Googlebot को लॉक करना, उदाहरण के लिए, आपकी वेबसाइट की ओर इशारा नहीं किया जा रहा है। इसी तरह की समस्याएं अन्य उद्योग-विशिष्ट बॉट के साथ हो सकती हैं जो अक्सर नुकसान से अधिक अच्छी होती हैं। अंत में, बॉट कुछ मामलों में एक कम बुराई हो सकती है - जब ट्रैफ़िक की आपको आवश्यकता होती है, तो एक बॉट क्लिक सिर्फ एक क्लिक के रूप में हो जाता है।
Google Recaptcha उपयोगकर्ताओं पर एक करीबी आंख रखता है। यहां सिर और साइन इन करने के लिए अपने Google खाते का उपयोग करें। डोमेन के तहत अपने पसंदीदा डोमेन के अलावा "लोकहोस्ट" जोड़ें। "मैं एक रोबोट नहीं हूं" चेकबॉक्स प्रकार चुनें क्योंकि यह सबसे प्रसिद्ध एंटी-बॉट उपाय है।
Google सर्वर और साइट कुंजी प्रदर्शित करके सेटअप प्रक्रिया के माध्यम से काम करने में दृढ़ता का पुरस्कार। जबकि बाद वाले को तीसरे पक्ष के साथ साझा किया जा सकता है, सुनिश्चित करें कि गुप्त कुंजी आपके सर्वर पर्यावरण की सीमा को कभी नहीं छोड़ती है।
परिणाम अखंडता सुनिश्चित करने के लिए Google चुनौती-प्रतिक्रिया प्रक्रिया की भिन्नता का उपयोग करता है। कैप्चा इंस्टेंस एक क्रिप्टोग्राफिक मान को वापस करें जो सर्वर को बड़े जी द्वारा होस्ट किए गए सत्यापन प्रणाली में "चालू" करना है - यदि परिणाम मान्य हो जाते हैं, तो एक सही HTTP प्रतिक्रिया आपके बैक-एंड लॉजिक में वापस कर दी जाती है।
पूरे प्रमाणीकरण प्रवाह को दिखाते हुए एक बारी-कुंजी समाधान का प्रदर्शन करना महत्वपूर्ण है। इसके कारण, हमें प्रकार के "सर्वर" के साथ शुरू करने की आवश्यकता है - एक्सप्रेस जेएस हाल ही में एक लगातार विषय था, इसलिए इसे एक नव निर्मित परियोजना कंकाल में तैनात करें।
तमन @ तमन-थिंकपैड: ~ / nodespace / nodeverify $
एनपीएम init --y
/Home/tamhan/nodespace/nodeverify/package.json को लिखा:
। । ।
तमन @ तमन-थिंकपैड: ~ / nodespace / nodeverify $
एनपीएम बॉडी-पार्सर एक्सप्रेस अनुरोध --सेव स्थापित करें
। । ।
+ [email protected]
+ [email protected]
+ [email protected]
अच्छी तरह से ज्ञात "मैं एक रोबोट नहीं हूं" चेकबॉक्स को एक 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;
Google कैप्चा तर्क युक्त एपीआई फ़ाइल प्रदान करता है। जब api.js लोड हो जाता है, तो इसमें निहित कोड डोम का विश्लेषण करता है और किसी को प्रतिस्थापित करता है & lt; div & gt; सही वर्ग टैग युक्त टैग। & lt; सबमिट करें और जीटी; टैग इस लेखन के रूप में अकेले छोड़ दिए जाते हैं। किसी भी तरह से, ऊपर दिखाए गए परिणामों को देखने के लिए पसंद के ब्राउज़र में कोड चलाएं।
Express.js में एक वितरण श्रृंखला बनाना थोड़ा बुद्धि की आवश्यकता है। एक वास्तव में उपयोगी सहायक bodyparser है। जब एक प्रतिपादन वर्कफ़्लो में एम्बेडेड होता है, तो सर्वर से लौटाए गए व्यक्तिगत फ़ील्ड को ऑब्जेक्ट उन्मुख डिजाइन पैटर्न का उपयोग करके एक्सेस किया जा सकता है जो उन्हें संभालने में काफी सरल बनाते हैं।
वीएआर एक्सप्रेस = आवश्यकता ("एक्सप्रेस");
var bodyparser = आवश्यकता ("बॉडी-पार्सर");
var अनुरोध = आवश्यकता ("अनुरोध");
var myapp = एक्सप्रेस ();
myapp.use (bodyparser.json ());
myapp.use (bodyparser.urlencoded ({विस्तारित: TRUE}));
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;
अगले अधिनियम में सर्वर पर यूआरएल को फायर करना शामिल है। यह पिछले चरण में बनाए गए पते के आधार पर एक पारंपरिक JSON अनुरोध के माध्यम से पूरा किया जाता है। इसके परिणाम तब विश्लेषण किए जाते हैं - यदि कोई त्रुटि फेंक दी जाती है, तो क्लाइंट-साइड एप्लिकेशन में विफलता वापस कर दी जाएगी।
अनुरोध (recaptcha_url, फ़ंक्शन (त्रुटि,
सम्मान, शरीर) {
शरीर = json.parse (शरीर);
अगर (body.success! == अपरिभाषित & amp; & amp; शरीर।
सफलता) {
वापसी प्रतिक्रिया। ({"संदेश":
"कैप्चा सत्यापन विफल"});
}
Responess.Header ("सामग्री-प्रकार",
"आवेदन / json")। भेजें (शरीर);
});
});
Express.js के http सर्वर को हल करने की आवश्यकता है। यह app.listen संरचना का उपयोग करके सबसे अच्छा पूरा किया जाता है। ध्यान रखें कि 1024 से छोटा एक संख्या के साथ बंदरगाह यूनिक्सॉयड ऑपरेटिंग सिस्टम पर रूट उपयोगकर्ता तक सीमित हैं - इसलिए 3000 एक सुरक्षित शर्त है।
var server = myapp.listen (3000, समारोह () {
Console.log ("सुनना" + सर्वर।
पता ()। बंदरगाह);
});
अंत में, हमारे फॉर्म को नोड.जेएस के अंदर चल रहे स्थानीय सर्वर के संपर्क में रखा जाना चाहिए। यह क्रिया स्ट्रिंग को समायोजित करके सबसे अच्छा पूरा किया जाता है - लक्ष्य को वैध डोमेन पर इंगित करना सुनिश्चित करें, खासकर यदि आप स्थानीय express.js सर्वर का उपयोग नहीं करते हैं।
& lt; शरीर & gt;
& lt; फॉर्म एक्शन = "http: // localhost: 3000 / tamstest" विधि = "पोस्ट" & gt;
& lt; div class = "g-recaptcha" डेटा-साइटकी = "6LEWMZGUAAAAAAAPSWPVP6HLULNJXA_SCWTWHYHGE" & gt; & lt; / div & gt;
& lt; br / & gt;
परीक्षण हमारे क्लाइंट-सर्वर सिस्टम को Google के मूल सत्यापन के कारण दो सर्वरों की आवश्यकता होती है। सौभाग्य से, पायथन एक त्वरित HTTP सर्वर प्रदान करता है - index.htm प्रदान करने के लिए इसका उपयोग करें, जबकि Express.js को लौटाए गए प्रतिक्रिया के सत्यापन करने के लिए सूचीबद्ध किया गया है।
तमन @ तमन-थिंकपैड: ~ / nodespace / nodeverify $
नोड index.js
3000 पर सुनना
तमन @ तमन-थिंकपैड: ~ / nodespace / nodeverify $
python3 -m http.server
0.0.0.0 पोर्ट 8000 पर http की सेवा ...
चलते समय, चेकबॉक्स की जांच करें और किसी भी चुनौतियों को पूरा करें बड़े जी आप पर फेंक सकते हैं। सर्वर आमतौर पर सत्यापन के मामले में ज्यादा मांग नहीं करता है, और ऊपर दिखाए गए सामग्रियों को प्रदर्शित करने के लिए आगे बढ़ता है।
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;
अगला, एक घटना हैंडलर जोड़ा जाना चाहिए। जब भी उपयोगकर्ता ने अपने क्लाइंट-साइड दृष्टिकोण से सत्यापन प्रयास पारित किया तो 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;
Google पृष्ठ लोड के दौरान डेवलपर्स को रिकैप्टा तत्वों को फैलाने के लिए सीमित नहीं करता है। प्रस्तुत करना() Recaptcha API में मिली विधि आपको एक या अधिक नामित करने देती है & lt; div & gt; उस वेबसाइट पर टैग जो recaptcha विजेट में परिवर्तित किया जाना है।
var myCallback = फ़ंक्शन (VAL) {कंसोल।
लॉग (वैल); };
Grecaptcha.Render (
document.getelementsbyid ('MY-ID'),
{
कॉलबैक: MyCallBack,
साइटकी: माईसाइटकी
});
इसके साथ, एक मुख्य मुद्दा बनी हुई है। सबमिट बटन को पुन: सक्षम किया जाना चाहिए जब रिकैप्चा द्वारा प्रदान की गई क्लिक ईवेंट हमारे एप्लिकेशन कोड में आती है। JQuery को इस तरह के एक साधारण उदाहरण में लोड करना अनावश्यक है, इसलिए इसके बजाय कुछ सादे जावास्क्रिप्ट पर वापस आएं।
& lt; स्क्रिप्ट और जीटी;
समारोह ondcfired (मान) {
दस्तावेज़। GetElementById
("बटन")। अक्षम = गलत;
}
& lt; / स्क्रिप्ट & gt;
& lt; इनपुट प्रकार = "सबमिट करें" आईडी = "बटन"
मान = "सबमिट करें" अक्षम & gt;
Google हमेशा के लिए चुनौती प्रतिक्रिया डेटा स्टोर नहीं कर सकता है। इसके कारण, सत्यापन समय काफी तेजी से - डिफ़ॉल्ट रूप से, हमारे कार्यक्रम के बारे में पता नहीं चलता है। सौभाग्य से, एपीआई में एक अतिरिक्त क्षेत्र होता है जिसका उपयोग सूचित करने के लिए किया जा सकता है।
फ़ंक्शन ondcexpired (मान) {
document.getElementById ("बटन")।
विकलांग = सत्य;
}
& lt; div class = "g-recaptcha" डेटा-साइटकी = "6LEWMZGUAAAAAAAPSWPVP6HLULNJXA_SCWTWHYHGE"
डेटा-कॉलबैक = "ondcfired" डेटा-एक्सपायर्ड-कॉलबैक = "ondcexpired" & gt; & lt; / div & gt;
[2 9 6] यहां सिर
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;
वेबसाइट पर किए जा रहे कार्रवाई के बारे में अधिक डेटा से प्लग-इन लाभ। इस चरण के साथ स्निपेट यह घोषणा करेगा कि उपयोगकर्ता वर्तमान में आपके होमपेज का दौरा करता है। दस्तावेज में एपीआई पर अधिक जानकारी मिल सकती है।
& lt; स्क्रिप्ट और जीटी;
grecaptcha.ready (फ़ंक्शन () {
Grecaptcha.execute ('recaptcha_site_key',
{एक्शन: 'होमपेज'});
});
& lt; / स्क्रिप्ट & gt;
सीएसएस उत्पन्न करने के लिए 26 सितंबर को रिच मिक्स पर हमसे जुड़ें, रचनात्मक ब्लोक, नेट और वेब डिज़ाइनर द्वारा आपके द्वारा लाए गए वेब डिजाइनरों के लिए एक बेस्पोक सम्मेलन। 15 अगस्त से पहले अपने शुरुआती पक्षी टिकट बुक करें www.generateconf.com ।
यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका के अंक 287 में प्रकाशित किया गया था वेब डिजाइनर । [34 9] यहां अंक 287 खरीदें
या वेब डिजाइनर की सदस्यता लें ।संबंधित आलेख:
(छवि क्रेडिट: पिक्साबे से जन Vašek) [1 9] आपको क्ला�..
(छवि क्रेडिट: जोनाथन हार्डीस्टी) [1 9] 2 का पृ..
एक कलाकारक के रूप में Wieden + केनेडी लंदन, मैं ..
यूनिटी दुनिया के सबसे लोकप्रिय गेम इंजनों में से ..
का उत्कृष्ट उपयोग रंग सिद्धांत डिजाइन में �..
3 डी वर्ल्ड इश्यु 232 के लिए एक कॉम्पैनिंग फाइल डाउन�..
गौचे पानी के रंग की तुलना में अधिक क्षमाशील है, ले�..
ग्राहक लगातार दर्शकों के साथ जुड़ने के नए तरीकों की तलाश में हैं। स्नैपच�..