वू जेएस google reCaptcha कॉलबैक

Question

मैं एक घटक में vue js के साथ काम कर रहे रिकैप्चा कॉलबैक प्राप्त करने का प्रयास कर रहा हूं। कैप्चा स्वयं काम करता है, लेकिन कॉलबैक नहीं जिसे मैं data-callback विशेषता में परिभाषित करता हूं।

मैंने जो कुछ भी सोचा था, मैंने कोशिश की है, लेकिन मुझे अभी भी ReCAPTCHA couldn't find user-provided function: dothisthat त्रुटि मिलती है।

यहाँ घटक

<script> 
    function dothisthat(){ 
      alert(312); 
     } 
</script> 

<template> 
    <div class="well main-well"> 
     <h4>Captcha</h4> 
     <p class="small">You must complete the captcha to finish your booking.</p> 
     <div id="captcha-wrapper"> 
      <div class="g-recaptcha" :data-sitekey="captchaKey" data-callback="dothisthat"></div> 
     </div> 
    </div> 
</template> 
<script> 
    function dothisthat(){ 
     alert(123); 
    } 
    import * as filters from '../../../filters'; 
    import Translation from '../../../Translation'; 

    export default { 
     name: 'Captcha', 
     props: { 
     }, 
     computed: { 
      captchaKey: function() { 
       return this.$store.getters.captcha; 
      } 
     }, 
     methods: { 
      dothisthat: function(){ 
       return function() { 
        console.log("123"); 
       }; 
      } 
     }, 
     mounted(){ 

      function dothisthat() { 
       alert(123); 
      } 
      $(function() { 
       function dothisthat() { 
        alert(123); 
       } 
      }); 
     } 
    } 
</script> 

नहीं dothisthat कार्यों में से एक कहा जाता हो रहे है। मैं क्या गलत कर रहा हूँ?

Answer 1

मैं घटक का उपयोग कर रहा है, लेकिन मैं एक ही समस्या थी, और अंत में मैं इसे इस तरह हल:

एचटीएमएल

<div id="recaptcha" class="g-recaptcha"></div> 
<button id="submit" @click="validate">Submit</button> 
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script> 

जे एस

// ... 
mounted: function() { 
    this.initReCaptcha(); 
}, 
methods: { 
    initReCaptcha: function() { 
     var self = this; 
     setTimeout(function() { 
      if(typeof grecaptcha === 'undefined') { 
       self.initReCaptcha(); 
      } 
      else { 
       grecaptcha.render('recaptcha', { 
        sitekey: 'SITE_KEY', 
        size: 'invisible', 
        badge: 'inline', 
        callback: self.submit 
       }); 
      } 
     }, 100); 
    }, 
    validate: function() { 
     // your validations... 
     // ... 
     grecaptcha.execute(); 
    }, 
    submit: function(token) { 
     console.log(token); 
    } 
}, 

Answer 2

मैं इस में आए समस्या भी है और इसे हल करने में मुझे 2 दिन लगे।

तो मैं यहां स्क्रैच चरण से vue.js के साथ रिकैप्चा को एकीकृत करने के लिए एक सामान्य उत्तर प्रदान करूंगा, ताकि भविष्य में एक ही स्थिति में रहने वाले लोगों के लिए एक आसान मार्गदर्शिका हो (मुझे लगता है कि वू-क्ली यहां इस्तेमाल किया गया)।

नोट: मैं यहाँ अदृश्य recaptcha उपयोग कर रहा हूँ लेकिन इस प्रक्रिया में बहुत सामान्य से एक

चरण 1 के समान है:

अपनी अनुक्रमणिका को recaptcha जावास्क्रिप्ट एपीआई जोड़ने .html

index.html

<script src="https://www.google.com/recaptcha/api.js" async defer></script> 

चरण 2:

बनाने के एक घटक Recaptcha कहा जाता है या जो भी आप इसे कहते हैं (और अधिक से अधिक करने के लिए recaptcha जोड़ना आसान एक घटक अपने कोड को आसान बनाए रखने के लिए, पढ़ने के लिए आसान हो जाएगा बनाने चाहते हैं एक पृष्ठ है, तो आप की जरूरत)

Recaptcha.vue

<template> 
    <div 
    id="g-recaptcha" 
    class="g-recaptcha" 
    :data-sitekey="sitekey"> 
    </div> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     sitekey: '6LfAEj0UAAAAAFTGLqGozrRD8ayOy*********', 
     widgetId: 0 
    } 
    }, 
    methods: { 
    execute() { 
     window.grecaptcha.execute(this.widgetId) 
    }, 
    reset() { 
     window.grecaptcha.reset(this.widgetId) 
    }, 
    render() { 
     if (window.grecaptcha) { 
     this.widgetId = window.grecaptcha.render('g-recaptcha', { 
      sitekey: this.sitekey, 
      size: 'invisible', 
      // the callback executed when the user solve the recaptcha 
      callback: (response) => { 
      // emit an event called verify with the response as payload 
      this.$emit('verify', response) 
      // reset the recaptcha widget so you can execute it again 
      this.reset() 
      } 
     }) 
     } 
    } 
    }, 
    mounted() { 
    // render the recaptcha widget when the component is mounted 
    this.render() 
    } 
} 
</script> 

चरण 3:

रिकैप्चा घटक आयात करें और इसे अपने पृष्ठ (मूल घटक) में जोड़ें।

page.vue

<template> 
    <div> 
    <h1>Parent component (your page)</h1> 
    <button @click="executeRecaptcha">execute recaptcha</button> 
    <!-- listen to verify event emited by the recaptcha component --> 
    <recaptcha ref="recaptcha" @verify="submit"></recaptcha> 
    </div> 
</template> 

<script> 
import Recaptcha from 'recaptcha' 
export default { 
    components: { 
    Recaptcha 
    }, 
    methods: { 
    // send your recaptcha token to the server to verify it 
    submit (response) { 
     console.log(response) 
    }, 
    // execute the recaptcha widget 
    executeRecaptcha() { 
     this.$refs.recaptcha.execute() 
    } 
    } 
} 
</script>