🧜🏻 💪 ♐️ SimpleMvcCaptcha, या मेरा पहला ओपन सोर्स अनुभव 🏌️ 🕵🏻 👼🏼

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

यह सब कैसे शुरू हुआ

हाल ही में, मैंने ASP.NET MVC 3 पर अपनी खुद की एक छोटी परियोजना विकसित करना शुरू किया। इसका सार यह है कि आगंतुक इसमें अपने संदेश जोड़ सकते हैं, जो बाद में सार्वजनिक डोमेन में दिखाई देते हैं (जो इस भ्रामक स्पष्टीकरण के पीछे क्या रुचि रखते हैं - लिंक होगा अंत में)।

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

मेरे दिमाग में सबसे पहले जो चीज आई वह थी Google का ReCaptcha। इसे स्थापित करने और कुछ समय के लिए इसका लाभ उठाने के बाद, मुझे अंततः एहसास हुआ कि यह राक्षस मेरे लिए बिल्कुल नहीं है और अधिकांश पर्याप्त लोगों के लिए नहीं है, विशेष रूप से रूसी-भाषी (कुछ छवियों का उत्पादन केवल मशीन द्वारा पठनीय नहीं है, इसे लोगों द्वारा नहीं पढ़ा जा सकता है)। अन्य समाधानों की तलाश में, मैं, दुर्भाग्य से, एमवीसी 3 के लिए सामान्य कुछ भी नहीं मिला, उपयोग करने के लिए सरल और विनीत। ऐसा करने के तरीके के बारे में अलग-अलग नियमावली थी, लेकिन किसी तरह मैंने तैयार किए गए समाधान "लिया और इस्तेमाल किया" को पूरा नहीं किया। इसलिए फैसला किया ~~एक साइकिल का आविष्कार करें~~ अपना कैप्चा लिखें।

विचार

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

कार्यान्वयन

जल्दी से नहीं कहा। दो बार सोचने के बिना, मैंने स्टूडियो में एक नया असेंबली प्रोजेक्ट बनाया (एक एकल प्रोजेक्ट के लिए एक अलग dll के रूप में कैप्चा जारी करने के लिए, मेरी अच्छी फॉर्म की भावना ने मुझे प्रेरित किया और, जैसा कि यह निकला, व्यर्थ नहीं)। इसमें, मैंने HtmlHelper वर्ग के लिए सामान्य एक्सटेंशन विधि के साथ एक वर्ग बनाया। पूरे प्रोजेक्ट को तब बुलाया गया था - SimpleMvcCaptcha।

कार्यान्वयन का सार इस प्रकार है। सहायक बेतरतीब ढंग से दो ऑपरेंड संख्या और एक ऑपरेशन (अब तक केवल + या -) उत्पन्न करता है। इन मापदंडों के आधार पर, परिणाम की गणना की जाती है। तब कानों से दो झगड़े होते हैं। सबसे पहले, हमें कैप्चा अभिव्यक्ति के साथ एक छवि बनाने की आवश्यकता है। हालाँकि, यह सहायक के अंदर नहीं किया जा सकता है। इसलिए, हमें एक img टैग बनाने की आवश्यकता है, छवि का स्रोत जिसके लिए एक विशेष नियंत्रक की विशेष रूप से तैयार कार्रवाई होगी, जिसके बारे में नीचे। हमारे कान के साथ दूसरा संकेत - हमें किसी तरह परिणाम के बारे में जानकारी को सहेजने की आवश्यकता है ताकि परिणाम के बाद की पोस्टिंग के दौरान सर्वर पर हमें अपने स्वयं के कैप्चा को पहचानने की आवश्यकता न हो।

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

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

/// <summary> /// Captcha object /// </summary> internal class Captcha { /// <summary> /// Result of captcha's expression /// </summary> public string Result { get; internal set; } /// <summary> /// Captcha's expression /// </summary> public string Expresion { get; internal set; } }

अब कंट्रोलर के बारे में। मुझे मिले उदाहरणों में, छवि निर्माण को विशेष प्रोसेसर जैसे .axd, .ashx पर छोड़ दिया गया था। मैंने तय किया कि सामान्य नियंत्रक और कार्रवाई को ऐसा करने दें। यहां मुझे निर्णय की शुद्धता के बारे में संदेह है, इसलिए मैं इस मामले पर आलोचना और रचनात्मक टिप्पणियों के लिए उत्सुक हूं।

  public class CaptchaController : Controller { public FileContentResult GetImage(string id) { return File(CaptchaUtils.GetImage(id), "image/gif"); } }

