Javascript Vue.js google reCaptcha回调

我正试图让recaptcha回调在组件中使用vue.js。验证码本身确实有效，但不是我在

数据回调

属性中定义的回调

我已经尝试了我能想到的一切，但我仍然得到了

ReCAPTCHA无法找到用户提供的函数：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（）{
警报（312）；
}
验证码
您必须完成验证码才能完成预订
函数dothisthat（）{
警报（123）；
}
从“../../../filters”导入*作为筛选器；
从“../../../Translation”导入翻译；
导出默认值{
名称：'验证码'，
道具：{
},
计算：{
captchaKey:function（）{
返回此。$store.getters.captcha；
}
},
方法：{
dothisthat:function（）{
返回函数（）{
控制台日志（“123”）；
};
}
},
安装的（）{
函数dothisthat（）{
警报（123）；
}
$（函数（）{
函数dothisthat（）{
警报（123）；
}
});
}
}

未调用任何一个

dothisthat

函数。

---

我做错了什么？

我没有使用组件，但我遇到了相同的问题，最后我像这样解决了它：

  <div>
    <p>A tiny recaptcha demo</p>
    <recaptcha2 @change="robotChange"></recaptcha2>
    <p>Is human? {{isHuman}}
    <button :disabled="isSendDisabled">Send now</button>
  </div>

HTML

---

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

因此，我将在这里提供一个从零开始逐步将recaptcha与vue.js集成的一般答案，以方便将来遇到相同情况的人使用（我假设这里使用vue cli）

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

第1步：

将recaptcha javascript api添加到index.html

index.html

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

第三步：

导入recaptcha组件并将其添加到页面（父组件）

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

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

父组件（您的页面）
执行recaptcha
从“Recaptcha”导入Recaptcha
导出默认值{
组成部分：{
雷帕查
},
方法：{
//将您的recaptcha令牌发送到服务器以进行验证
提交（答复）{
console.log（响应）
},
//执行recaptcha小部件
ExecuteCaptcha（）{
这是。$refs.recaptcha.execute（）
}
}
}

如果您只是为了在服务器端验证而查找recaptcha的响应值，那么一个简单的解决方案是将recaptcha元素放入表单中，并从submit

事件的目标元素中获取响应值

<form class="container"
  @submit="checkForm"
  method="post"
>

... // other elements of your form 

<div class="g-recaptcha" data-sitekey="your_site_key"></div>

<p>
    <input class="button" type="submit" value="Submit">
</p>
</form>

我在其他解决方案中遇到的问题是，当ReCaptcha未完全加载时，它有时会尝试执行
window.grecaptcha.render
。根据他们的要求检查的唯一方法是使用
onload
方法

下面的示例就是我如何使用它的，当然，您可以自定义回调的操作

ReCaptcha.Vue:

<template>
    <div ref="grecaptcha"></div>
</template>

<script>
    export default {

        props: ['sitekey'],

        methods: {

            loaded(){

                window.grecaptcha.render(this.$refs.grecaptcha, {
                    sitekey: this.sitekey,
                    callback: (response) => {

                        this.$emit('input', response);

                    },
                });

            },

        },

        mounted(){

            /**
             * Set Recapchat loaded function
             */
            window.ReCaptchaLoaded = this.loaded;

            /**
             * Set Recaptcha script in header
             */
            var script = document.createElement('script');
            script.src = 'https://www.google.com/recaptcha/api.js?onload=ReCaptchaLoaded&render=explicit';
            document.head.appendChild(script);

        }

    }
</script>


导出默认值{
道具：['sitekey']，
方法：{
加载（）{
window.grecaptcha.render（此.$refs.grecaptcha{
sitekey:this.sitekey，
回调：（响应）=>{
此.$emit（'输入'，响应）；
},
});
},
},
安装的（）{
/**
*设置已加载的函数
*/
window.ReCaptchaLoaded=this.loaded；
/**
*在标头中设置Recaptcha脚本
*/
var script=document.createElement（'script'）；
script.src=https://www.google.com/recaptcha/api.js?onload=ReCaptchaLoaded&render=explicit';
document.head.appendChild（脚本）；
}
}

用法：

<ReCaptcha sitekey="KEY" v-model="fields.g_recaptcha_response.value" />



在模板中：html

<template>
<form @submit.prevent="onSubmit">
    <div class="form-group row">
        <label for="email" class="col-sm-4 col-form-label text-md-right">Email : </label>

        <div class="col-md-6">
            <input v-model="email" id="email"  type="email" class="form-control"  value="" required autofocus>


            <span class="invalid-feedback" role="alert">
                                    <strong></strong>
                                </span>

        </div>
    </div>

    <div class="form-group row">
        <label for="password" class="col-md-4 col-form-label text-md-right">
            Password :
        </label>

        <div class="col-md-6">
            <input v-model="password" id="password" type="password" class="form-control"  required>


            <span class="invalid-feedback" role="alert">
                                    <strong></strong>
                                </span>

        </div>
    </div>

    <div class="form-group row">
        <div class="col-md-6 offset-md-4">
            <div class="form-check">

                <input class="form-check-input" type="checkbox" id="remember" v-model="remember">

                <label class="form-check-label" for="remember">
                   Remember me
                </label>
                <div id="recaptcha" class="g-recaptcha" data-sitekey="6LehfpsUAAAAAIf3hvWNrGvat8o4lypZh_p6snRH"></div>
            </div>
        </div>
    </div>

    <div class="form-group row mb-0">
        <div class="col-md-8 offset-md-4">
            <a href="" class="btn btn-danger">Login with google</a>
            <button type="submit" class="btn btn-primary">
                Login
            </button>

            <a class="btn btn-link" href="">
                Forgot Your Password?
            </a>
        </div>
    </div>
