Question

我正在使用Google ReCaptcha v2，并将其集成到注册过程中。因此，当用户进入/register时，它将加载RegisterComponent。

但是，如果说我在主页上并通过按钮导航到/register，则不会加载reCaptcha。为什么会发生？

我正在layouts.master.php中加载脚本：

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

然后将reCaptcha加载到寄存器组件中，如下所示：

<div class="field">
    <div class="control" id="recaptcha-reg">
        <div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div>
        <span v-if="regErrors.captcha" v-for="error in errors">{{ error }}</span>
    </div>
</div>

然后使用PHP验证此reCaptcha。因此，没有JS逻辑！请帮忙！

Answer 1

如果有人遇到相同的问题，请按以下步骤解决问题：

将ID分配给您的reCaptcha小部件。
然后在创建组件后，运行setTimeout来渲染小部件。

示例：

<div id="recaptcha-main" class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div>

然后在您要加载验证码的组件中：

created() {
    setTimeout(() => {
        grecaptcha.render('recaptcha-main'); // 'recaptcha-main' is the id that was assigned to the widget
    }, 2000);
}

就是这样！

已更新-最佳方法

使用setTimeout代替使用nextTick()，它基本上仅在包含视图的视图之后运行。孩子们装完了。

您分配ID，然后在created挂钩中运行它：

this.$nextTick(function () {
    grecaptcha.render('recaptcha-main');
})

setTimeout的缺点是它仅在指定时间后运行。例如说1秒钟。因此，如果您的组件要花费超过1秒才能完全加载，那么setTimeout可能无法在此处正常工作，因为它将在1秒后立即执行。

我希望这对您有用：）

Answer 2

@Damon答案有效且很棒-我以为我会发布一些vue组件代码来帮助其他人实现它：

created() { // in whatever component has a recaptcha
    window.sendMsg = this.sendMsg // making the callback function from the vue object available to the google script in the global scope.
    console.log('grecaptcha', grecaptcha)
    this.$nextTick(function() {
        grecaptcha.ready(function() { // making sure the recapcha script is loaded
            try {
                grecaptcha.render('invisibleRecaptcha1') //render the plain-jane recaptcha element with the given id
            } catch (err) { // dont care about errors, because the worst that can happen is maybe it already rendered once.
                err
            }
        })
    })
}

想法是，您应该照常将Google脚本标签放在head中，然后使用最简单的静态集成标签：

<button id="invisibleRecaptcha1" class="g-recaptcha" data-sitekey="6Lc7hdkZ**********************" data-callback="sendMsg" data-action="submit">Shout!</button>

sendMsg是您使用Recaptcha保护的任何功能。

ReCaptcha v2将不会在vue-router导航中加载

2 个答案: