How To Create Captcha Image With ASP.NET Application

Today, I am going to show you how to add CAPTCHA with your ASP.NET application. Firstly, create an ASP.NET application.

Open Visual Studio 2015, File Menu, New, then Project. It will open a new project window where you can choose the type of the application. So, you need to choose only ASP.NET Web Application. Specify the project name and click OK.



From the next screen of the window, you can choose the Web Forms and choose OK.



It will create a basic Web Form application for you. See the following screenshot for your demo application.



Add a new ASP.NET web form page “Register.aspx”. To add a new page, Right Click on the project and choose Add, then New Item.

From the New Item, choose Web, then Web Form with Master Page and provide the specific name for the page and click OK.



Select your master page for the page and click OK button.



To create captcha, I am using other ASP.NET page where I will create captcha image and use it with Register.aspx page.

So, add new page “Captcha.aspx” and make the code for this page as in the following.

Captcha.aspx.cs

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace CaptchaDemo
{
    public partial class Captcha: System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Bitmap objBitmap = new Bitmap(130, 80);
            Graphics objGraphics = Graphics.FromImage(objBitmap);
            objGraphics.Clear(Color.White);
            Random objRandom = new Random();
            objGraphics.DrawLine(Pens.Black, objRandom.Next(0, 50), objRandom.Next(10, 30), objRandom.Next(0, 200), objRandom.Next(0, 50));
            objGraphics.DrawRectangle(Pens.Blue, objRandom.Next(0, 20), objRandom.Next(0, 20), objRandom.Next(50, 80), objRandom.Next(0, 20));
            objGraphics.DrawLine(Pens.Blue, objRandom.Next(0, 20), objRandom.Next(10, 50), objRandom.Next(100, 200), objRandom.Next(0, 80));
            Brush objBrush =
                default (Brush);
            //create background style
            HatchStyle[] aHatchStyles = new HatchStyle[]
            {
                HatchStyle.BackwardDiagonal, HatchStyle.Cross, HatchStyle.DashedDownwardDiagonal, HatchStyle.DashedHorizontal, HatchStyle.DashedUpwardDiagonal, HatchStyle.DashedVertical,
                    HatchStyle.DiagonalBrick, HatchStyle.DiagonalCross, HatchStyle.Divot, HatchStyle.DottedDiamond, HatchStyle.DottedGrid, HatchStyle.ForwardDiagonal, HatchStyle.Horizontal,
                    HatchStyle.HorizontalBrick, HatchStyle.LargeCheckerBoard, HatchStyle.LargeConfetti, HatchStyle.LargeGrid, HatchStyle.LightDownwardDiagonal, HatchStyle.LightHorizontal
            };
            //create rectangular area
            RectangleF oRectangleF = new RectangleF(0, 0, 300, 300);
            objBrush = new HatchBrush(aHatchStyles[objRandom.Next(aHatchStyles.Length - 3)], Color.FromArgb((objRandom.Next(100, 255)), (objRandom.Next(100, 255)), (objRandom.Next(100, 255))), Color.White);
            objGraphics.FillRectangle(objBrush, oRectangleF);
            //Generate the image for captcha
            string captchaText = string.Format("{0:X}", objRandom.Next(1000000, 9999999));
            //add the captcha value in session
            Session["CaptchaVerify"] = captchaText.ToLower();
            Font objFont = new Font("Courier New", 15, FontStyle.Bold);
            //Draw the image for captcha
            objGraphics.DrawString(captchaText, objFont, Brushes.Black, 20, 20);
            objBitmap.Save(Response.OutputStream, ImageFormat.Gif);
        }
    }
}

Register.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="CaptchaDemo.Register" %>


<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <table>
        <tr>
            <td colspan="2">User Registration
            </td>
        </tr>
        <tr>
            <td>Full 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>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>Verification Code
            </td>
            <td>
               <asp:Image ID="Image2" runat="server" Height="55px" ImageUrl="~/Captcha.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>

See I have added the captcha page with image.



It will create the following page for user registration.



Register.aspx.cs

Here you will check the entered value inside the textbox and session value should be same then 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 CaptchaDemo
{
    public partial class Register: 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 = "Please enter correct captcha !";
                lblCaptchaMessage.ForeColor = System.Drawing.Color.Red;
            }
        }
    }
}

Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CaptchaDemo._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.Web.UI;
namespace CaptchaDemo
{
    public partial class _Default: Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            lblCaptchaMessage.Text = "You have entered correct captch code";
            lblCaptchaMessage.ForeColor = System.Drawing.Color.Green;
        }
    }
}

Now it is time to run the project, so press F5 to run the project, it will open the register page as in the following.



When you enter the wrong captcha value and press the submit button then it will show the error message that you have entered wrong data.



And if entered data is correct then it will redirect to some other page with successful message.



Conclusion

So, today we have learned how to create CAPTCHA image in ASP.NET application.

Suggest, what you think.

Thanks for reading this article, hope you enjoyed it. Please share your valuable feedback and suggestion through comments.