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:
- ASP.NET Plugin: http://recaptcha.net/plugins/aspnet/
- ASP.NET Plugin download: http://code.google.com/p/recaptcha/downloads/list?q=label:aspnetlib-Latest
- ASP.NET Library download: http://code.google.com/p/recaptcha/downloads/list?can=1&q=asp.net&colspec=Filename+Summary+Uploaded+Size+DownloadCount
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.
- Download the reCAPTCHA Library.
- Add a reference to library/bin/Release/Recaptcha.dll to your website
- 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="" />
- If you haven’t done so, sign up for an API key. Put the public and private key in the PublicKey and PrivateKey properties
- 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