👐🏼 🛌🏿 🐰 Google reCAPTCHA को Vue से कनेक्ट करना और सर्वर पर प्रतिक्रिया को मान्य करना 🎼 🚵 👩🏼

इस लेख में मैं दिखाऊंगा कि गूगल से कैप्चा कैसे कनेक्ट करें (reCAPTCHA) Vue JS से और सर्वर पर प्रतिक्रिया को मान्य करें (मैं एक उदाहरण के रूप में लारवेल / लुमेन पर बैकएंड का उपयोग करता हूं, लेकिन सत्यापन का सिद्धांत सभी प्रौद्योगिकियों के लिए समान है)।

प्रस्तावना

हम अदृश्य reCAPTCHA का उपयोग करेंगे।
यह एक अदृश्य * कैप्चा है, जिसे तब तक पारित करने की आवश्यकता नहीं है जब तक कि सिस्टम इसे आवश्यक नहीं मानता । साइट व्यवस्थापक एक थ्रेशोल्ड स्तर (सुरक्षा वरीयता) सेट कर सकता है, जिस पर सिस्टम को उपयोगकर्ता को अतिरिक्त सत्यापन से गुजरना होगा।

* - reCAPTCHA आइकन अभी भी पृष्ठ पर मौजूद होना चाहिए।

साइट पर अदृश्य कैप्चा।

प्रश्न / उत्तर

काम शुरू करने से पहले, मैं उन सवालों का जवाब देना चाहूंगा, जब मैंने Google reCAPTCHA के साथ काम करना शुरू किया था।

प्रश्न: reCAPTCHA की लागत कितनी है?
A: Google से ReCAPTCHA एक निःशुल्क टूल है।

प्रश्न: यदि साइट पर पहले ही कैप्चा पास हो गया है, तो मुझे बैकएंड पर उपयोगकर्ता की प्रतिक्रिया की जांच करने की आवश्यकता क्यों है?
A: जब आप सर्वर से अनुरोध करते हैं, तो आप कुछ इस तरह से भेजते हैं:

