Vue js google reCaptcha Rückruf

Question

Ich versuche, recaptcha Rückruf mit Vue js in einer Komponente zu bekommen. Das Captcha selbst funktioniert, aber nicht der Callback, den ich im Attribut data-callback definiere.

Ich habe alles versucht, was ich denken konnte, aber ich bekomme immer noch die ReCAPTCHA couldn't find user-provided function: dothisthat Fehler.

Hier ist die Komponente

<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> 

Nicht einer der dothisthat Funktionen aufgerufen zu werden. Was mache ich falsch?

Answer 1

Ich verwende Komponente nicht, aber ich hatte das gleiche Problem, und schließlich ich es so lösen:

HTML

<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> 

JS

// ... 
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

ich auf diese kam Problem auch und es dauerte 2 Tage, um es zu lösen.

Also werde ich hier eine allgemeine Antwort geben für die Integration von Recaptcha mit vue.js von Grund auf Schritt für Schritt, um eine einfache Anleitung für Leute zu sein, die in der gleichen Situation in der Zukunft sein werden (ich nehme an, dass vue-cli ist hier benutzt).

Hinweis: ich hier das unsichtbare recaptcha bin mit aber der Prozess ist ziemlich ähnlich wie die normale

Schritt 1:

die recaptcha JavaScript-API zu Ihrem Index hinzufügen .html

index.html

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

Schritt 2:

eine Komponente Recaptcha genannt machen oder was auch immer Sie es nennen wollen (was eine Komponente wird Ihr Code einfacher machen leichter zu lesen, zu erhalten und leichter recaptcha mehr als hinzufügen eine Seite, wenn Sie benötigen)

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> 

Schritt 3:

Importieren Sie die Recaptcha-Komponente und fügen Sie sie zu Ihrer Seite hinzu (übergeordnete Komponente).

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>