The ASP.NET Capsule #5: Adding Captcha to your web forms

Hi all.

I was asked to add captcha to some web forms for contact and subscription information, so I though I’d share this with you.

Captcha and Recaptcha (v2) is a project of the Carnegie Mellon University You can find all the information you need at the recaptcha website http://www.recaptcha.net.

According to their website:

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.

So, you will find the resources for ASP.NET here:

So, the library is basically an assembly you add to your bin in your website (or reference in your web application) and that will provide a control you can use in your webform. Here is an extract of the help file:

reCAPTCHA ASP.NET Quickstart

These instructions should get you started quickly.

  1. Download the reCAPTCHA Library.
  2. Add a reference to library/bin/Release/Recaptcha.dll to your website
  3. Insert the reCAPTCHA control into the form you wish to protect. At the top of the aspx page, insert the following code:
    <%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>

    Then insert the reCAPTCHA control inside of the <form runat="server"> tag:

    <recaptcha:RecaptchaControl
      ID="recaptcha"
      runat="server"
      PublicKey=""
      PrivateKey=""
      />
  4. If you haven’t done so, sign up for an API key. Put the public and private key in the PublicKey and PrivateKey properties
  5. Make sure you use ASP.NET validation to validate your form (you should check Page.IsValid on submission)

Here is a sample:

   1:  <%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>
   2:  <script runat=server>
   3:      Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
   4:          If Page.IsValid Then
   5:              lblResult.Text = "You Got It!"
   6:              lblResult.ForeColor = Drawing.Color.Green
   7:          Else
   8:              lblResult.Text = "Incorrect"
   9:              lblResult.ForeColor = Drawing.Color.Red
  10:          End If
  11:      End Sub
  12:  </script>
  13:  <html>
  14:  <body>
  15:      <form runat="server">
  16:          <asp:Label Visible=false ID="lblResult" runat="server" />
  17:      
  18:          <recaptcha:RecaptchaControl
  19:              ID="recaptcha"
  20:              runat="server"
  21:              PublicKey=""            
  22:              PrivateKey=""
  23:              />
  24:          <br />
  25:          <asp:Button ID="btnSubmit" 
  26:                      runat="server" 
  27:                      Text="Submit" 
  28:                      OnClick="btnSubmit_Click" />
  29:      </form>
  30:  </body>
  31:  </html>

This works perfectly with postbacks but for some reason there is a problem with update panels. The problem is that when you have the captcha control inside an update panel, once a postback is executed (clicking the button) the control will not render again, therefore not allowing the user to re-enter the words in case of errors.

To overcome this problem here is a good reference from Alessandro Zifiglio.

Hope it’s useful. Enjoy!


Leave a Reply

Your email address will not be published. Required fields are marked *