In this article I will explain with an example, how to implement Google RECaptcha version 2.0 on Client Side using JavaScript and jQuery in ASP.Net.
The Google RECaptcha version 2.0 allows to validate the Captcha response on client side using its Callback functions.
The Google RECaptcha will be validated using ASP.Net RequiredField Validator.
 
Get Google RECaptcha Site key and Secret key
You need to refer the following article for information on how to get Google RECaptcha Site key and Secret key.
 
HTML Markup
The following HTML Markup consists of an HTML DIV for displaying the Google RECaptcha, a RequiredFieldValidator and a Button control.
There’s also a hidden TextBox txtCaptcha which is used for Google RECaptcha validation.
<div id="dvCaptcha">
</div>
<asp:TextBox ID="txtCaptcha" runat="server" Style="display: none" />
<asp:RequiredFieldValidator ID = "rfvCaptcha" ErrorMessage="Captcha validation is required." ControlToValidate="txtCaptcha"
    runat="server" ForeColor = "Red" Display = "Dynamic" />
<br />
<br />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" />
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Net;
using System.Web.Services;
 
VB.Net
Imports System.Net
Imports System.Web.Services
 
 
WebMethod for RECaptcha Verification
In the code behind, there are two protected string variables which will hold the values of the Google RECaptcha Site key and Secret key.
You need to set the Google RECaptcha Site key and Secret key in their respective variables.
There’s also a WebMethod which will be executed after user answers the Captcha correctly, this WebMethod accepts the response value which will be passed to the Google RECaptcha SiteVerify API along with the secret key and the API will return a JSON response which is sent to the Client Side script for further processing.
C#
public partial class _Default : System.Web.UI.Page
{
    protected static string ReCaptcha_Key = "<RECaptcha Site Key>";
    protected static string ReCaptcha_Secret = "<RECaptcha Secret Key>";
 
    [WebMethod]
    public static string VerifyCaptcha(string response)
    {
        string url = "https://www.google.com/recaptcha/api/siteverify?secret=" + ReCaptcha_Secret + "&response=" + response;
        return (new WebClient()).DownloadString(url);
    }
}
 
VB.Net
Partial Class Default
    Inherits System.Web.UI.Page
    Protected Shared ReCaptcha_Key As String = "<RECaptcha Site Key>"
    Protected Shared ReCaptcha_Secret As String = "<RECaptcha Secret Key>"
 
    <WebMethod()> _
    Public Shared Function VerifyCaptcha(response As String) As String
        Dim url As String = "https://www.google.com/recaptcha/api/siteverify?secret=" & ReCaptcha_Secret & "&response=" & response
        Return (New WebClient()).DownloadString(url)
    End Function
End Class
 
 
RECaptcha Client Side Implementation and Validation
Inside the OnLoadCallBack event handler of the Google RECaptcha API, the RECaptcha is rendered on the page using the render function which accepts the ID of the HTML DIV (within which the RECaptcha will be rendered), the Google RECaptcha Site key and the Callback event handler.
The Callback event is triggered when the user answers the Captcha correctly. The Callback event handler accepts the Captcha response (which is an encoded string value).
The Captcha response value is sent to the WebMethod VerifyCatpcha (discussed earlier) and returns a JSON object containing Success status and some error codes.
If the Success status is true then the value is set in the hidden TextBox and the RequiredFieldValidator is hidden.
If the Success status is false then the RequiredFieldValidator is shown and it is made to display the error message returned from the Google RECaptcha SiteVerify API.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer></script>
<script type="text/javascript">
var onloadCallback = function () {
    grecaptcha.render('dvCaptcha', {
        'sitekey': '<%=ReCaptcha_Key %>',
        'callback': function (response) {
            $.ajax({
                type: "POST",
                url: "Default.aspx/VerifyCaptcha",
                data: "{response: '" + response + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var captchaResponse = jQuery.parseJSON(r.d);
                    if (captchaResponse.success) {
                        $("[id*=txtCaptcha]").val(captchaResponse.success);
                        $("[id*=rfvCaptcha]").hide();
                    } else {
                        $("[id*=txtCaptcha]").val("");
                        $("[id*=rfvCaptcha]").show();
                        var error = captchaResponse["error-codes"][0];
                        $("[id*=rfvCaptcha]").html("RECaptcha error. " + error);
                    }
                }
            });
        }
    });
};
</script>
 
 
Screenshots
Google RECaptcha implemented in ASP.Net
Google RECaptcha Code with Example in ASP.Net
RequiredFieldValidator error message when Captcha is not answered
Google RECaptcha Code with Example in ASP.Net
Google RECaptcha error message shown on incorrect answer
Google RECaptcha Code with Example in ASP.Net
Google RECaptcha answered correctly
Google RECaptcha Code with Example in ASP.Net
Error message shown Google RECaptcha SiteVerify API Success status is False
Google RECaptcha Code with Example in ASP.Net
 
 
Demo
 
Downloads

ReCaptcha_ASP.Net.zip