In this article I will explain with an example, how to validate 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 2.0 will be validated using ASP.Net RequiredFieldValidator.
Get Google RECaptcha 2.0 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 is 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
RECaptcha 2.0 Verification using WebMethod
In Code Behind, there are two protected string variables which will hold the values of the Google RECaptcha 2.0 Site key and Secret key.
The Google RECaptcha 2.0 Site key and Secret key will be set in their respective variables.
There is 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 2.0 Client Side Implementation and Validation
Inside the OnLoadCallBack event handler of the Google RECaptcha 2.0 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) which then 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="https://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"
asyncdefer></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
![Validate Google RECaptcha on Client Side using JavaScript and jQuery in ASP.Net]()
RequiredFieldValidator error message when Captcha is not answered
![Validate Google RECaptcha on Client Side using JavaScript and jQuery in ASP.Net]()
Google RECaptcha error message shown on incorrect answer
![Validate Google RECaptcha on Client Side using JavaScript and jQuery in ASP.Net]()
Google RECaptcha answered correctly
![Validate Google RECaptcha on Client Side using JavaScript and jQuery in ASP.Net]()
Error message shown when Google RECaptcha SiteVerify API Success status is False
![Validate Google RECaptcha on Client Side using JavaScript and jQuery in ASP.Net]()
Demo
Downloads
