Vue js google reCaptcha回調

Question

我想要在組件中使用vue js進行recaptcha回調。驗證碼本身確實有效，但不是我在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

我不使用組件，但我有同樣的問題，最後我解決這個問題是這樣的：

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

我碰到這個來問題也需要我花2天才能解決。

因此，我將在這裏提供一個從一開始就從頭開始整合recaptcha與vue.js的一般答案，以便爲將來處於相同情境的人員提供一個簡單指南（我假設vue-cli是在這裏使用）。

注：我使用這裏看不見驗證碼，但這個過程是非常相似的正常的

第1步：

的ReCaptcha的JavaScript API添加到您的索引.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：

導入recaptcha組件並將其添加到您的頁面（父組件）中。

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>