</form>


电邮：

密码：

记得我吗
登录


和javascript：

<script>
import swal from 'sweetalert';
export default {
   data(){

       return {
           email: '',
           password: '',
           remember: ''
       }

   },
    mounted: function() {
        this.initReCaptcha();
    },
    methods: {
        onSubmit(event) {

            let recaptcha_response_value = event.target['g-recaptcha-response'].value;
            console.log(recaptcha_response_value);
            let formData = new FormData();
            formData.append('email' , this.email);
            formData.append('password' , this.password);
            formData.append('remember' , this.remember);
            formData.append('g-recaptcha-response' , recaptcha_response_value);
            axios.post('/login' , formData)
                .then(
                    function(res){
                        swal('ورود شما موفقیت آمیز بود');
                    }
                )
                .catch(function(err){
                    swal('ایمیل یا کلمه عبور اشتباه است یا اینکه هنوز ثبت نام نکرده اید');
                    console.log(err);
                });

        }
    }

}


从“sweetalert”进口污水；
导出默认值{
数据（）{
返回{
电子邮件：“”，
密码：“”，
记住：''
}
},
挂载：函数（）{
this.initReCaptcha（）；
},
方法：{
提交（事件）{
让recaptcha_response_value=event.target['g-recaptcha-response'].value；
console.log（recomptcha\u响应\u值）；
设formData=new formData（）；
formData.append（'email'，this.email）；
formData.append（'password'，this.password）；
formData.append（'memory'，this.memory）；
formData.append（'g-recaptcha-response'，recaptcha\U response\U值）；
axios.post（'/login'，formData）
.那么(
功能（res）{
泥水；
}
)
.catch（函数（err）{
泥水?
in Vue Component : 

<template>
<form @submit.prevent="onSubmit">
    <div class="form-group row">
        <label for="email" class="col-sm-4 col-form-label text-md-right">Email : </label>

        <div class="col-md-6">
            <input v-model="email" id="email"  type="email" class="form-control"  value="" required autofocus>


            <span class="invalid-feedback" role="alert">
                                    <strong></strong>
                                </span>

        </div>
    </div>

    <div class="form-group row">
        <label for="password" class="col-md-4 col-form-label text-md-right">
            Password :
        </label>

        <div class="col-md-6">
            <input v-model="password" id="password" type="password" class="form-control"  required>


            <span class="invalid-feedback" role="alert">
                                    <strong></strong>
                                </span>

        </div>
    </div>

    <div class="form-group row">
        <div class="col-md-6 offset-md-4">
            <div class="form-check">

                <input class="form-check-input" type="checkbox" id="remember" v-model="remember">

                <label class="form-check-label" for="remember">
                   Remember me
                </label>
                <div id="recaptcha" class="g-recaptcha" data-sitekey="6LehfpsUAAAAAIf3hvWNrGvat8o4lypZh_p6snRH"></div>
            </div>
        </div>
    </div>

    <div class="form-group row mb-0">
        <div class="col-md-8 offset-md-4">
            <a href="" class="btn btn-danger">Login with google</a>
            <button type="submit" class="btn btn-primary">
                Login
            </button>

            <a class="btn btn-link" href="">
                Forgot Your Password?
            </a>
        </div>
    </div>
</form>

<script>
import swal from 'sweetalert';
export default {
   data(){

       return {
           email: '',
           password: '',
           remember: ''
       }

   },
    mounted: function() {
        this.initReCaptcha();
    },
    methods: {
        onSubmit(event) {

            let recaptcha_response_value = event.target['g-recaptcha-response'].value;
            console.log(recaptcha_response_value);
            let formData = new FormData();
            formData.append('email' , this.email);
            formData.append('password' , this.password);
            formData.append('remember' , this.remember);
            formData.append('g-recaptcha-response' , recaptcha_response_value);
            axios.post('/login' , formData)
                .then(
                    function(res){
                        swal('ورود شما موفقیت آمیز بود');
                    }
                )
                .catch(function(err){
                    swal('ایمیل یا کلمه عبور اشتباه است یا اینکه هنوز ثبت نام نکرده اید');
                    console.log(err);
                });

        }
    }

}

  <div>
    <p>A tiny recaptcha demo</p>
    <recaptcha2 @change="robotChange"></recaptcha2>
    <p>Is human? {{isHuman}}
    <button :disabled="isSendDisabled">Send now</button>
  </div>

<vue-recaptcha
  @verify="onVerify"
  :sitekey="this.key"
  :loadRecaptchaScript='true' // vue-recaptcha will inject <script src='//google.com/recaptcha/api.js'></script> in head
  @expired="onCaptchaExpired"
  ref="recaptcha"
 ></vue-recaptcha>

import VueRecaptcha from 'vue-recaptcha';

export default {
  components: {
    VueRecaptcha
  },
  data() {
    return {
      user: {
        login: null,
        recaptcha: null,
      },
      key: // your sitekey
    };
  },     
  methods: {
    onVerify(response) {
      this.user.recaptcha = response;
    },
    onCaptchaExpired: function () {
      this.$refs.recaptcha.reset();
    }
  }
};
</script> 

<div class="g-recaptcha" data-sitekey="key" data-callback="myRecaptchaMethod">
</div>

methods: {
    myRecaptchaMethod: function(response) {
        console.log(response); 
        // this is google's code verifying the user is human'
        // that you check with google on the backend.
    }
}

mounted: function() {
    window.myRecaptchaMethod = this.myRecaptchaMethod;
}