dcsimg
 

Creating Captcha Images for Security with an ASP.NET Application

Tuesday Aug 28th 2018 by Tapas Pal

Learn about using Captcha security as you work through a sample ASP.NET Web application.

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.

.NET New Web Application
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).

Select Web Form
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.

Select Web Form with Master Page
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).

Select Master Page
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.

Solution Screen Shot
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.

Bank Account Registration Page with Captcha
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!

Home
Mobile Site | Full Site
Copyright 2018 © QuinStreet Inc. All Rights Reserved