Nocaptcha recaptcha在更新中消失了

Question

我正在用vb.net实现nocaptcha recaptcha。它位于UpdatePanel内部，并使用服务器端验证来验证用户已完成验证码（请参阅ASP.NET的服务器端中的验证recaptcha 2（无验证码recaptcha））

如果用户失败了验证码或任何其他已验证的字段，则验证码由于后返回而无法重新加载。如何解决此问题并做到这一点，以免邮票后验证码不会消失？

我的验证码代码：

<div id="captcha" class="g-recaptcha" runat="server" data-sitekey="MySiteKey"></div>

api.js放置在网站中。

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

展开。

我尝试了一项工作，但最终失败了。我添加了

<div id="captcha" class="g-recaptcha" runat="server" data-sitekey="MySiteKey"></div>

到我的主页的正文中，将其扔进了更新，给了一个ID等。

    <asp:UpdatePanel UpdateMode="Conditional" runat="server" ID="noCaptcha">
        <ContentTemplate>
            <asp:ScriptManager runat="server"></asp:ScriptManager>
            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        </ContentTemplate>
    </asp:UpdatePanel>

i然后在网站主的代码主持人中创建一个函数，如下所示：

Public Sub TriggerCaptchaReload()
    noCaptcha.Update()
End Sub

用户尝试验证并提交表格

如果他们失败了，我试图使更新面板使用

刷新

CType(Me.Page.Master, MasterPage).TriggerCaptchaReload()

位于后面的控制代码上。

这不起作用。也许有一个潜在的解决方案可以找到？

Answer 1

要解决此问题，我做了以下内容：

我的验证码代码更改为以下div：

<div id="recaptcha" class="recaptcha"></div>

然后，我通过将API链接更改为以下并将其放置在上面的DIV下，从而在recaptcha上实现了显式渲染。

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

在页面的标题中，我包括

<script type="text/javascript">
    var onloadCallback = function () {
        grecaptcha.render('recaptcha', {
            'sitekey': 'MySiteKey'
        });
    };
</script>

在验证码失败后面的代码中，我会用

重新加载验证码

ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "loadCaptcha", "grecaptcha.render('recaptcha', {'sitekey': 'MySiteKey' });", True)

Answer 2

这解决了更新面板中的recaptcha问题。使用带有同一类名称元素的循环的pageload函数，然后使用您的秘密键渲染。

 函数pageload（发送者，args）{                $（'。g-recaptcha'）。每个（函数（index，obj）{                    grecaptcha.render（obj，{'sitekey'：'xxxxxxxxxxxxxxx'}）;                }）;            }