By Denisse Zavala
We all know how dealing with spam can be a real pain. However, nowadays we can rely on several tools to avoid this problem.
reCAPTCHA, a system developed by Carnegie Mellon University, provides an anti-bot service that can be embedded into web pages to protect them from automated applications trying to get access.
While all the information regarding reCAPTCHA is available in their website I will provide the steps to add a reCAPTCHA module into an ASP.NET site, using AJAX and Prototype to perform the validation.
Get reCAPTCHA
1. Create an account and get the API keys
2. Download the library.
Add the reCAPTCHA module to the page
1. In the website we add a reference to library/bin/Release/Recaptcha.dll.
2. Now we can add the reCAPTCHA control to the aspx:
Right after the @Page directive, insert the following code:
<%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha"%>
Inside the <form runat="server"> </form> tags add the markup for the control:
<recaptcha:RecaptchaControl
ID="recaptcha"
runat="server"
PublicKey="Your very own public key here"
PrivateKey="Your very own privat key here"
/>
Implementing the validation
1. We will need a submit button:
<asp:Button
runat="server"
ID="btnSubmit"
Text="Submit"
OnClientClick="return validateReCaptcha()"
/>
2. We need to download the prototype.js library and include it in the page:
<script id="Prototype" type="text/javascript" src="prototype.js" />
3. In order to avoid the page postback when validating we also need to define the page used by the AJAX request, let’s name it ajaxRecaptcha.aspx.
In the Page_Load event handler we need to add the following code:
Recaptcha.RecaptchaValidator validator = new Recaptcha.RecaptchaValidator();
validator.RemoteIP = Request.ServerVariables["REMOTE_ADDR"];
validator.PrivateKey = "Your very own private key";
validator.Challenge = Request["recaptcha_challenge_field"];
validator.Response = Request["recaptcha_response_field"];
Recaptcha.RecaptchaResponse reCaptchaResponse = validator.Validate();
Response.Write(reCaptchaResponse.IsValid);
Clear the markup, except from de @Page directive, from ajaxRecaptcha.aspx.
4. Now we need to create the function called by the submit button, this function will be responsible for requesting the validation and displaying the error message, if any.
function validateReCaptcha(){
challengeField = $F("recaptcha_challenge_field");
responseField = $F("recaptcha_response_field");
var recaptchaResult = new Ajax.Request("ajaxRecaptcha.aspx", {
method: "POST",
parameters: "recaptcha_challenge_field=" +
challengeField +
"&recaptcha_response_field=" +
responseField,
asynchronous: false
}).transport.responseText;
if (recaptchaResult == "True") {
alert("Your information has been saved");
return true;
}
else {
if (typeof Recaptcha.old_finish_reload === 'undefined') {
Recaptcha.old_finish_reload = Recaptcha.finish_reload;
Recaptcha.finish_reload = function(a, b, c, d) {
Recaptcha.old_finish_reload(a, b, c, d);
$('recaptcha_widget_div').removeClassName('recaptcha_nothad_incorrect_sol');
$('recaptcha_widget_div').addClassName('recaptcha_had_incorrect_sol');
};
}
Recaptcha.reload();
return false;
}
5. When the validation has returned true, the page posts back and we need to disable the reCAPTCHA control to avoid an empty validation.
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
recaptcha.Enabled = false;
}
}
Done!
Now we have the reCAPTCHA module in our site and it looks like this:
Before validation: