Signup using Image Verification Tutorial

				









Signup using Image Verification Tutorial
All Major Websites dealing with secure content, administrative rights and
user privacy use image verification. an image is provided with a random string embossed
on it and before registering the string has to be entered in the provided
textbox. This can be easily seen at Yahoo. COM, gmail, planet source code (yes
our very own PSC will ask you for this when you vote for me). 
Lets try and work
at producing such a random image so that it can be easily embedded in any of
professional website. I prefer working with classes so let’s develop a
verification class.
First we will import the required namespaces.
Imports
System.Drawing.Text 'for
font
Imports
System.Drawing.Imaging 'for
saving the gif
Imports
System.Security.Cryptography 'for
creating random String
Public
Class Verification
 

Public
Function CreateImage(ByVal path
As String, ByVal height
As Integer, ByVal width
As
Integer) As String
'Creates
a Random Gif file of provided width and height
'the string on the gif file is rotated randomly
'returns the random string painted
Dim r As
New Random 'to generate a random angle
Dim salt
As String = CreateSalt(4) 'generates a random string
Dim bmp As
New Bitmap(width, height,
PixelFormat.Format24bppRgb) 'creates a
24bit
bitmap in memory
Dim g As Graphics
= Graphics.FromImage(bmp)
g.TextRenderingHint = TextRenderingHint.AntiAlias
'this will smoothen the Font
g.Clear(Color.Black) 'this clears the
background and paints specified color
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 'matrix
used for rotation
transformation
Dim i As
Integer
For i = 0 To Len(salt)
- 1 'we will rotate each literal at a specified angle
mymat.Reset()    

' matrix should 
be initialized to identity matrix
mymat.RotateAt(r.Next(-30, 0), New PointF(width * (0.12 * i), height * 0.5))
'rotate at any angle b/w -30 and 0
g.Transform = mymat
'apply the transform
g.DrawString(salt.Chars(i), New Font("Comic
Sans MS", 10, 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) 'save the gif at
specified path and name
g.Dispose() 'clean
up
bmp.Dispose() 'ok
the mess is over
Return
salt 'return the string painted for verification
End
Function
 
Public
Function CreateSalt(ByVal size
As Integer) As String
' Generate a cryptographic random number
using the cryptographic
' service provider
Dim rng As New RNGCryptoServiceProvider
Dim buff(size) As Byte
rng.GetBytes(buff)
' Return a Base64 string representation
of the random number
Return
Convert.ToBase64String(buff)
End
Function
End
Class
 
Here I have used a single font. You may use different fonts for each
literal. This can be easily done by storing different font family names in an
array
Now let’s get on with “How to use the class”. Drop an image box, label,
textbox and a button from the toolbox to an aspx page use image box ‘id=image
height=100, width=200; button id=btnRegister; textbox id=textbox1; label id=lblMessage
Private
Sub Page_Load(ByVal sender
As System.Object, ByVal e As System.EventArgs)
Handles
MyBase.Load
'Put
user code to initialize the page here
If
Not Page.IsPostBack Then    

'we do not want 
picture to be created when page is postback

'postback happens when asp.net fires it's control's event
Dim verify
As New Verification
Dim salt
As String = verify.CreateImage(Server.MapPath(".\Random.gif"), 100,
200)    

'I have created 
a file named Random.gif in the same directory as my web page size 100,200
Image.ImageUrl = Server.MapPath(".\Random.gif")
Session.Add("salt",
salt)    

'Add our salt to session for verification so that we can 
check on postback
Dim params As System.Collections.Specialized.NameValueCollection
params = Request.QueryString()
If params.Count > 0 Then lblMessage.Text = params.Item("reason")
End
If
End
Sub
 
Private
Sub btnRegister_Click(ByVal sender
As System.Object, ByVal e As System.
EventArgs) Handles btnRegister.Click
If
Not TextBox1.Text.Equals(Session.Item("salt"))
Then
Response.Redirect(Request.Url.ToString
& "?reason=The Strings did not match")    

'if we donot do it page will be considered a postback
Else
lblMessage.text=”Good Boy”
End
If
End
Sub
 
I have used sessions here. U can also use encrypted cookies or encrypted url
passing. 
Keep in mind size of proportion b/w size of your image box and size of image
you are creating. This affects your image’s clarity and also font may go out of
bounds
Plz vote for me and you can request working demo at my email id