noCAPTCHA reCAPTCHA 在 UpdatePanel 中消失

Question

我正在使用 VB.Net 将 noCAPTCHA reCAPTCHA 实施到现有表单中。它位于 UpdatePanel 中，并使用服务器端验证来验证用户是否已完成验证码（参见 ）

如果用户验证码或任何其他验证字段失败，验证码将因回发而无法重新加载。如何解决这个问题并使验证码在回发后不会消失？

我的验证码：

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

api.js放在Site.Masterheader.

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

展开。

我尝试了变通方法但最终失败了。我加了

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

到我的 MasterPage 的 body 并将其放入 UpdatePanel，给它一个 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>

然后我在 Site Master 的 code-behind 中创建了一个函数，如下所示：

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

当用户尝试验证并提交表单时

如果他们失败了，我尝试使用

使更新面板刷新

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

位于控制代码后面。

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

Answer 1

为了解决这个问题，我做了以下事情：

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

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

然后我通过将 api link 更改为以下内容并将其放置在上面的 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

这解决了我在更新面板中重新验证的问题。使用带有相同 class 名称元素的循环的 pageLoad 函数，然后使用您的密钥呈现。

  function pageLoad(sender, args) {

                $('.g-recaptcha').each(function (index, obj) {
                    grecaptcha.render(obj, { 'sitekey': 'XXXXXXXXXXXX-XX' });
                });

            }