आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

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

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

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

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

विभिन्न प्रकार के कैप्चा परीक्षण हैं जिन्हें आप अपने एप्लिकेशन में एकीकृत कर सकते हैं जैसे टेक्स्ट-आधारित और ऑडियो-आधारित कैप्चा। हालाँकि, सबसे लोकप्रिय और प्रभावी प्रकार Google reCAPTCHA है। यह उन्नत जोखिम विश्लेषण एल्गोरिदम का उपयोग करके वास्तविक उपयोगकर्ताओं और बॉट्स के बीच अंतर करने की जांच करता है।

instagram viewer

Google reCAPTCHA दो संस्करणों में आता है:

  • reCAPTCHA V3: यह संस्करण पृष्ठभूमि में चलता है और उपयोगकर्ता के व्यवहार के आधार पर एक समग्र स्कोर निर्धारित करता है।
  • reCAPTCHA V2: यह संस्करण प्रमाणीकरण फॉर्म पर "मैं रोबोट नहीं हूं" चेकबॉक्स रखता है।

यह मार्गदर्शिका Google reCAPTCHA V2 की खोज करेगी। इसे रिएक्ट एप्लिकेशन में एकीकृत करने का तरीका जानने के लिए आगे पढ़ें।

रीकैप्चा एडमिन कंसोल पर रिएक्ट एप्लिकेशन को पंजीकृत करें

आरंभ करने के लिए, आपको अपने एप्लिकेशन को reCAPTCHA के डेवलपर कंसोल पर पंजीकृत करना होगा। वहां जाओ Google का रीकैप्चा व्यवस्थापक कंसोल, अपने Google खाते से साइन इन करें, और आवश्यक फ़ॉर्म विवरण भरें।

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

एक बार जब यह आपके ऐप को पंजीकृत कर लेता है, तो साइट आपको आपके उत्पन्न रहस्य और साइट कुंजियों के साथ एक नए पृष्ठ पर पुनर्निर्देशित कर देगी।

एक रिएक्ट क्लाइंट बनाएँ

यह प्रोजेक्ट दो गुना है: आप एक रिएक्ट क्लाइंट बनाएंगे जो Google reCAPTCHA और एक के साथ एक साधारण लॉगिन फॉर्म प्रदान करता है। एक्सप्रेस बैकएंड जो उपयोगकर्ता द्वारा reCAPTCHA पूरा करने के बाद उत्पन्न टोकन को सत्यापित करने के लिए reCAPTCHA के API के लिए POST अनुरोध करता है चुनौती।

अपनी प्रोजेक्ट फ़ाइलों को रखने के लिए स्थानीय रूप से एक प्रोजेक्ट फ़ोल्डर बनाएँ। अगला, रिएक्ट एप्लिकेशन बनाएं और वर्तमान निर्देशिका को क्लाइंट की निर्देशिका में बदलें। अपने क्लाइंट फोल्डर की रूट डायरेक्टरी में, एपीआई गुप्त कुंजी और साइट कुंजी को स्टोर करने के लिए एक .env फ़ाइल बनाएँ।

REACT_APP_reCAPTCHA_SITE_KEY = 'कार्यस्थल की कुंजी'
REACT_APP_reCAPTCHA_SECRET_KEY = 'गुप्त कुंजी'

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं गिटहब रिपॉजिटरी.

आवश्यक पैकेज स्थापित करें

Axios स्थापित करें, आप इस लाइब्रेरी का उपयोग ब्राउज़र और रिएक्ट-Google-reCAPTCHA से HTTP अनुरोध करने के लिए करेंगे। यह पैकेज reCAPTCHA API के लिए प्रतिक्रिया-विशिष्ट कार्यान्वयन प्रदान करता है।

एनपीएम प्रतिक्रिया-रिकैप्चा-गूगल एक्सियोस स्थापित करें --save

रिएक्ट एप्लिकेशन में Google reCAPTCHA को एकीकृत करें

खोलें src/App.js फ़ाइल, बॉयलरप्लेट रिएक्ट कोड हटाएं, और नीचे कोड जोड़ें:

यह घटक एक साधारण लॉगिन फॉर्म प्रस्तुत करेगा जिसमें Google reCAPTCHA विजेट शामिल है।

सबसे पहले, रिएक्ट, एक्सियोस और रिएक्ट-गूगल-रिकैप्चा पैकेज आयात करें:

आयात प्रतिक्रिया, {useState, useRef} से'प्रतिक्रिया';
आयात Axios से'अक्षीय';
आयात ReCAPTCHA के से'प्रतिक्रिया-गूगल-रिकैप्चा';

फिर तीन राज्य चर परिभाषित करें: SuccessMsg, errorMsg, औरValidToken। आपका कोड इन राज्यों को सफलतापूर्वक फॉर्म सबमिशन और रीकैप्चा सत्यापन पर अपडेट करेगा। इसके अतिरिक्त, ENV फ़ाइल से साइट और गुप्त कुंजियाँ प्राप्त करें।

