Introduction
CAPTCHA (Completely Automated Public Turing test to Tell Computers and Humans Apart) is a security check to distinguish between humans and computers. Computers or bots are not capable of solving a Captcha problem. Captcha is automatically generated with a random string. Generally, Captcha is generated by using an image with text/numbers or combination of both. A human has to enter the correct Captcha code to pass through the security check. Captcha technology is used mostly to block spammers who try to sign up and hack information from Web sites, blogs, or forums.
Google provides a reCAPTCHA free service to create Captcha that protects a Web site from spam and abuse. In this article, I will explain about using Captcha with a sample ASP.NET Web application.
ASP.NET Captcha Application
To create a Captcha application in ASP.NET, Open Visual Studio 2015 -> File Menu -> New, then Project. It will open a new project window. Choose only ASP.NET Web Application. Specify the project name “CaptchaSample” and then click OK. You can see this in Figure 1.
Figure 1: .NET New Web Application
From the next screen of the window, choose Web Forms and click OK. The system will create a basic Web Form application solution for you (see Figure 2).
Figure 2: Select Web Form
Next, add a new ASP.NET Web form page, “BankAccountRegistration.aspx”. To add a new page, right-click the project and choose Add, New Item. From the New Item, choose Web, then Web Form with Master Page. Provide the specific name for the page and click OK, as shown in Figure 3.
Figure 3: Select Web Form with Master Page
After that, select your master page for the page and click the OK button (see Figure 4).
Figure 4: Select Master Page
Next, to add Captcha, I have added another ASP.NET page where I will create a Captcha image and use it on the BankAccountRegistration.aspx page.
So, after adding the “Captcha.aspx” page, my solution will look similar to Figure 5.
Figure 5: Solution Screen Shot
BankAccountRegistration.aspx
Refer to the following HTML code of the BankAccountRegistration page created earlier in this article.
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="BankAccountRegistration.aspx.cs" Inherits="CaptchaSample.Registration" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <table> <tr> <td colspan="2">Online Bank Account Creation</td> </tr> <tr> <td >Account Holder Name</td> <td> <asp:TextBox runat="server" ID="txtFullName"> </asp:TextBox> </td> </tr> <tr> <td>Email Id</td> <td> <asp:TextBox runat="server" ID="txtEmail"> </asp:TextBox> </td> </tr> <tr> <td>Account Type </td> <td> <asp:TextBox runat="server" ID="txtaccounttype"> </asp:TextBox> </td> </tr> <tr> <td>PAN Number</td> <td> <asp:TextBox runat="server" ID="txtpan"> </asp:TextBox> </td> </tr> <tr> <td>User Name</td> <td> <asp:TextBox runat="server" ID="txtUserName"> </asp:TextBox> </td> </tr> <tr> <td>Password</td> <td> <asp:TextBox runat="server" ID="txtPassword" TextMode="Password"></asp:TextBox> </td> </tr> <tr> <td>ReEnter Password</td> <td> <asp:TextBox runat="server" ID="txtPassword1" TextMode="Password"></asp:TextBox> </td> </tr> <tr> <td>Verification Code</td> <td> <asp:Image ID="Image2" runat="server" Height="55px" ImageUrl="~/SampleCaptcha.aspx" Width="186px" /> <br /> <asp:Label runat="server" ID="lblCaptchaMessage"> </asp:Label> </td> </tr> <tr> <td>Enter Verifaction Code</td> <td> <asp:TextBox runat="server" ID="txtVerificationCode"> </asp:TextBox> </td> </tr> <tr> <td colspan="2"> <asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" /> </td> </tr> </table> </asp:Content>
BankAccountRegistration.aspx.cs
The following C# server-side code will check the entered values inside the textbox and session value; they should be the same. If so, Captcha is right; otherwise, it is wrong.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace CaptchaSample { public partial class Registration : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnSubmit_Click(object sender, EventArgs e) { if (txtVerificationCode.Text.ToLower() == Session["CaptchaVerify"].ToString()) { Response.Redirect("Default.aspx"); } else { lblCaptchaMessage.Text = "You have entered Wrong Captcha. Please enter correct Captcha !"; lblCaptchaMessage.ForeColor = System.Drawing.Color.Red; } } } }
Default.aspx
This code redirects to the default page if the Captcha entries matched successfully. Refer to the following HTML code.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CaptchaSample._Default" %> <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <br /> <asp:Label runat="server" ID="lblCaptchaMessage" ForeColor="Green"> </asp:Label> </asp:Content>
Default.aspx.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace CaptchaSample { public partial class _Default : Page { protected void Page_Load(object sender, EventArgs e) { lblCaptchaMessage.Text = "You have entered correct Captcha code"; lblCaptchaMessage.ForeColor = System.Drawing.Color.Green; } } }
Let’s execute the application now. Press F5 to run the project; it will open the bank account register page, as shown in Figure 6. Entering the wrong Captcha will show a validation error.
Figure 6: Bank Account Registration Page with Captcha
Conclusion
There are few disadvantages to using Captcha. Many people consider it an annoyance. Also, visually impaired individuals cannot use Captcha. However, audio Captcha is difficult to understand. It’s also noticed that after adding Captcha, a considerable amount of incoming traffic dropped.
That’s all for today. Happy coding!