Page 1 of 1

CAPTCHA in VB.Net This is a tutorial on creating a CAPTCHA in VB.Net Rate Topic: ***** 1 Votes

#1 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1639
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Post icon  Posted 27 July 2007 - 01:02 PM

This tutorial will guide you through creating a CAPTCHA security image for your web application in VB.Net using Visual Studio 2005. Before we jump into the code lets take a look at what a CAPTCHA is. CAPTCHA stands for Completely Automated Public Turing Test To Tell Computers And Humans Apart." What does this mean? It is a program that can tell humans from machines using some type of generated test. A test most people can easily pass but a computer program cannot. The term CAPTCHA was coined in 2000 by Luis von Ahn, Manuel Blum, Nicholas Hopper and John Langford of Carnegie Mellon University. These 4 individuals are credited with creating the first CAPTCHA, which was used by Yahoo!

CAPTCHA’s have many practical uses for security, including, but not limited to:
1. To prevent “comment spam” in user blogs.
2. Protecting registration at websites (prevents people from having “bots” to register many accounts for the purpose of spam).
3. Protecting email addresses from “Scrapers” (A “Scraper” is a software bot that searches the Internet for email addresses in plain text).
4. Help prevent Dictionary Attacks.

When I first set out to create my own CAPTCHA for a website I was working on for a client, I searched and searched the Internet for a “ready made” one. I found a few simple examples, most done in C# (not that that really matters as I can read/program in both) but I wanted a VB.Net version, which was nowhere to be found. I wanted to offer anyone who used my CAPTCHA more flexibility and control than the simpler versions I had found offered, such as the ability to chose their primary color, secondary color and even the HatchStyle for the HatchBrush. So without further adieu let’s see some code (This is kind of a long class, over 420 lines, so bear with me).

The first thing you must do with the class is to ensure you have the proper references:

Imports System
Imports System.Drawing
Imports System.Drawing.Imaging
Imports System.Drawing.Drawing2D
Imports System.Drawing.Text
Imports System.Windows.Forms
Imports System.Reflection



For some of these (depends on how you have your IDE setup) you may have to go Project > Add Reference and add a reference to the Namespace’s listed above. After than you need your Global Variables (both property variables and regular global)

‘Property variables
Private _text As String
Private _width As Integer
Private _height As Integer
Private _failure As String
Private _hatch As HatchStyles
Private _mainColor As Color
Private _secondaryColor As Color

‘Global variables
Private _image As Bitmap
Private ran As Random = New Random
Private fontFamily As String



Next we need to declare our object properties ( we have Read-only and Read/Write properties). The Read/Write properties (only 1 at this time) is for holding the failure message to the end user if they didn’t type the correct CAPTCHA. This is one of the features I wanted in my version of the CAPTCHA.

The ReadOnly properties are much larger in number, these properties are for:
1. Random string to be displayed
2. The image itself
3. The width of the image
4. The height of the image
5. The main color *
6. The secondary color *
7. The HatchStyle of the HatchBrush *

* These are 3 features I wanted to give the developer control over, a way to customize it for their needs and not be stuck with a version where someone “told” then what to use.

‘Read/Write properties
''' <summary>
''' Property to hold the failure message to be displayed to the user
''' </summary>
''' <value>A string the developer choses to use</value>
''' <returns>The string message (or a NullReferenceException if it isnt provided)</returns>
''' <remarks></remarks>
Public Property FailureMessage()
   Get
	  Return _failure
   End Get
   Set(ByVal value)
	  If String.IsNullOrEmpty(value) Then
		  Throw New NullReferenceException("A return message wasn't specified and is required.")
		  _failure = String.Empty
	  Else
		  _failure = value
	 End If
  End Set
End Property

‘ReadOnly Properties
''' <summary>
''' Readonly property to hold the text of the CAPTCHA image
''' </summary>
''' <value></value>
''' <returns>String value</returns>
''' <remarks></remarks>
Public ReadOnly Property Text() As String
	Get
	  Return _text
	End Get
End Property

''' <summary>
''' Readonly property to hold the image
''' </summary>
''' <value></value>
''' <returns>A bitmap image</returns>
''' <remarks></remarks>
Public ReadOnly Property Image() As Bitmap
	Get
	  Return _image
	End Get
End Property

