README.md

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