POST /register 1.1 HTTP Host: www.example.com { "email:"user@gmail.com", "password": "supersecret", "recaptcha-token":"01ASJASJFZ_AASD3115..." }

यदि आप बैकेंड पर कैप्चा टोकन की जांच नहीं करते हैं, तो बॉट इस टोकन के बिना अनुरोधों के साथ स्पैम कर सकते हैं या इसे डमी के साथ बदल सकते हैं।

प्रश्न: मेरी प्रतिक्रिया है, मुझे क्या करना चाहिए?
A: रिएक्ट JS एक बहुत अच्छी बात है। यदि आप इसे वेबसाइट के विकास के लिए उपयोग करते हैं, तो मैं आपको https://github.com/appleboy/react-recaptcha पर ध्यान देने की सलाह देता हूं। ऑपरेशन का सिद्धांत Vue के साथ उदाहरण के समान है।

काम पर लगना

इसलिए, इससे पहले कि हम खाना बनाना शुरू करें, हमें सामग्री की एक सूची चाहिए:

Vue पर परियोजना ( https://vuejs.org )
Vue ( https://github.com/DanSnow/vue-recaptcha ) के लिए घटक
Google reCAPTCHA स्क्रिप्ट ( https://www.google.com/recaptcha/api.js )
सर्वर को अनुरोध भेजने के लिए Axios ( https://www.npmjs.com/package/axios )
Google API के बैकएंड से अनुरोध भेजने के लिए गज़ल HTTP PHP क्लाइंट ( https://github.com/guzzle/guzzle )
बैकएंड

चरण # 1: अपनी साइट पर reCAPTCHA का उपयोग करने के लिए कुंजियाँ प्राप्त करें

हमें Google वेबसाइट पर साइट कुंजी और गुप्त कुंजी प्राप्त करने की आवश्यकता है: https://www.google.com/recaptcha/admin#list

आप लेबल फ़ील्ड में कुछ भी लिख सकते हैं।

अगला, प्रकार का चयन करें - अदृश्य reCAPTCHA बिल्ला ।

आप कई डोमेन निर्दिष्ट कर सकते हैं, जिस पर आप कैप्चा का उपयोग करेंगे।
एक उदाहरण के रूप में, मैंने yourawesomedomain.com और localhost को इंगित किया है।

हम उपयोग की शर्तों को स्वीकार करते हैं और आगे बढ़ते हैं।

आपको दो चाबियां दी गई हैं, उन्हें सुरक्षित स्थान पर रखें। हम बाद में उनके पास लौट आएंगे।

चरण # 2: सामने। कैप्चा को हमारे फॉर्म में इंस्टॉल करना और कनेक्ट करना

आरंभ करने के लिए, हमें इस कोड को हेड सेक्शन में जोड़ना होगा:

 <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script>

ओनलोड संपत्ति हमारे घटक को बताएगी कि कैप्चा उपयोग के लिए तैयार है।

अगला मैं तैयार घटक दिखाऊंगा और हम इसे भागों में विश्लेषण करेंगे:

 <template> <div id="app"> <div class="container my-4"> <div class="row justify-content-center"> <div class="col-md-8"> <h2 class="text-center mb-4"> Sign Up Form with Google reCAPTCHA </h2> <form method="post" @submit.prevent="validate"> <div class="form-group"> <input type="email" name="email" class="form-control" placeholder="Enter your e-mail address" required /> </div> <div class="form-group"> <input type="password" name="password" class="form-control" placeholder="Enter your password" required /> </div> <div class="form-group"> <vue-recaptcha ref="recaptcha" size="invisible" :sitekey="sitekey" @verify="register" @expired="onCaptchaExpired" /> <button type="submit" class="btn btn-primary btn-block"> Sign Up </button> </div> </form> </div> </div> </div> </div> </template> <script> import VueRecaptcha from 'vue-recaptcha' export default { name: 'Register', components: { VueRecaptcha }, data () { return { email: null, password: null, sitekey: ' SITE KEY' } }, methods: { register (recaptchaToken) { axios.post('https://yourserverurl.com/register', { email: this.email, password: this.password, recaptchaToken: recaptchaToken }) }, validate () { //       // ,   vee validate //       ,   this.$refs.recaptcha.execute() }, onCaptchaExpired () { this.$refs.recaptcha.reset() } } } </script>

घटक उदाहरण VideVateate का उपयोग फ़ील्ड्स को मान्य करने के लिए

 <template> <div id="app"> <div class="container my-4"> <div class="row justify-content-center"> <div class="col-md-8"> <h2 class="text-center mb-4"> Sign Up Form with Google reCAPTCHA </h2> <form method="post" @submit.prevent="validate"> <div class="form-group"> <input type="email" name="email" class="form-control" placeholder="Enter your e-mail address" v-validate.disable="'required|email'" required /> <div v-show="errors.has('email')" class="invalid-feedback d-block" > {{ errors.first('email') }} </div> </div> <div class="form-group"> <input type="password" name="password" class="form-control" placeholder="Enter your password" v-validate.disable="'required|min:6|max:32'" required /> <div v-show="errors.has('password')" class="invalid-feedback d-block" > {{ errors.first('password') }} </div> </div> <div class="form-group"> <vue-recaptcha ref="recaptcha" size="invisible" :sitekey="sitekey" @verify="register" @expired="onCaptchaExpired" /> <button type="submit" class="btn btn-primary btn-block"> Sign Up </button> </div> </form> </div> </div> </div> </div> </template> <script> import VueRecaptcha from 'vue-recaptcha' export default { name: 'Register', components: { VueRecaptcha }, data () { return { email: null, password: null, sitekey: ' SITE KEY' } }, methods: { register (recaptchaToken) { axios.post('https://yourserverurl.com/register', { email: this.email, password: this.password, recaptchaToken: recaptchaToken }) }, validate () { const self = this self.$validator.validateAll().then((result) => { if (result) { self.$refs.recaptcha.execute() } }) }, onCaptchaExpired () { this.$refs.recaptcha.reset() } } } </script>

शुरू करने के लिए, हमने अपने घटक में Vue-Recaptcha का आयात किया:

 import VueRecaptcha from 'vue-recaptcha' ... components: { VueRecaptcha },

अगला, हमने डेटा में साइटकी संपत्ति घोषित की () घटक:

 data () { return { ... sitekey: ' SITE KEY' } },

हमारे फॉर्म में Vue-Recaptcha घटक जोड़ें:

 <vue-recaptcha ref="recaptcha" size="invisible" :sitekey="sitekey" @verify="register" @expired="onCaptchaExpired" />

कैप्चा के सफल समापन पर रजिस्टर विधि को बुलाया जाएगा, जबकि समय सीमा समाप्त होने पर कैप्चा की समाप्ति पर कॉल किया जाएगा।

OnCaptchaExpired विधि कैप्चा को पुनरारंभ करता है:

 onCaptchaExpired () { this.$refs.recaptcha.reset() }

फॉर्म पर ही, हम @ submit.prevent = "validate" ईवेंट जोड़ते हैं, जो फॉर्म सबमिट होने पर वैद्य विधि को ट्रिगर करता है।

 validate () { this.$refs.recaptcha.execute() }

इस प्रक्रिया को निम्नानुसार वर्णित किया जा सकता है:

उपयोगकर्ता ने डेटा दर्ज किया और साइन अप बटन पर क्लिक किया, सत्यापन () फ़ंक्शन को कहा जाता है।
मान्य () फ़ंक्शन कैप्चा शुरू करता है, अगर उपयोगकर्ता इसे सफलतापूर्वक पास करता है, तो रजिस्टर विधि कहा जाता है।

रजिस्टर विधि में, हमें एक रिकैप्टचोकेन मिलता है, जिसे हमें उपयोगकर्ता द्वारा दर्ज किए गए डेटा के साथ सर्वर को भेजना होगा:

 register (recaptchaToken) { axios.post('https://yourserverurl.com/register', { email: this.email, password: this.password, recaptchaToken: recaptchaToken }) }

इस पर फ्रंट-एंड के साथ हमारा काम पूरा हो गया है। ReCAPTCHA सफलतापूर्वक स्थापित और चल रहा है।

PS यदि आप कई घटकों में कैप्चा का उपयोग करने जा रहे हैं, तो साइट को .env फ़ाइल में रखना और प्रक्रिया का उपयोग करके इसे प्राप्त करना सबसे अच्छा है ।

 data () { return { ... sitekey: process.env.VUE_APP_RECAPTCHA_TOKEN } },

चरण # 3: सत्यापन का समर्थन करें। लारवेल और लुमेन पर मान्यकरण उदाहरण

प्रतिक्रिया को सर्वर पर सत्यापन करना बहुत सरल है। चलो लारवेल उदाहरण के साथ शुरू करते हैं।

1) कॉन्फ़िगर फ़ोल्डर में, निम्नलिखित सामग्री के साथ एक recaptcha.php फ़ाइल बनाएं:

 <?php return [ 'enabled' => env('RECAPTCHA_ENABLED', true), 'key' => env('RECAPTCHA_SITE_KEY'), 'secret' => env('RECAPTCHA_SECRET_KEY'), ];

2) उसके बाद, चर को .env फ़ाइल में जोड़ें:

 RECAPTCHA_ENABLED=FALSE RECAPTCHA_SITE_KEY=_SITE_KEY RECAPTCHA_SECRET_KEY=_SECRET_KEY

3) Google API अनुरोध भेजने में सक्षम होने के लिए GuzzleHttp स्थापित करें:

 composer require guzzlehttp/guzzle

4) नियंत्रक में, CheckRecaptcha विधि जोड़ें:

 protected function checkRecaptcha($token, $ip) { $response = (new Client)->post('https://www.google.com/recaptcha/api/siteverify', [ 'form_params' => [ 'secret' => config('recaptcha.secret'), 'response' => $token, 'remoteip' => $ip, ], ]); $response = json_decode((string)$response->getBody(), true); return $response['success']; }

इस विधि में, हम https://www.google.com/recaptcha/api/siteverify पर POST विधि का उपयोग करके अपना टोकन (जिसे हमें फ्रंटेंड से प्राप्त हुआ है) भेजते हैं

5) रजिस्टर विधि में (आपके मामले में, नाम अलग-अलग हो सकता है, यह वह विधि है, जिसके लिए आपने पोस्ट को अनुरोध से भेजा है) निम्नलिखित कोड जोड़ें:

 if (config('recaptcha.enabled') && !$this->checkRecaptcha($request->recaptcha_token, $request->ip())) { return return response()->json([ 'error' => 'Captcha is invalid.', ], Response::HTTP_BAD_REQUEST); }

सब कुछ उपयोग करने के लिए तैयार है!

रजिस्टर विधि का उपयोग करते समय, हम ईमेल, पासवर्ड और recaptcha_token प्राप्त करते हैं।
यदि पुनरावृत्ति सक्षम है (.env फ़ाइल में, RECAPTCHA_ENABLED का मान TRUE है),
लारवेल Google API अनुरोध भेजेगा।
यदि उत्तर नहीं है, तो हम पाठ के साथ एक त्रुटि लौटाते हैं: कैप्चा अमान्य है।
यदि सकारात्मक है, तो उपयोगकर्ता पंजीकरण जारी रखें।

टोकन यात्रा दृश्य प्रस्तुति।

पूर्ण नियंत्रक कोड इस तरह दिखेगा:

 <?php namespace App\Http\Controllers\Users; use App\Http\Controllers\Controller; use Illuminate\Http\Request; use Illuminate\Http\Response; use GuzzleHttp\Client; class UserController extends Controller { protected function checkRecaptcha($token, $ip) { $response = (new Client)->post('https://www.google.com/recaptcha/api/siteverify', [ 'form_params' => [ 'secret' => config('recaptcha.secret'), 'response' => $token, 'remoteip' => $ip, ], ]); $response = json_decode((string)$response->getBody(), true); return $response['success']; } public function register(Request $request) { $request->validate([ 'email' => 'required|string|email|unique:users|max:255', 'password' => 'required|string|max:32|min:6', 'recaptcha_token' => 'string' ]); if (config('recaptcha.enabled') && !$this->checkRecaptcha($request->recaptcha_token, $request->ip())) { return response()->json([ 'error' => 'Captcha is invalid.', ], Response::HTTP_BAD_REQUEST); } //  .  ... } }

लुमेन की प्रतिक्रिया की पुष्टि

लुमेन पर, हम लारवेल उदाहरण में सब कुछ उसी तरह करते हैं, सिवाय इसके कि हमें बूटस्ट्रैप / app.php में अपने कॉन्फिगर ( recaptcha.php ) को पंजीकृत करने की आवश्यकता है:

 $app->configure('recaptcha');

निष्कर्ष

तो, इस लेख में, आपने सीखा कि अपने Vue प्रोजेक्ट में Google reCAPTCHA का उपयोग कैसे करें।

अपने संसाधन को बॉट्स से बचाने के लिए ReCAPTCHA एक बेहतरीन फ्री टूल है।
अदृश्य कैप्चा के साथ आप आगंतुकों को किसी भी कार्रवाई करने की आवश्यकता के बिना जांच कर सकते हैं।

कोडपेन पर एक लेख से उदाहरण आवेदन

उपयोग किए गए स्रोत:

Google reCAPTCHA को Vue से कनेक्ट करना और सर्वर पर प्रतिक्रिया को मान्य करना