Using reCaptcha in ASP.Net (with Custom Theme)

reCAPTCHA, now acquired by Google, is a system used by many websites to protect them from bots attempting to access restricted areas. I always found this in registration and inquiry pages.

I personally do not like the looks of its default themes. Applying the custom one I found here is good but the validation is not working. For it to work, there are a lot of solutions out there where they are not using the available reCAPTCHA's ASP.Net API, but requires a lot of coding to work. Here, we will make it simple using the available API to save time.

Note: I am using ASP.Net 3.5. This may also work with 2.0.

Requirements:

1. API keys. Sign up here to get yours. You will get private and public keys that we will use on the steps below.
2. reCAPTCHA ASP.NET library. Download it here.

Steps:

1. Put the library into the Bin folder. Make sure to follow this step so that we can have reference to RecaptchaValidator class.
2. Copy the below code to your aspx page. Make sure to replace all [YourPublicKey] with your private key.

<script type="text/javascript">

var RecaptchaOptions = {

theme: 'custom'

};

script>

<div id="recaptcha_container">

<p><label for="recaptcha_response_field">Kindly enter the words below:label>

<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" class="text" />p>

<div id="recaptcha_image">div>

<p>Choose captcha format: <a href="javascript:Recaptcha.switch_type('image');">Imagea> or <a href="javascript:Recaptcha.switch_type('audio');">Audioa> p>

<input type="button" id="recaptcha_reload_btn" value="Get new words" onclick="Recaptcha.reload();" />

div>

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=[YourPublicKey]">

script>

<noscript>

<iframe src="http://www.google.com/recaptcha/api/noscript?k=[YourPublicKey]"> height="300" width="500" frameborder="0">iframe>

<textarea name="recaptcha_challenge_field" rows="3" cols="40">textarea>

<input type="hidden" name="recaptcha_response_field" value="manual_challenge" />

noscript>

<span style="color:Red;"><asp:Literal ID="ltrWrongCaptcha" runat="server" Text="The words are wrong. Try to input the another words above." Visible="false">asp:Literal>span>

Browse the page and you will see the ReCaptcha display same with below:

Note: Validation is not yet working.

3. To validate the input words, go to Submit button’s Click event and place the below code inside it. Make sure to replace the [YourPrivateKey] with your private key.

Dim recaptcha As New Recaptcha.RecaptchaValidator

recaptcha.PrivateKey = "[YourPrivateKey]"

recaptcha.RemoteIP = HttpContext.Current.Request.UserHostName

recaptcha.Response = GetFormValue("recaptcha_response_field")

recaptcha.Challenge = GetFormValue("recaptcha_challenge_field")

Dim result As Recaptcha.RecaptchaResponse = recaptcha.Validate()

If Not result.IsValid Then

'If Not Page.IsValid Then

Dim ltrWrongCaptcha As Literal = FormView1.FindControl("ltrWrongCaptcha")

ltrWrongCaptcha.Visible = True

e.Cancel = True

End If

4. Reload the page and see how the validation works.

That's all!

You can also customize its looks by replacing the Image and Audio links of image buttons.