''' <summary>
''' Readonly property to hold the width of the image
''' </summary>
''' <value></value>
''' <returns>Int value</returns>
''' <remarks></remarks>
Public ReadOnly Property Width() As Integer
   Get
	 Return _width
   End Get
End Property

''' <summary>
''' Readonly property to hold the height of the image
''' </summary>
''' <value></value>
''' <returns>Int value</returns>
''' <remarks></remarks>
Public ReadOnly Property Height() As Integer
   Get
	 Return _height
   End Get
End Property

''' <summary>
''' Readonly property to hold the main color of the image
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public ReadOnly Property MainColor() As Color
   Get
	 Return _mainColor
   End Get
End Property

''' <summary>
''' Readonly property to hold the secondaty color of the image
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public ReadOnly Property SecondaryColor() As Color
   Get
	 Return _secondaryColor
   End Get
End Property

''' <summary>
''' Readonly property to hold the style of HatchBrush used
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public ReadOnly Property HatchType() As HatchStyles
   Get
	 Return _hatch
   End Get
End Property



The next step in the class are 2 Enumerations. The first Enum holds the default height and width of the CAPTCHA. I chose to do this with an Enum so if the developer wanted to change the default size he only had to change the dimensions in one place, not multiple. The second Enum holds several HatchStyle’s for the HatchBrush. I only provide 8 at this time but I will be adding more in the future, this way the developer/user of the component isn’t tied into what I said the style should be. Lets take a look at them

‘Enumeration to hold the default dimensions of the CAPTCHA
Enum DefaultPicSize
	Width = 150
	Height = 60
End Enum

‘Enumerationh to hold HatchStyle values of the HatchBrush
Enum HatchStyles
	LargeConfetti = HatchStyle.LargeConfetti
	Grid = HatchStyle.LargeGrid
	Cross = HatchStyle.DiagonalCross
	LargeCheckerBoard = HatchStyle.LargeCheckerBoard
	ZigZag = HatchStyle.ZigZag
	Diamond = HatchStyle.SolidDiamond
	SmallCheckerBoard = HatchStyle.SmallCheckerBoard
	SmallConfetti = HatchStyle.SmallConfetti
End Enum



Next we need a way to instantiate the object, and finalize & dispose of it when we’re done with it (cleaning up is very important). There are 4 “New()” constructors with this component, which gives you a variety of ways to create a new one. You can create one with just the text to display on the image (all other values will be the default values) all the way to specifying the text, size, font, primary & secondary colors and hatch style. For finalizing we have a Overrides Finalize method, and we have 2 Dispose methods (one is a Overrides utilizing a Boolean “disposing” variable).

''' <summary>
''' First New Constructor
''' </summary>
''' <param name="s">String to be displayed on the image</param>
''' <remarks></remarks>
Public Sub New(ByVal s As String)
   _text = s
   _hatch = HatchStyles.LargeConfetti
   _mainColor = Color.Gray
   _secondaryColor = Color.White
   SetPicSize(DefaultPicSize.Height, DefaultPicSize.Height)
   SetFont()
   BuildCAPTCHA()
End Sub

''' <summary>
''' Second New Constructor
''' </summary>
''' <param name="s">String to be displayed on the image</param>
''' <param name="width">Width of the image</param>
''' <param name="height">Height of the image</param>
''' <remarks></remarks>
Public Sub New(ByVal s As String, ByVal width As Integer, ByVal height As Integer)
   _text = s
   _hatch = HatchStyles.LargeConfetti
   _mainColor = Color.Gray
   _secondaryColor = Color.White
   SetPicSize(width, height)
   SetFont()
   BuildCAPTCHA()
End Sub

''' <summary>
''' Third New Constructor
''' </summary>
''' <param name="s">String to be displayed on the image</param>
''' <param name="width">Width of the image</param>
''' <param name="height">Height of the image</param>
''' <param name="fontName">Name of the font to be used</param>
''' <remarks></remarks>
Public Sub New(ByVal s As String, ByVal width As Integer, ByVal height As Integer, ByVal fontName As String)
   _text = s
   _hatch = HatchStyles.LargeConfetti
   _mainColor = Color.Gray
   _secondaryColor = Color.White
   SetPicSize(width, height)
   SetFont(fontName)
   BuildCAPTCHA()
End Sub

