[X] My Assistant

[cmdev]

This is the Captcha In VB.Net that was very kindly posted by PsychoCoder and worked perfectly if you want to generate the text everytime you create the captcha object. Instead of doing this i have changed the CaptchaClass and added in a function that generates a random string of 6 - 7 letters that the user will have to enter in the security code box on your form.

I have also added in a property called captchaText that stores the generated string that you have requested, so that at runtime you can save this to a session/application variable and check in your code that this has been entered correctly.

CODE

Imports System.Text

YOU MUST add a reference to System.Text or the StringBuilder class will not be available for use.

All this function below does is create a random string of letters that you can specify the size of. and whether they are upper or lowercase letters.

CODE

Private Function RandomString(ByVal size As Integer, ByVal lowerCase As Boolean) As String
            Dim builder As New StringBuilder()
            Dim random As New Random()
            Dim result As String
            Dim ch As Char
            Dim i As Integer
            For i = 0 To size - 1
                ch = Convert.ToChar(Convert.ToInt32((26 * random.NextDouble() + 65)))
                builder.Append(ch)
            Next i

            If (lowerCase) Then
                result = builder.ToString().ToLower()
            Else
                result = builder.ToString
            End If
            _captchaText = result
            Return result
        End Function 'RandomString

Thats all i added. the rest of the control was perfect. and as a programmer using this on a live website i felt the need to put this back on here with the little addition i put in to it.

If you start a web project and want to use this in your project then this is what you need to do, with this updated version or the original it doesnt matter how u do it.


1. Add the CaptchaImage.dll as a reference in your project.

2. Put an ASP Image control on your form that you want a captcha image on and set the ImageURL to CaptchaImage.Aspx

3. Enter this code into the Page_Load portion of the CaptchaImage.aspx.Vb:

CODE

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'Declare The CaptchaObject
        Dim xcaptcha As Captcha_Image.CaptchaClass.CaptchaImage
        'Create The Captcha Object        
        xcaptcha = New Captcha_Image.CaptchaClass.CaptchaImage(150, 60, "Verdana", Captcha_Image.CaptchaClass.CaptchaImage.HatchStyles.ZigZag, Drawing.Color.White, Drawing.Color.LightGray)
       'Set the Captcha Text to a session variable
        Session("CaptchaText") = xcaptcha.catpchaText
        'Set the response of this page to an image
        Response.ContentType = "image/jpeg"
        'output the image to the response
        xcaptcha.Image.Save(Response.OutputStream, ImageFormat.Jpeg)
        'Close and Dispose the Captcha Object
        xcaptcha.Dispose()
    End Sub

I hope this helps all who downloaded this control in the past as it now is a fully working random captcha object.

Regards,

CMDevelopment.

Here is the updated code and project files......

 CaptchaImage.zip ( 114.82k ) Number of downloads: 198



-------------------------------------------------------------------------
BELOW IS THE ORIGINAL TUTORIAL/POST BY PSYCHOCODER.
-------------------------------------------------------------------------

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:

CODE

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)

CODE

‘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.

CODE

‘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

CODE

‘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).

CODE

''' <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.

CODE

''' <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:

CODE

''' <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.

CODE

''' <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.

[PsychoCoder]

Well the whole purpose of CAPTCHA is to have it different each time the object is created, thus explaining why I created that the way I did. If you create a single CAPTCHA text and they get it wrong all you're doing is displaying the same word each time, thus defeating the purpose of using CAPTCHA in your application.

I guess I should have shown an example of using it because in the way I use it I do everything you do in your example, save it to the Session (most of the time I save it in the ViewState).

[labrat]

I was unable open the file. it doesn't have an extension.

[cmdev]

The strings are different everytime they are created, you can see a working "LIVE" version of the captcha object at Http://www.ViewMyCCTV.Co.Uk

[soltec]

I have tried to download and extract both .zip files and keep getting an error. Is there any place else to download the code with the .dll and asp or aspx code?

[cmdev]

sorry people, it seems that i have put an extension-less file within the Zip file, just rename the CaptchaImage file to CaptchaImage.zip and you will get the code for this control.

[LucioMarques]

Great Work, both of you, but you are missing some basic stuf about CAPTCHAS.

Firs of all, you can't save the captcha answer in the VIEWSTATE, cause VIEWSTATE is kept in a hidden field, all someone would have to do is search for the captcha word in your source code.

The RandomStringGenerator is very useful, but you shouldn't have implemented it into the CaptchaImage class, cause you restricted too much the class. Someone could just have called "Dim img as New CaptchaImage(RandomString(4))". See? Much better, dont you think?

Also, the RandomStringGenerator couldn't have been completely random. In a distorted image, the person can't distinguish 'zero' from 'o', or 'vv' from 'w', or 'I' from 'l', see? There are too many dots in the captcha, and the generator uses punctuation in the string. This little mistake made your class useless... =/

You can't change the font size, that's too bad for sites that care with accessibility.

I will have to implement it now... Soon I'll post it here.

Thanx anyway, your job is great.