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.

ASP.NET Web Application

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

Web Forms

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

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

Web Form with Master Page

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

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Drawing;  
  4. using System.Drawing.Drawing2D;  
  5. using System.Drawing.Imaging;  
  6. using System.Linq;  
  7. using System.Web;  
  8. using System.Web.UI;  
  9. using System.Web.UI.WebControls;  
  10. namespace CaptchaDemo  
  11. {  
  12.     public partial class Captcha: System.Web.UI.Page  
  13.     {  
  14.         protected void Page_Load(object sender, EventArgs e)  
  15.         {  
  16.             Bitmap objBitmap = new Bitmap(130, 80);  
  17.             Graphics objGraphics = Graphics.FromImage(objBitmap);  
  18.             objGraphics.Clear(Color.White);  
  19.             Random objRandom = new Random();  
  20.             objGraphics.DrawLine(Pens.Black, objRandom.Next(0, 50), objRandom.Next(10, 30), objRandom.Next(0, 200), objRandom.Next(0, 50));  
  21.             objGraphics.DrawRectangle(Pens.Blue, objRandom.Next(0, 20), objRandom.Next(0, 20), objRandom.Next(50, 80), objRandom.Next(0, 20));  
  22.             objGraphics.DrawLine(Pens.Blue, objRandom.Next(0, 20), objRandom.Next(10, 50), objRandom.Next(100, 200), objRandom.Next(0, 80));  
  23.             Brush objBrush =  
  24.                 default (Brush);  
  25.             //create background style  
  26.             HatchStyle[] aHatchStyles = new HatchStyle[]  
  27.             {  
  28.                 HatchStyle.BackwardDiagonal, HatchStyle.Cross, HatchStyle.DashedDownwardDiagonal, HatchStyle.DashedHorizontal, HatchStyle.DashedUpwardDiagonal, HatchStyle.DashedVertical,  
  29.                     HatchStyle.DiagonalBrick, HatchStyle.DiagonalCross, HatchStyle.Divot, HatchStyle.DottedDiamond, HatchStyle.DottedGrid, HatchStyle.ForwardDiagonal, HatchStyle.Horizontal,  
  30.                     HatchStyle.HorizontalBrick, HatchStyle.LargeCheckerBoard, HatchStyle.LargeConfetti, HatchStyle.LargeGrid, HatchStyle.LightDownwardDiagonal, HatchStyle.LightHorizontal  
  31.             };  
  32.             //create rectangular area  
  33.             RectangleF oRectangleF = new RectangleF(0, 0, 300, 300);  
  34.             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);  
  35.             objGraphics.FillRectangle(objBrush, oRectangleF);  
  36.             //Generate the image for captcha  
  37.             string captchaText = string.Format("{0:X}", objRandom.Next(1000000, 9999999));  
  38.             //add the captcha value in session  
  39.             Session["CaptchaVerify"] = captchaText.ToLower();  
  40.             Font objFont = new Font("Courier New", 15, FontStyle.Bold);  
  41.             //Draw the image for captcha  
  42.             objGraphics.DrawString(captchaText, objFont, Brushes.Black, 20, 20);  
  43.             objBitmap.Save(Response.OutputStream, ImageFormat.Gif);  
  44.         }  
  45.     }  
  46. }  
Register.aspx
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="CaptchaDemo.Register" %>  
  2.   
  3.   
  4. <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">  
  5.     <table>  
  6.         <tr>  
  7.             <td colspan="2">User Registration  
  8.             </td>  
  9.         </tr>  
  10.         <tr>  
  11.             <td>Full Name  
  12.             </td>  
  13.             <td>  
  14.                 <asp:TextBox runat="server" ID="txtFullName"></asp:TextBox>  
  15.             </td>  
  16.         </tr>  
  17.         <tr>  
  18.             <td>Email Id  
  19.             </td>  
  20.             <td>  
  21.                 <asp:TextBox runat="server" ID="txtEmail"></asp:TextBox>  
  22.             </td>  
  23.         </tr>  
  24.         <tr>  
  25.             <td>User Name  
  26.             </td>  
  27.             <td>  
  28.                 <asp:TextBox runat="server" ID="txtUserName"></asp:TextBox>  
  29.             </td>  
  30.         </tr>  
  31.         <tr>  
  32.             <td>Password  
  33.             </td>  
  34.             <td>  
  35.                 <asp:TextBox runat="server" ID="txtPassword" TextMode="Password"></asp:TextBox>  
  36.             </td>  
  37.         </tr>  
  38.         <tr>  
  39.             <td>Verification Code  
  40.             </td>  
  41.             <td>  
  42.                <asp:Image ID="Image2" runat="server" Height="55px" ImageUrl="~/Captcha.aspx" Width="186px" />  
  43.                 <br />  
  44.                 <asp:Label runat="server" ID="lblCaptchaMessage"></asp:Label>  
  45.           
  46.             </td>  
  47.         </tr>  
  48.         <tr>  
  49.             <td>Enter Verifaction Code  
  50.             </td>  
  51.             <td>  
  52.                 <asp:TextBox runat="server" ID="txtVerificationCode"></asp:TextBox>  
  53.             </td>  
  54.         </tr>  
  55.         <tr>  
  56.             <td colspan="2">  
  57.                 <asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" />  
  58.             </td>  
  59.         </tr>  
  60.     </table>  
  61. </asp:Content>  
See I have added the captcha page with image.

captcha page

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.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. namespace CaptchaDemo  
  8. {  
  9.     public partial class Register: System.Web.UI.Page  
  10.     {  
  11.         protected void Page_Load(object sender, EventArgs e)  
  12.         {}  
  13.         protected void btnSubmit_Click(object sender, EventArgs e)  
  14.         {  
  15.             if (txtVerificationCode.Text.ToLower() == Session["CaptchaVerify"].ToString())  
  16.             {  
  17.                 Response.Redirect("Default.aspx");  
  18.             }  
  19.             else  
  20.             {  
  21.                 lblCaptchaMessage.Text = "Please enter correct captcha !";  
  22.                 lblCaptchaMessage.ForeColor = System.Drawing.Color.Red;  
  23.             }  
  24.         }  
  25.     }  
  26. }  
Default.aspx
  1. <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CaptchaDemo._Default" %>  
  2.     <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">  
  3.         <br />  
  4.         <asp:Label runat="server" ID="lblCaptchaMessage" ForeColor="Green">  
  5.         </asp:Label>  
  6.     </asp:Content>  
Default.aspx.cs
  1. using System;  
  2. using System.Web.UI;  
  3. namespace CaptchaDemo  
  4. {  
  5.     public partial class _Default: Page  
  6.     {  
  7.         protected void Page_Load(object sender, EventArgs e)  
  8.         {  
  9.             lblCaptchaMessage.Text = "You have entered correct captch code";  
  10.             lblCaptchaMessage.ForeColor = System.Drawing.Color.Green;  
  11.         }  
  12.     }  
  13. }  
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.

 run the project

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.

press to submit button

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

redirect to some other page

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.