Google reCAPTCHA 2 ("noCAPTCHA") does not get reapplied when using ASP.NET Web-Form UpdatePanel

Question

Google reCAPTCHA 2 ("noCAPTCHA") does not get reapplied when using UpdatePanel

I am not using the old ASP.Net reCAPTCHA control.

Here is the code that I am running.

<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>

When I click the Submit button, the Captcha does not get re-applied to the screen.

I've attempted to resolve the issue with the various javascript solutions that have been posted, but they all seem to only be for the older version of Google's reCAPTCHA.

Answer 1

I figured out how.

I ended up explicitly rendering the new reCAPTCHA, or reCAPTCHA 2.

In my site MasterPage, I declared the recaptcha js scripts as:

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

In my webpage, I created a placeholder for the captcha like this:

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

Then, in my captcha js:

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

And then I call a secure web service in the myClientResponseCallback to do server-side processing that I need to.

Doing it like this, I can handle the action when a user clicks on 'Apply' in the reCaptcha, and I can also handle checking if the captcha has been successfully answered through server-side processing in an asp.net Post-Back.