सत्यापन भी काफी सरल है:

  /// <summary> /// Validates input /// </summary> /// <returns>true - validation succeeded \nfalse - validation failed</returns> public static bool Validate() { var ctx = HttpContext.Current; var captchaAnswer = ctx.Request.Form["captchaAnswer"]; var captchaHidden = ctx.Request.Form["captchaId"]; // If input is not empty if(!String.IsNullOrEmpty(captchaAnswer) && !String.IsNullOrEmpty(captchaHidden)) { var captcha = ctx.Session[captchaHidden] as Captcha; ctx.Session.Remove(captchaHidden); return captcha != null && captchaAnswer == captcha.Result; } return false; }

क्या हुआ?

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

ग्राहक कोड इस तरह दिखता है:

 <div class="smc-captcha"> <img src='/Captcha/GetImage/08a75516-f1ed-41ca-a926-724a268f171e' alt='captcha' class='smc-img-captcha' ><br/> <input type='hidden' name='captchaId' value='08a75516-f1ed-41ca-a926-724a268f171e' /> <input type='text' name='captchaAnswer' class='smc-input-result' /> </div>

अनुकूलन

कैप्चा बनाने की प्रक्रिया में उपयोग किए जाने वाले अधिकांश पैरामीटर आपके ASP.NET MVC प्रोजेक्ट के web.config के माध्यम से ओवरराइड किए जा सकते हैं। इन मापदंडों में से, आप छवि की चौड़ाई और ऊंचाई, फ़ॉन्ट आकार और प्रकार, + और - (ऊपर चित्र तीसरा फ्रेम है) के लिए प्रतिस्थापन पाठ का चयन कर सकते हैं, अभिव्यक्ति में उपयोग के लिए अधिकतम संख्या, चित्र प्रदर्शित करने के लिए नियंत्रक और कार्रवाई का नाम। आप संबंधित कक्षाओं को ओवरराइड करके div, img और imput तत्वों के CSS गुणों को भी कस्टमाइज़ कर सकते हैं।

खुला स्रोत

अब यही कारण है कि मैंने हैबर में लिखने का फैसला किया। इस लेख में इसके शीर्षक में ओपन सोर्स का उल्लेख है। हां, मैंने इस कैप्चा को अपने लिए लागू करने के बाद, मैंने फैसला किया कि इसे बाकी समुदाय के साथ साझा करना अच्छा होगा। यह मेरा पहला खुला स्रोत विकास अनुभव है, इसलिए यह मेरे लिए दोगुना दिलचस्प हो गया है। सभी कोड, विवरण और प्रलेखन GPLv2 लाइसेंस के तहत http://simplemvccaptcha.codeplex.com/ पर कोडप्लेक्स पर उपलब्ध हैं। आओ, डाउनलोड करो, उपयोग करो।

निष्कर्ष में

मैं वास्तव में आशा करता हूं कि यह छोटा सा प्रोजेक्ट ASP.NET MVC 3 पर आधारित साइटें बनाने में आपकी मदद करेगा, जिसमें आपको एक सरल कैप्चा की कार्यक्षमता की आवश्यकता होती है, जो किसी व्यक्ति के लिए पहचानना आसान है, लेकिन किसी भी बॉट से बचाने में मदद करता है।

PS और जिस परियोजना के लिए यह मूल रूप से लिखा गया था और जिसके बारे में मैंने शुरुआत में बात की थी, उसे "प्रोग्रामिंग के बारे में तथ्य" कहा जाता है। वहाँ अभी तक कई तथ्य नहीं हैं, लेकिन मुझे उम्मीद है कि, आपके समर्थन सहित, परियोजना सक्रिय रूप से विकसित होगी!
अपने स्वयं के तथ्य को जोड़ने के लिए पृष्ठ पर कैप्चा का उपयोग करने का एक उदाहरण पाया जा सकता है । हम विनम्र निवेदन करते हैं - यदि आपको कैप्चा या वेबसाइट में बग दिखाई देता है, तो उसे तुरंत तोड़ने का प्रयास न करें। बेहतर है मुझे पता है और मैं इसे ठीक कर देंगे। चलो रचनात्मक हो।

SimpleMvcCaptcha, या मेरा पहला ओपन सोर्स अनुभव