使用 VueJS 的多个 Google Recaptcha答案

【问题标题】：Multiple Google Recaptcha with VueJS使用 VueJS 的多个 Google Recaptcha
【发布时间】：2018-04-11 16:31:47
【问题描述】：

我有一个关于在使用 Vue 组件提交 AJAX 表单时使用 Google 的 Invisible Recaptcha 的问题。

我创建了一个 VueJS 组件，我将其包含在以下“recaptcha button”组件中：

<template>
    <div>
        <div v-if="failed" style="color: red;"><strong>Sorry, the captcha validation failed. Please try again.</strong></div>
        <div :id="name"></div>

        <button :class="classes" type="button" @click="validate()">
            <slot>Submit</slot>
        </button>
    </div>
</template>

<script>

export default {
    props: {
        name: {
            type: String,
            default: 'recaptcha',
            required: false
        },
        classes: {
            type: String,
            required: false,
            default: ''
        },
    },
    data: function ()
    {
        return {
            failed: false,
        };
    },
    mounted: function ()
    {
        this.initReCaptcha();
    },
    methods: {
        initReCaptcha: function() {
            var self = this;
            setTimeout(function() {
                if(typeof grecaptcha === 'undefined') {
                    self.initReCaptcha();
                }
                else {
                    grecaptcha.render(self.name, {
                        sitekey: 'site-key-here',
                        size: 'invisible',
                        badge: 'inline',
                        callback: self.response
                    });
                }
            }, 100);
        },
        validate: function ()
        {
            grecaptcha.execute();
        },
        response: function (token)
        {
            this.$parent.fields['g-recaptcha-response'] = token;
            this.$parent.submit();
        }
    },

}

</script>

如您所见，我将 Google 的 Recaptcha 的回调函数分配给 recaptcha 组件的“响应”函数的当前实例。但是，当我提交其中一个表单时，它似乎正在调用页面上其他组件的响应函数..因此试图在迄今为止没有输入的表单上调用提交..

我们认为这可能是 recaptcha 渲染的一种情况，实际上并没有创建两个实例，因此在第二个实例中，回调只是被覆盖，而是通过将组件记录在挂载函数中，提交的表单而不是我们尝试提交的那个是首先被实例化的，这让我们相信这不是覆盖的情况......

任何关于此事的帮助将不胜感激！

干杯，下午

【问题讨论】：

标签： laravel vue.js recaptcha

【解决方案1】：

想通了，不知道渲染函数返回了小部件 ID。如果没有给定可选的小部件 ID 参数，grecaptcha.execute() 将只执行全局列表中的第一个小部件。

要解决这个问题，请将渲染函数返回的小部件 ID 分配给组件中的数据属性，然后在 validate 函数中，使用该小部件 ID 作为参数调用 execute。

self.widgetId = grecaptcha.render(self.name, {...});

validate: function ()
{
    grecaptcha.execute(this.widgetId);
},

【讨论】：