Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
SQL Server

Using Image characters verification to register a user on a web site.

Author: DevASP
Download Source Code :

This article is about how you can verify image characters while registering a user to your web site.

This is same as when you make a new account on a mail server like yahoo or hotmail, while you are entering your information you are asked to enter the characters shown in the image. Note that these characters are generated randomly. This is to verify the user for registration. This is necessary because some one may send a hell of request to your server so that to slow down the speed of your server by increasing the requests and making the size of your database large and large by entering more and more registration information. You will be surprised how some one can do this. Note that this can be done using JavaScript that will submit the form again and again. But if you use image verification no one can do because system can not read the image itself and enter the characters into the text box.


Steps you will do.


Start visual studio and create a new web application.


Add new class in your project form the project menu and add the following code to randomly generate the image. Note that the image will be save temporary into your project directory.


Import the following namespaces in your class.


Imports System.Drawing.Text

Imports System.Drawing.Imaging

Imports System.Security.Cryptography


Add the following functions in your class.


Public Function CreateImage(ByVal path As String, ByVal height As Integer, ByVal width As Integer) As String


        Dim r As New Random

        Dim salt As String = CreateSalt(4)

        Dim bmp As New Bitmap(width, height, PixelFormat.Format24bppRgb)

        Dim g As Graphics = Graphics.FromImage(bmp)

        g.TextRenderingHint = TextRenderingHint.AntiAlias


        g.DrawRectangle(Pens.White, 1, 1, width - 3, height - 3)

        g.DrawRectangle(Pens.Black, 0, 0, width, height)

        Dim mymat As New System.Drawing.Drawing2D.Matrix

        Dim i As Integer


        For i = 0 To Len(salt) – 1




            mymat.RotateAt(r.Next(-30, 0), New PointF(width * (0.12 * i), height * 0.5))

            g.Transform = mymat


g.DrawString(salt.Chars(i), New Font("Comic Sans MS", 15, FontStyle.Italic), SystemBrushes.ActiveCaptionText, width * (0.12 * i), height * 0.5) 'draw the text on our(Image)






        bmp.Save(path, ImageFormat.Gif)



        Return salt

    End Function


    Public Function CreateSalt(ByVal size As Integer) As String

        Dim rng As New RNGCryptoServiceProvider

        Dim buff(size) As Byte


        Return Convert.ToBase64String(buff)

    End Function


Now come to your web form and drop a image control on the form.

Drop a label and set its following properties.


Name = “lblMessage”

Text =””


Drop a text box control and set its following properties.


Name = “TextBox1”

Tex = “”


Finally drop a button control and set its following properties.


Name = “btnRegister”

Text = “Check”


Open the code window for the form and write the following code in the load event of the page.


If Not Page.IsPostBack Then

Dim verify As New verification

Dim salt As String = verify.CreateImage(Server.MapPath(".\Random.gif"), 100, 200)

Image.ImageUrl = Server.MapPath(".\Random.gif")

Session.Add("salt", salt)

Dim params As System.Collections.Specialized.NameValueCollection

params = Request.QueryString()

If params.Count > 0 Then lblMessage.Text = params.Item("reason")

End If 


Write following code in the click event of the check button to check weather the entered characters

match to the character in the image or not if the characters match then display a success message

otherwise a failed message.


If Not TextBox1.Text.Equals(Session.Item("salt")) Then

            Response.Redirect(Request.Url.ToString & "?reason=The Strings did not match")            Else

            lblMessage.Text = "You correctly type the characters shown in the image"

End If


Run your application and enter the characters shown in the image and click the check button to verify the characters.

Article Comments
I have a problem. The image doesn't display. I set the Image.ImageUrl like the code that you have, it doesn't display the image, but the actual image Random.gif is in the project's directory.

Posted on 12/12/2006 2:12:17 PM by Andy

Hi Andy
you must create an Image Object in default form and poit ImgUrl to Random.gif
After that comment this code
comment :Image.ImageUrl = Server.MapPath(".\Random.gif")
That's helpfull to me thanks a lot


Posted on 4/2/2007 9:37:19 AM by nghiavt

Hey Gr8 job , its really very helpful.

Posted on 4/7/2007 8:48:15 AM by Pawan

i am getting error "A generic error occurred in GDI+."
Do you have any idea.
I need help on this.

Thank you in advance.

Posted on 8/2/2007 1:29:59 PM by Rowan Shrestha

Hi All. We have written a free ASP.NET control for verification images. You can download and try it here.

Good luck!

Posted on 10/22/2007 12:39:10 PM by BaySoft_Dan

Add Article Comment:
Name :
Email Address :
Comments :
<< Monitoring Window services in local and remote machine

Disclaimer - Privacy
© 2002-2017