vb.net noCAPTCHA reCAPTCHA 在 UpdatePanel 中消失

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30260259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-17 19:07:48  来源:igfitidea点击:

noCAPTCHA reCAPTCHA disappearing in UpdatePanel

asp.netvb.netupdatepanelrecaptcha

提问by Benjamin

I'm implementing noCAPTCHA reCAPTCHA into an existing form with VB.Net. It is located within an UpdatePanel and uses server side validation to verify the user has completed the CAPTCHA (See Validating Recaptcha 2 (No CAPTCHA reCAPTCHA) in ASP.NET's server side)

我正在使用 VB.Net 将 noCAPTCHA reCAPTCHA 实施到现有表单中。它位于 UpdatePanel 内,并使用服务器端验证来验证用户是否已完成 CAPTCHA(请参阅ASP.NET 服务器端的验证 Recaptcha 2(无 CAPTCHA reCAPTCHA)

If a user fails to the CAPTCHA or any other of the validated fields, the CAPTCHA fails to reload due to postback. How do resolve this and make it so that the CAPTCHA does not disappear after a postback?

如果用户未能通过 CAPTCHA 或任何其他验证字段,则 CAPTCHA 由于回发而无法重新加载。如何解决此问题并使其在回发后验证码不会消失?

My CAPTCHA code:

我的验证码:

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

The api.js is placed in the Site.Master header.

api.js 位于 Site.Master 标头中。

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

To expand.

扩张。

I have tried a work around but ultimately failed. I added

我尝试了一种解决方法,但最终失败了。我加了

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

to the body of my MasterPage and threw it in an UpdatePanel, gave it an id, etc.

到我的 MasterPage 的正文并将它扔到一个 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>

I then created a function in the code-behind of the Site Master as follows:

然后我在 Site Master 的代码隐藏中创建了一个函数,如下所示:

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

When the user tried to verify and submit the form

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

If they failed I attempted to cause the update panel to refresh with

如果他们失败了,我试图使更新面板刷新

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

which is located on the control code behind.

它位于后面的控制代码上。

This didn't work. Maybe there is a potential solution to find with that?

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

回答by Benjamin

To solve this issue I did the following:

为了解决这个问题,我做了以下事情:

My CAPTCHA code changed to the following div:

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

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

I then proceeded to implement explicit rendering on the reCAPTCHA by changing the api link to the following and placing it below the div above.

然后,我通过将 api 链接更改为以下内容并将其放在上面的 div 下方,继续在 reCAPTCHA 上实现显式呈现。

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

In the header of the I included

在我包含的标题中

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

In the code behind if the CAPTCHA fails I reload the CAPTCHA with

在后面的代码中,如果 CAPTCHA 失败,我会重新加载 CAPTCHA

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

回答by Jerry

This solved my problems with recaptcha in update panels. Use pageLoad function with a loop with elements of the same class name then render with your secret key.

这解决了我在更新面板中使用 recaptcha 的问题。将 pageLoad 函数与具有相同类名元素的循环一起使用,然后使用您的密钥进行渲染。

  function pageLoad(sender, args) {

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

            }