''' <summary>
''' Fourth New Constructor
''' </summary>
''' <param name="s">String to be displayed on the image</param>
''' <param name="width">Width of the image</param>
''' <param name="height">Height of the image</param>
''' <param name="fontName">Name of the font to be used</param>
''' <param name="hatch">HatchBrush to use</param>
''' <param name="maincolor">Main color of the image</param>
''' <param name="secondarycolor">Secondary color of the image</param>
''' <remarks></remarks>
Public Sub New(ByVal s As String, ByVal width As Integer, ByVal height As Integer, ByVal fontName As String, _
		ByVal hatch As HatchStyles, ByVal maincolor As Color, ByVal secondarycolor As Color)
   _text = s
   _hatch = hatch
   _mainColor = maincolor
   _secondaryColor = secondarycolor
   SetPicSize(width, height)
   SetFont(fontName)
   BuildCAPTCHA()
End Sub

''' <summary>
''' Finalize method
''' </summary>
''' <remarks></remarks>
Protected Overrides Sub Finalize()
	Dispose(False)
End Sub

''' <summary>
''' Dispose method
''' </summary>
''' <remarks></remarks>
Public Sub Dispose()
	GC.SuppressFinalize(Me)
	Dispose(True)
End Sub

''' <summary>
''' Overridable Dispose method (uses the boolean disposing variable)
''' </summary>
''' <param name="disposing"></param>
''' <remarks></remarks>
Protected Overridable Sub Dispose(ByVal disposing As Boolean)
	If disposing Then
		Image.Dispose()
	End If
End Sub



In the New() constructors you see 2 methods being called, SetPicSize and SetFont. These 2 methods allow the user of this component to specify both the dimensions of the CAPTCHA and the font to use. With the font, if it’s a font that isn’t installed on the end user’s computer it will default to a System Font (to avoid it bombing on the end user if they don’t have the font the developer specified), and I also suggest you specify a font that is known to be on most, if not all, computers. Lets have a look at those methods.

