"कैप्चा: प्रोटोटाइप" या कैप्चा को हल करने से दूर होने का एक और प्रयास

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

यह कैसे काम करता है?

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

पूरे प्रोटोटाइप को ही जीथब पर पाया जा सकता है।

इस बीच, मैं उन मुख्य विधियों का वर्णन करूंगा जिनका उपयोग कार्यान्वयन के लिए किया गया था:
1. भविष्य के हलकों के लिए रंगों की एक निश्चित सरणी बनाएं।

this.colors = ["red", "green", "blue", "pink", "yellow", "orange", "violet"]; 

2. हलकों को स्वयं उत्पन्न करें।

 generateObjects = function(g) { var used = []; var used_ = []; //   var colors = shuffle(self.colors); //    ,     var howMuch = rand(3, colors.length); for (var i = 0; i < howMuch; i++) { var centerX = rand(10, self.width); var centerY = rand(10, self.height); var radius = rand(10, 15); g.beginPath(); g.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); g.fillStyle = colors[i]; g.fill(); g.lineWidth = 1; g.strokeStyle = colors[i]; g.stroke(); used.push(colors[i]); used_.push({ x: centerX, y: centerY, //  ,       r: radius }); } //          var a = rand(0, howMuch - 1); self.active = used_[a]; return used[a]; }; 

3. दबाने और सर्कल के चौराहे को निर्धारित करने के लिए, हम दो तरीकों का उपयोग करते हैं।

 mouseReleased = function(dim) { //     lib/captcha_listener.js dim.x = dim.x - $(self.canvas).offset().left; dim.y = dim.y - $(self.canvas).offset().top; //  ,       "" if (self.inBounds(dim)) { //    $(".captchaResult").val(dim.x + ":" + dim.y); //      POC,    ,        if (self.inCircle(dim)) { alert("nice!"); } else { alert("bot..."); } } }; 

TheCircle () स्वयं जाँच करें

 inCircle = function(dim) { var a = self.active; //     ,      // NB!  -    ,         var x0 = ax - ar; var x1 = ax + ar; var y0 = ay - ar; var y1 = ay + ar; if (x0 <= dim.x && dim.x <= x1 && y0 <= dim.y && dim.y <= y1) { return true; } else { return false; } }; 

और वास्तव में यह वही है जो हमारे ताजा बेक्ड कैप्चा की तरह दिखता है:


दुर्भाग्य से, इस तरह के कैप्चा न केवल बॉट्स के लिए, बल्कि उन लोगों के लिए भी समस्या होगी जो रंगों में अंतर नहीं करते हैं।

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

UPD।: लेख पर पहली टिप्पणियों के बाद, इस कैप्चा में रंग शोर जोड़ने का विचार आया।