Question

使用UpdatePanel时，不会重新应用Google reCAPTCHA 2（＆＃34; noCAPTCHA＆＃34;）

我没有使用旧的ASP.Net reCAPTCHA控件。

这是我正在运行的代码。

<asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="googleCaptchaUpdatePanel" runat="server" UpdateMode="Always" >
        <ContentTemplate>
        <div class="googleCaptchaWrapper">
            <div class="g-recaptcha" data-sitekey="<%= getCaptchaPublicKey() %>"></div>
            <asp:Label id="captchaError" CssClass="captchaError" runat="server" ForeColor="Red" Visible="false" />
        </div> 
        <div class="smallContentRow" style="margin-top: 10px; margin-left: auto; margin-right: auto; width: 100%; text-align: center;">
            <asp:LinkButton ID="btnSubmit" runat="server" CssClass="myBtn" CausesValidation="False" Text="Submit" TabIndex="9" ToolTip="Click to Submit Info"/>
            <asp:LinkButton ID="btnCancel" runat="server" CausesValidation="False" CssClass="myBtn" Text="Cancel" TabIndex="10" ToolTip="Click to Cancel Info "/>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

单击“提交”按钮时，Captcha不会重新应用到屏幕上。

我尝试使用已发布的各种javascript解决方案来解决此问题，但它们似乎只适用于旧版Google的reCAPTCHA。

Answer 1

我想出了怎么做。

我最终明确地渲染了新的reCAPTCHA或reCAPTCHA 2.

在我的网站MasterPage中，我将recaptcha js脚本声明为：

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

在我的网页中，我为验证码创建了一个占位符：

<div class="myCaptchaWrapper">
    <div id="myCaptcha" class="g-recaptcha"></div>
    <asp:Label ID="errorMessage" CssClass="styledErrors" runat="server" ForeColor="Red" Visible="false" />
</div>

然后，在我的验证码js：

function loadCaptcha() {
    grecaptcha.render('myCaptcha', {
        'sitekey': mySiteKey,
        'theme': 'clear',
        'callback': myClientResponseCallback
    });
}

然后我在myClientResponseCallback中调用安全的Web服务来做我需要的服务器端处理。

这样做，我可以在用户点击＆＃39;应用＆＃39;在reCaptcha中，我还可以处理检查是否已通过asp.net Post-Back中的服务器端处理成功回答了验证码。

使用ASP.NET Web-Form UpdatePanel时，不会重新应用Google reCAPTCHA 2（＆＃34; noCAPTCHA＆＃34;）

1 个答案: