Vue.js 谷歌验证码回调

Question

我正在尝试让 recaptcha 回调在组件中与 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 函数被调用。我究竟做错了什么？

原文由 user2209644 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我也遇到了这个问题，我花了2天时间才解决。

因此，我将在这里提供一个从头开始逐步将 recaptcha 与 vue.js 集成的一般答案，以作为将来遇到相同情况的人的简单指南（我假设这里使用的是 vue-cli）。

注意： 我在这里使用的是不可见的 recaptcha，但过程与普通的过程非常相似

步骤1：

将 recaptcha javascript api 添加到您的 index.html

索引.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 组件并将其添加到您的页面（父组件）。

页面.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>

原文由 Abdelaziz Mokhnache 发布，翻译遵循 CC BY-SA 3.0 许可协议