1

我有一个使用多个 recaptcha 的页面，如下所示：

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script>
    var recaptchaElements = [];
</script>

@foreach (var item in Model)
{
   ...
<button class="g-recaptcha id="recaptcha-comment-form-button-@(item.Id)" type="button" value="comment">Submit</span></button>
   ...

<script>
    function @(functionId)submit(token) {
               ....
            }
    recaptchaElements.push({ id: "recaptcha-comment-form-button-@(item.Id)", callback : "@(functionId)submit" });
</script>
}
<script>
var recaptchaKey = "XXXX"
    var onloadCallback = function () {
        for (var i = 0; i < recaptchaElements.length; i++) {
            grecaptcha.render(recaptchaElements[i].id, {
                'sitekey': recaptchaKey,
                'callback': recaptchaElements[i].callback,
                'theme': 'light'
            });
        }
    };
</script>

我正在为我的每个recaptcha 按钮创建一个独特的回调函数，因为我需要为每个按钮提供独特的功能。那是有效的。

我遇到的问题是，当我单击按钮然后我选择图像以证明我不是机器人时，recaptcha 小部件会打开。一旦我选择了一些图像，它就会使用成功的令牌进行回调，然后我使用 Google 验证令牌并且一切正常。问题是图像的小部件没有关闭。它保持打开状态，只要我继续选择图像，它就会继续触发我的回调函数，因此用户在不知情的情况下多次提交相同的回调。

如何强制 recaptcha 小部件在回调函数中关闭？验证用户后不应该自动关闭吗？有谁知道为什么会这样？

4

0 回答 0