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.

Select your mater page f

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.

Master page

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.

13 Comments

Join the conversation! Your thoughts help the community grow.

SUSHIL TYAGI4y ago
Not working on ssl secure
Pintukumar Shashmal5y ago
Thank you for sharing
Jenish Patel7y ago
Superb, Thank you for sharing...
Shahnawaz8y ago
How refersh this captcha?
ramya mathi8y ago
Its working in Chrome & Firefox but its not working in IE . let me know is there any settings can be done in webconfig?
Anupam Dighe10y ago
nice....
Sibeesh Venu10y ago
Nice Share
Raja T10y ago
Nice , thanks for sharing
sreenivasa k10y ago
excellent
Santhakumar Munuswamy10y ago
Thanks for nice article
Kiranteja Jallepalli10y ago
simple and easy to understand Mukesh
Ankur Mistry10y ago
Helpful, thank you for sharing Mukesh Kumar
Rupesh Kahane10y ago
nice share...