''' <summary>
''' Method for setting the size of the image
''' </summary>
''' <param name="width">Desired width of the image</param>
''' <param name="height">Desired height of the image</param>
''' <remarks></remarks>
Private Sub SetPicSize(ByVal width As Integer, ByVal height As Integer)
   'Check to make sure they didnt supply a width of zero, if they did then throw an exception
   If width <= 0 Then Throw New ArgumentOutOfRangeException("width", width, "Argument out of range, must be 
greater than zero.")
   'Check to make sure they didnt supply a height of zero, if they did then throw an exception
   If height <= 0 Then Throw New ArgumentOutOfRangeException("height", height, "Argument out of range, must be greater than zero.")

   'Set the width & height of the image
   _width = width
   _height = height
End Sub

''' <summary>
''' Procedure to set the font to be used on the CAPTCHA image
''' </summary>
''' <param name="fontName">Name of the font (Verdana, Arial, Tahoma, etc)</param>
''' <remarks></remarks>
Private Sub SetFont(Optional ByVal fontName As String = "")
	Dim font As Font
	Try
	   ‘If the user specified a font then use it
	   If Not String.IsNullOrEmpty(fontName) Then
		   font = New Font(fontName, 12.0F)
		   fontName = fontName
	   Else
		   ‘Otherwise default to Verdana
		   font = New Font("Verdana", 12.0F)
		   fontName = fontName
	   End If
		   font.Dispose()
	Catch ex As Exception
	   ‘This ensures that if a font is specified that isnt on the end users
	   ‘computer than a system font will be used
	   fontName = System.Drawing.FontFamily.GenericSerif.Name
	End Try
End Sub



Next we need a random string to display on the CAPTCHA. If you look at the CAPTCHA’s being used on the Internet today there isn’t a set size of this string, so I decided to give the option of specifying how long you want your string to be. This gives the developer a little bit of flexibility when using this component. To generate the random string I used:

''' <summary>
''' Function to generate the random string to be displayed on the image
''' </summary>
''' <param name="size">Length of the random string</param>
''' <returns>A 5 character random string</returns>
''' <remarks>
''' To keep track of do this:
''' Session("CaptchaText") = GenerateRandomString
'''</remarks>
Public Function GenerateRandomString(ByVal size As Integer) As String
	 Dim captchaString As String = ""
	 Dim iCount As Integer = 0
	 Try
		‘Start your loop
		While iCount < size
		   ‘Grab a random character and append it to the string
		   captchaString = String.Concat(captchaString, ran.Next(10).ToString)
		   System.Math.Min(System.Threading.Interlocked.Increment(iCount), iCount - 1)
		End While
	 Catch ex As Exception
		MessageBox.Show(ex.Message, "Error Generating Code", MessageBoxButtons.OK, MessageBoxIcon.Error)
		captchaString = String.Empty
	 End Try
	 Return captchaString
End Function



The only thing we have left to do is generate the CAPTCHA image. This is the large function in all of this, as it has to do a lot of work. To generate the image we start with a 32-bit bitmap, then we create a graphics object. From here we fill in the background of the graphics object (using the hatch style and 2 colors the developer specifies). From there we get the font ready, we then adjust the font (done in a loop) until it fits in the image properly. Then we warp the text randomly, add some random noise (making it even harder for a bot to read it), then finally we clean everything up. Since this image is created at runtime, there’s no image saved anywhere, no way for a “bot” to retrieve the image and try to process it. Here is the final function in this component.

''' <summary>
''' Method for generating the CAPTCHA image
''' </summary>
''' <remarks></remarks>
Private Sub BuildCAPTCHA()
   'Create a new 32-bit bitmap image.
	Dim captchaImage As Bitmap = New Bitmap(Width, Height, PixelFormat.Format32bppArgb)

	'Create a graphics object for drawing.
	Dim oGraphic As Graphics = Graphics.FromImage(captchaImage)
	oGraphic.SmoothingMode = SmoothingMode.AntiAlias
	Dim rect As Rectangle = New Rectangle(0, 0, Width, Height)

	'Fill in the background.
	Dim hbBrush As HatchBrush = New HatchBrush(_hatch, MainColor, SecondaryColor)
	oGraphic.FillRectangle(hbBrush, rect)

	'Set up the text font.
	Dim size As SizeF
	Dim captchaFontSize As Integer = rect.Height + 15
	Dim captchaFont As Font

	'Adjust the font size until the text fits within the image.
	Do
	  System.Math.Max(Threading.Interlocked.Decrement(captchaFontSize), captchaFontSize + 1)
	  captchaFont = New Font(fontFamily, captchaFontSize, FontStyle.Bold)
	  size = oGraphic.MeasureString(Text, captchaFont)
	Loop While size.Width > rect.Width

	'Set up the text format.
	Dim format As New StringFormat
	format.Alignment = StringAlignment.Center
	format.LineAlignment = StringAlignment.Center

	'Create a path using the text and warp it randomly.
	Dim gpCaptchaPath As GraphicsPath = New GraphicsPath
	gpCaptchaPath.AddString(Text, captchaFont.FontFamily, CType(captchaFont.Style, Integer), captchaFont.Size, 
rect, format)
	Dim captchaSingle As Single = 4.0F
	Dim points As PointF() = {New PointF(ran.Next(rect.Width) / captchaSingle, ran.Next(rect.Height) / captchaSingle), _
	 New PointF(rect.Width - ran.Next(rect.Width) / captchaSingle, ran.Next(rect.Height) / captchaSingle), _
			New PointF(ran.Next(rect.Width) / captchaSingle, rect.Height - ran.Next(rect.Height) / captchaSingle), _
			New PointF(rect.Width - ran.Next(rect.Width) / captchaSingle, rect.Height - ran.Next(rect.Height) / captchaSingle)}

	Dim captchaMatrix As Matrix = New Matrix
	captchaMatrix.Translate(0.0F, 0.0F)
	gpCaptchaPath.Warp(points, rect, captchaMatrix, WarpMode.Perspective, 0.0F)

	 'Draw the text.
	 hbBrush = New HatchBrush(HatchStyle.LargeConfetti, Color.LightGray, Color.DarkGray)
	 oGraphic.FillPath(hbBrush, gpCaptchaPath)

	 'Add some random noise.
	 Dim m As Integer = Math.Max(rect.Width, rect.Height)
	 Dim iCount As Integer = 0
	 While iCount < CType((rect.Width * rect.Height / 30.0F), Integer)
		Dim xAxis As Integer = ran.Next(rect.Width)
		Dim yAxis As Integer = ran.Next(rect.Height)
		Dim width As Integer = ran.Next(m / 50)
		Dim height As Integer = ran.Next(m / 50)
		oGraphic.FillEllipse(hbBrush, xAxis, yAxis, width, height)
		System.Math.Min(System.Threading.Interlocked.Increment(iCount), iCount - 1)
	End While

	'Clean up after ourselves
	captchaFont.Dispose()
	hbBrush.Dispose()
	oGraphic.Dispose()

	'Set the final image and return it
	 _image = captchaImage
End Sub



That is how to create a CAPTCHA in VB.Net. At first working with the System.Drawing Namespace was very scary for me, but after creating this CAPTCHA it’s not as bad as it seems. This tutorial should also give you a very good dive into working with the System.Drawing Namespace, what it can do, how to do certain things. If, after playing with this code, you are having a hard time understanding how to make it work on your site feel free to either send me a private message, or better yet post a comment here and I will be more than happy to post an example of it in action, to help you along.

Since I have this code under a GNU General Public License, meaning you can alter and modify it how you see fit I am also uploading both the DLL file and the source code, all I ask is that you keep my header in tact. I have no problems with anyone using this commercially, but if you do it would be nice if there was a mention of me somewhere, if not, that’s okay too. I just hope this tutorial helps at least one person, if I can help one person at a time then I am giving back to the community that has helped me get to where I am today.

I hope you enjoyed this tutorial and thanks for reading.

Attached File(s)



Is This A Good Question/Topic? 1
  • +

Replies To: CAPTCHA in VB.Net

#2 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1868
  • View blog
  • Posts: 20,280
  • Joined: 17-March 01

Posted 27 July 2007 - 09:55 PM

Excellent Tutorial!

Vote for it on DZone: http://www.dzone.com...a_in_vbnet.html
Was This Post Helpful? 1
  • +
  • -

#3 aniesdamoi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 11-February 08

Posted 31 October 2008 - 12:47 AM

hye...
i need to put the captcha graphic in my web registration form.
but i dunno how... is it all the codes put in one page..
can u give me the step by step from beginning how i should put in my form.thanks
Was This Post Helpful? 0
  • +
  • -

#4 cmdev  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 26-March 09

Posted 26 March 2009 - 10:43 AM

hey fantastic idea! how do i implement the image into a form, ive tried my saving the image created to a variable called myBMP but there is no way i can set the system.drawing.image part of a webcontrol image. could you help with this?
Was This Post Helpful? 0
  • +
  • -

#5 cmdev  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 26-March 09

Posted 27 March 2009 - 11:04 AM

Hey, i downloaded this captcha solution and it works fine, thats if you want to mess around adding in the idea of changing the text everytime a request is made for a captcha image, i have created a function inside the captcha class called "GenerateRandomString" which generates a random string so you dont have to worry about that side of it, i will submit this back to dream in code once it is completed with an explaination of how to implement this into your websites.....
Was This Post Helpful? 0
  • +
  • -

#6 DaRkLiFe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 27-March 09

Posted 27 March 2009 - 11:23 PM

tnx a lot for this awesome tut !
Was This Post Helpful? 0
  • +
  • -

#7 cmdev  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 26-March 09

Posted 28 March 2009 - 05:50 AM

Ive now uploaded an updated version of this control, with a generaterandomstring part so you dont have to worry about what text goes in the captcha image......


http://www.dreaminco...showtopic=95849

This post has been edited by cmdev: 28 March 2009 - 05:50 AM

Was This Post Helpful? 0
  • +
  • -

#8 labrat  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 02-February 09

Posted 31 March 2009 - 10:32 AM

The download seems to be corrupted
Was This Post Helpful? 0
  • +
  • -

#9 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1639
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Posted 31 March 2009 - 11:00 AM

@labrat: I just downloaded the file and unzipped it with no problems. What program are you using?
Was This Post Helpful? 0
  • +
  • -

#10 labrat  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 02-February 09

Posted 31 March 2009 - 11:11 AM

View Postlabrat, on 31 Mar, 2009 - 09:32 AM, said:

The download seems to be corrupted

WinRAR
Was This Post Helpful? 0
  • +
  • -

#11 TechKid  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 82
  • Joined: 04-September 10

Posted 18 October 2010 - 04:39 AM

Hey, great tutorial. :)
But the archive you uploaded doesn't work, its damaged or corrupted.
Could you upload it again please?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1