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

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

Author: DevASP
Download Source Code : 654_ImageVarification.zip

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.Clear(Color.Black)

        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.Reset()

 

            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)

 

            g.ResetTransform()

 

        Next

 

        bmp.Save(path, ImageFormat.Gif)

        g.Dispose()

        bmp.Dispose()

        Return salt

    End Function

 

    Public Function CreateSalt(ByVal size As Integer) As String

        Dim rng As New RNGCryptoServiceProvider

        Dim buff(size) As Byte

        rng.GetBytes(buff)

        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
Hi,
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

Nghiavt


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

Hey Gr8 job , its really very helpful.
-Pawan

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.

http://www.roundedpanel.baysoft-net.co.uk

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 DevASP.net