Google reCAPTCHA 2 ("noCAPTCHA") 在使用 ASP.NET Web-Form UpdatePanel 时不会重新应用

Question

Google reCAPTCHA 2 ("noCAPTCHA") 在使用 UpdatePanel

时不会重新应用

我没有使用旧的 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>

当我点击“提交”按钮时，验证码没有重新应用到屏幕上。

我已尝试使用已发布的各种 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 中调用一个安全的网络服务来做 我需要的服务器端处理。

这样做，我可以处理用户在 reCaptcha 中单击 'Apply' 时的操作，我还可以处理检查验证码是否已通过服务器端处理在 asp.net Post-返回.