Bernie Cook's Blog

Azure, C#, .NET, Architecture & Related Tech News

Adding reCAPTCHA to an ASP.Net Website

Leave a comment

I recently implemented a reCAPTCHA control into an ASP.NET website (a Windows Azure web role to be exact) and it was so incredibly easy I thought I’d write a post about it.

In the event that you don’t know what a reCAPTCHA control is Google’s official reCAPTCHA website describe it as:

A CAPTCHA is a program that can tell whether its user is a human or a computer. You’ve probably seen them — colorful images with distorted text at the bottom of Web registration forms. CAPTCHAs are used by many websites to prevent abuse from “bots,” or automated programs usually written to generate spam. No computer program can read distorted text as well as humans can, so bots cannot navigate sites protected by CAPTCHAs. – “What is reCAPTCHA

Implementation Steps

The steps to implement the control are as follows:

  1. Setup a Google account, if you don’t already have one
  2. Sign into your Google account and create a new reCAPTCHA key by entering in your website’s URL
  3. Make a note of the public and private keys provided on the following page
  4. Download the most recent reCAPTCHA assembly for the .NET framework
  5. Open the ASP.NET page in your project where you’d like to insert the reCAPTCHA control
  6. Register the user control in the header of the page (or via your web.config if you like keeping your control registry centralised)
    <br />
    &lt;@ Register TagPrefix=&quot;recaptcha&quot; Namespace=&quot;Recaptcha&quot; Assembly=&quot;Recaptcha&quot; %&gt;<br />
    

  7. Add the control to your web page
    <br />
    &lt;recaptcha:RecaptchaControl ID=&quot;recaptcha&quot; runat=&quot;server&quot; PublicKey=&quot;PublicKey&quot; PrivateKey=&quot;PrivateKey&quot; /&gt;<br />
    
  8. Replace the public and private key placeholders with those obtained from the previous step
  9. Run the project and navigate to the URL where the control was inserted and you’ll see the control appear.So now it’s rendering within your HTML the next step is to check if the user has entered in the valid words so…
  10. In your code-behind page, or wherever you’re performing the page validation, you simply need to check the Page.IsValid property.  If it’s “false” the words were entered incorrectly, an alternatively if it’s “true” then the user entered them correctly.
    <br />
    if (Page.IsValid)<br />
    {<br />
        // reCAPTCHA words were entered correctly.<br />
    }<br />
    else<br />
    {<br />
        // reCAPTCHA words were NOT entered correctly.<br />
    }<br />
    

Personally I’d prefer the control exposed a property that performed the aforementioned action but still it’s not bad for a free control that can be implemented in a matter of minutes.

There are a few options available with regards to the controls appearance, preferred language, tabindex etc. which you can read more about here: Customizing the Look and Feel of reCAPTCHA

Good luck.

Further Reading

Advertisements

Author: Bernie

I currently live and work in the UK, just outside of London. I've been working in IT for 15+ years and in that time have solved many technical problems via blogs, forums, tutorials etc. and feel like I should be giving something back. This blog post is my way of contributing and I hope it proves just as useful to others as their contributions have to me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s