समारोहअनुप्रयोग() {
कॉन्स्ट [SuccessMsg, setSuccessMsg] = useState("")
कॉन्स्ट [ErrorMsg, setErrorMsg] = useState("")
कॉन्स्ट [Valid_token, setValidToken] = useState([]);
कॉन्स्ट SITE_KEY = प्रक्रिया.env। REACT_APP_reCAPTCHA_SITE_KEY;
कॉन्स्ट SECRET_KEY = प्रक्रिया.env। REACT_APP_reCAPTCHA_SECRET_KEY;

उपयोगकर्ता द्वारा reCAPTCHA चुनौतियों को पूरा करने के बाद उत्पन्न टोकन को कैप्चर करने के लिए reCAPTCHA घटक को संदर्भित करने वाले useRef हुक को परिभाषित करें।

कॉन्स्ट कैप्चारेफ = यूसेरफ (व्यर्थ);

फिर, उपयोगकर्ता द्वारा लॉगिन फ़ॉर्म सबमिट करने पर कॉल करने के लिए एक हैंडल सबमिट करें फ़ंक्शन बनाएं। यह फ़ंक्शन reCAPTCHA घटक से टोकन प्राप्त करता है और फिर कॉल करता है रीसेट बाद की जाँचों की अनुमति देने के लिए reCAPTCHA को रीसेट करने की विधि।

इसके अलावा, यह जाँचता है कि टोकन मौजूद है या नहीं, और टोकन को सत्यापित करने के लिए वेरिफ़ाईटोकन फ़ंक्शन को कॉल करता है। एक बार जब यह टोकन सत्यापित हो जाता है, तो यह API प्रतिक्रिया डेटा के साथ मान्य टोकन स्थिति को अपडेट कर देगा।

कॉन्स्ट हैंडल सबमिट करें = async (ई) => {
 e.preventDefault ();
होने देना टोकन = CaptchaRef.current.getValue ();
 CaptchaRef.current.reset ();
अगर (टोकन) {
होने देना वैध_टोकन = इंतजार सत्यापित टोकन (टोकन);
 सेट वैलिड टोकन (वैध_टोकन);
अगर (वैध_टोकन [0]।सफलता सत्य) {
सांत्वना देना।लकड़ी का लट्ठा("सत्यापित");
 सेटसफलतासंदेश("हुर्रे!! आपने फॉर्म जमा कर दिया है")
 } अन्य {
सांत्वना देना।लकड़ी का लट्ठा("सत्यापित नहीं है");
 सेट एरर संदेश (" क्षमा मांगना!! सत्यापित करें कि आप बॉट नहीं हैं")
 }
 }
 }

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

कॉन्स्ट सत्यापित टोकन = async (टोकन) => {
होने देना एपीआई रिस्पांस = [];
कोशिश {
होने देना प्रतिक्रिया = इंतजार Axios.post (` http://localhost: 8000/सत्यापन-टोकन', {
 reCAPTCHA_TOKEN: टोकन,
 सीक्रेट_की: SECRET_KEY,
 });
 APIResponse.push (प्रतिक्रिया ['आंकड़े']);
वापस करना एपीआई रिस्पांस;
 } पकड़ना (गलती) {
सांत्वना देनालॉग (त्रुटि);
 }
 };

अंत में, reCAPTCHA कॉम्पोनेंट के साथ एक फॉर्म लौटाएं। यह घटक reCAPTCHA विजेट को कॉन्फ़िगर और प्रदर्शित करने के लिए सहारा के रूप में संदर्भ हुक और साइट कुंजी लेता है।

जब कोई उपयोगकर्ता प्रपत्र सबमिट करता है, तो घटक मान्य टोकन स्थिति के मान के आधार पर एक सफलता या त्रुटि संदेश प्रस्तुत करता है। यदि reCAPTCHA टोकन मान्य है, जिसका अर्थ है कि उपयोगकर्ता ने सफलतापूर्वक reCAPTCHA चुनौतियों को पूरा किया है, तो यह सफलता संदेश प्रदर्शित करता है, अन्यथा, यह त्रुटि संदेश प्रदर्शित करता है।

वापस करना (
"अनुप्रयोग">
"ऐप-हेडर"> 
"लॉगिन फॉर्म">


 {valid_token.length > 0 && मान्य_टोकन [0]।सफलता सत्य
? <h3कक्षा का नाम="टेक्स्ट सक्सेस">{सफलता संदेश}h3>
: <h3कक्षा का नाम="पाठ त्रुटि">{त्रुटि संदेश} h3>}


उपयोक्ता नाम</p>
"मूलपाठ" प्लेसहोल्डर ="उपयोगकर्ता नाम..." />




पासवर्ड</p>
"पासवर्ड" प्लेसहोल्डर = "पासवर्ड..." />


 वर्गनाम ="रिकैप्चा"
 साइटकी = {SITE_KEY}
 रेफरी = {कैप्चारेफ}
 />








निर्यातगलती करना अनुप्रयोग

अंत में, विकास सर्वर चलाएं और अपने ब्राउज़र पर जाएं http://localhost: परिणाम देखने के लिए 3000।

एक्सप्रेस बैकएंड बनाएं

आरंभ करने के लिए, संपूर्ण प्रोजेक्ट फ़ोल्डर की रूट डायरेक्टरी में, एक एक्सप्रेस वेब सर्वर बनाएँ, और इन पैकेजों को स्थापित करें:

एनपीएम एक्सप्रेस कॉर्स एक्सियोस बॉडी-पार्सर स्थापित करें

एक्सप्रेस सर्वर सेट करें

अगला, सर्वर प्रोजेक्ट फ़ोल्डर में index.js फ़ाइल खोलें, और यह कोड जोड़ें:

कॉन्स्ट एक्सप्रेस = ज़रूरत होना('अभिव्यक्त करना')
कॉन्स्ट अक्षीय = ज़रूरत होना('अक्षीय');
कॉन्स्ट कॉर्स = ज़रूरत होना('कॉर्स');
कॉन्स्ट ऐप = एक्सप्रेस ();
कॉन्स्ट बॉडीपार्सर = ज़रूरत होना('बॉडी-पार्सर');
कॉन्स्ट jsonParser = bodyParser.json ();
कॉन्स्ट पोर्ट = प्रक्रिया.env। पोर्ट || 8000;


app.use (jsonParser);
app.use (cors ());


ऐप पोस्ट ("/ सत्यापित-टोकन", async (अनुरोध, रेस) => {
कॉन्स्ट {reCAPTCHA_TOKEN, Secret_Key} = req.body;


कोशिश {
होने देना प्रतिक्रिया = इंतजार axios.post (` https://www.google.com/recaptcha/api/siteverify? गुप्त =${सीक्रेट_की}और प्रतिक्रिया =${reCAPTCHA_TOKEN}`);
सांत्वना देनालॉग (प्रतिक्रिया.डेटा);


वापस करना res.status (200.json({
 सफलता:सत्य,
 संदेश: "टोकन सफलतापूर्वक सत्यापित",
 सत्यापन_जानकारी: प्रतिक्रिया.डेटा
 });
 } पकड़ना(गलती) {
सांत्वना देनालॉग (त्रुटि);


वापस करना res.status (500.json({
 सफलता:असत्य,
 संदेश: "टोकन सत्यापित करने में त्रुटि"
 })
 }
});
app.listen (पोर्ट, () => सांत्वना देना।लकड़ी का लट्ठा(`ऐप बंदरगाह पर शुरू हुआ ${पोर्ट}`));

यह कोड निम्न कार्य करता है:

  • सर्वर एक पोस्ट रूट को परिभाषित करता है जो Google के reCAPTCHA API के लिए एसिंक्रोनस HTTP POST अनुरोध करता है अनुरोध URL में प्रमाणीकरण के लिए गुप्त कुंजी के साथ गुजरते हुए, Axios का उपयोग करके reCAPTCHA टोकन को सत्यापित करें।
  • यदि reCAPTCHA टोकन सफलतापूर्वक सत्यापित हो जाता है, तो सर्वर JSON ऑब्जेक्ट के साथ प्रतिक्रिया करता है जिसमें "सफलता" गुण सत्य पर सेट होता है, एक "संदेश" गुण इंगित करता है कि टोकन सफलतापूर्वक सत्यापित किया गया था, और एक "verification_info" संपत्ति जिसमें Google की ओर से सत्यापन प्रतिक्रिया के बारे में जानकारी है एपीआई।
  • यदि सत्यापन प्रक्रिया के दौरान कोई त्रुटि होती है, तो सर्वर एक JSON ऑब्जेक्ट के साथ प्रतिक्रिया करता है जिसमें a "सफलता" संपत्ति गलत पर सेट है और एक "संदेश" संपत्ति इंगित करती है कि सत्यापन करने में त्रुटि हुई थी टोकन।

अंत में, नोड सर्वर चलाएँ और reCAPTCHA सुविधा कार्यक्षमता का परीक्षण करें।

नोड index.js

क्या रीकैप्चा स्पैमबॉट्स के खिलाफ सुरक्षा की गारंटी दे सकता है?

Google के अनुसार, इसकी reCAPTCHA सेवा की सफलता दर 99% से अधिक है, जिसका अर्थ है कि स्पैम का केवल एक छोटा प्रतिशत ही reCAPTCHA सुरक्षा सुविधा को बायपास कर सकता है।

reCAPTCHA फुलप्रूफ नहीं है, क्योंकि दृढ़ निश्चयी बुरे कलाकार अभी भी वर्कअराउंड पा सकते हैं। लेकिन यह एक आवश्यक उपकरण बना हुआ है जो स्पैम्बोट्स से होने वाले जोखिम को महत्वपूर्ण रूप से कम कर सकता है।