article

Signup using Image Verification Tutorial

Email
Submitted on: 1/3/2015 1:36:00 PM
By: rajat talwar (from psc cd)  
Level: Beginner
User Rating: By 38 Users
Compatibility: VB.NET, ASP.NET
Views: 2339
 
     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).


 
				





Imports System


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

 

 

 


Other 1 submission(s) by this author

 


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this article (in the Beginner category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments


 There are no comments on this submission.
 

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular article, please click here instead.)
 

To post feedback, first please login.