Registration Form using Captcha Image Implementation in VB.NET

In this article we will create a registration page with captcha implemented to it.

In this article we will create a registration page with captcha implemented to it. Before going forward we should know what is captcha?

CAPTCHA: - Completely Automated Public Turing test to tell Computers and Humans Apart. A captcha is a program that protects websites against bots by generating and grading tests that humans can pass but current computer programs cannot. For example, humans can read distorted text but current computer programs can't.

Characteristics: A captcha is a means of automatically generating challenges which intends to:

  • Provide a problem easy enough for all humans to solve.
  • Prevent standard automated software from filling out a form, unless it is specially designed to circumvent specific CAPTCHA systems.

For more information please visit

http://www.captcha.net

http://en.wikipedia.org/wiki/CAPTCHA 

Table structure

Create two tables employee and country as below:

Table-in-SQL-Server.gif
 
Program

Default.aspx code 

  1. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>Registration Page</title>  
  6. <style type="text/css">  
  7.  
  8. #datePicker  
  9. {  
  10. display:none;  
  11. position:absolute;  
  12. border:solid 2px black;  
  13. background-color:white;  
  14. }  
  15. .content  
  16. {  
  17. width:400px;  
  18. background-color:white;  
  19. margin:auto;  
  20. padding:10px;  
  21.   
  22. }  
  23. html  
  24. {  
  25. background-color:white;  
  26. }  
  27.         .style10  
  28.         {  
  29.             background-color: #eeeeee;  
  30.             height: 26px;  
  31.         }  
  32.         .style11  
  33.         {  
  34.             height: 26px;  
  35.   
  36.         }  
  37.     .style12  
  38.     {  
  39.         background-color: #eeeeee;  
  40.     }  
  41.     </style>    
  42.     <link href="style.css" rel="stylesheet" type="text/css" />  
  43. </head>  
  44. <body>  
  45.     <form id="form1" runat="server">  
  46.     <div>  
  47.     <table>  
  48.         <tr>  
  49.         <td class="deepbluetextbold"><b>Employee Information</b></td>  
  50.         </tr>  
  51.         <tr>  
  52.           <td class="colouredCell">  
  53.             <asp:Label runat="server" ID="LocationLabel1" AssociatedControlID="LocationLabel1"CssClass="style7" Text="Title" />  
  54.           </td>  
  55.           <td>  
  56.           <asp:RadioButtonList id="rb1" runat="server" RepeatLayout="Flow" RepeatColumns="4"  
  57.                   RepeatDirection="Horizontal" Width="200px" >  
  58.                 <asp:ListItem Text="Mr."  Selected="False"/>  
  59.                 <asp:ListItem Text="Mrs."/>  
  60.                 <asp:ListItem Text="M/S"/>  
  61.                 <asp:ListItem Text="Dr."/>  
  62.           </asp:RadioButtonList>  
  63.           </td>  
  64.           <td><asp:RequiredFieldValidator ID="rfv1" Text="Select any Choice" runat="server"  
  65.                   ControlToValidate="rb1"></asp:RequiredFieldValidator></td>  
  66.         </tr>  
  67.         <tr>  
  68.           <td class="colouredCell">  
  69.             <asp:Label runat="server" ID="LocationLabel2" AssociatedControlID="LocationLabel2"CssClass="style7" Text="Name*" />  
  70.               </td>  
  71.               <td>  
  72.               <asp:TextBox runat="server" ID="txtname" Width="200px" />  
  73.               </td>  
  74.               <td>  
  75.              <asp:RequiredFieldValidator ID="rfv2" Text="Please Enter the Name" runat="server"ControlToValidate="txtname"></asp:RequiredFieldValidator>  
  76.               </td>  
  77.         </tr>  
  78.         <tr>  
  79.         <td class="colouredCell">  
  80.             <asp:Label runat="server" ID="LocationLabel3" AssociatedControlID="LocationLabel3"CssClass="style7" Text="Email*" />  
  81.               </td>  
  82.               <td>  
  83.               <asp:TextBox runat="server" ID="txtemail" Width="200px"/>  
  84.               </td>  
  85.               <td>  
  86.              <asp:RequiredFieldValidator ID="rfv3" Text="Please Enter the Email" runat="server"ControlToValidate="txtemail"></asp:RequiredFieldValidator>                   
  87.               </td>  
  88.               <td> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"  
  89.   
  90.                       ErrorMessage="Please enter valid email"  
  91.                       ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"  
  92.                       ControlToValidate="txtemail"></asp:RegularExpressionValidator></td>  
  93.         </tr>  
  94.         <tr>  
  95.         <td class="colouredCell">  
  96.             <asp:Label runat="server" ID="LocationLabel4" AssociatedControlID="LocationLabel4"CssClass="style7" Text="Date of Birth*" />  
  97.              </td>  
  98.               <td colspan="0" rowspan="1">  
  99.               <asp:TextBox runat="server" ID="txtdateofbirth" Width="200px"/>  
  100.               </td>  
  101.               <td>  
  102.               <asp:RequiredFieldValidator ID="rfv4" Text="Please Enter the Dateofbirth" runat="server"ControlToValidate="txtdateofbirth"  
  103. </asp:RequiredFieldValidator>  
  104.               </td>  
  105.         </tr>  
  106.         <tr>  
  107.         <td class="colouredCell">  
  108.             <asp:Label runat="server" ID="LocationLabel5" AssociatedControlID="LocationLabel5"CssClass="style7" Text="Guest?*" />  
  109.        </td>  
  110.               <td>  
  111.               <asp:RadioButtonList id="rb2" runat="server" RepeatLayout="Flow" RepeatColumns="3"RepeatDirection="Horizontal" >  
  112.                 <asp:ListItem Text="Yes"  Selected="False"/>  
  113.                 <asp:ListItem Text="No"/>  
  114.               </asp:RadioButtonList>  
  115.               </td>  
  116.               <td>  
  117.               <asp:RequiredFieldValidator ID="rfv5" Text="Select yes or no" runat="server"ControlToValidate="rb2"></asp:RequiredFieldValidator>  
  118.               </td>  
  119.         </tr>     
  120.         <tr>  
  121.         <td class="colouredCell">  
  122.             <asp:Label runat="server" ID="LocationLabel6" AssociatedControlID="LocationLabel6"  
  123.                 CssClass="style7" Text="Company/Organization*" />  
  124.               </td>  
  125.               <td>  
  126.               <asp:TextBox runat="server" ID="txtcompany" Width="200px"/>  
  127.               </td>  
  128.               <td>  
  129.               <asp:RequiredFieldValidator ID="rfv6" Text="Please Enter the Company" runat="server"ControlToValidate="txtcompany"></asp:RequiredFieldValidator>  
  130.               </td>  
  131.         </tr>        
  132.         <tr>  
  133.         <td class="colouredCell">  
  134.             <asp:Label runat="server" ID="LocationLabel7" AssociatedControlID="LocationLabel7"  
  135.                 CssClass="style7" Text="Designation*" />  
  136.               </td>  
  137.               <td>  
  138.               <asp:TextBox runat="server" ID="txtdeg" Width="200px"/>  
  139.               </td>  
  140.               <td>  
  141.               <asp:RequiredFieldValidator ID="rfv7" Text="Please Enter the Designation" runat="server"ControlToValidate="txtdeg"></asp:RequiredFieldValidator>  
  142.               </td>  
  143.         </tr>     
  144.         <tr>  
  145.         <td class="colouredCell">  
  146.             <asp:Label runat="server" ID="LocationLabel8" AssociatedControlID="LocationLabel8"  
  147.                 CssClass="style7" Text="Street Address*" />  
  148.               </td>  
  149.               <td>  
  150.               <asp:TextBox runat="server" ID="txtaddress" Width="200px"/>  
  151.               </td>  
  152.               <td>  
  153.               <asp:RequiredFieldValidator ID="rfv8" Text="Please Enter the Street Address"runat="server" ControlToValidate="txtaddress"  
  154. </asp:RequiredFieldValidator>  
  155.               </td>  
  156.         </tr>       
  157.         <tr>  
  158.         <td class="colouredCell">  
  159.             <asp:Label runat="server" ID="LocationLabel9" AssociatedControlID="LocationLabel9"  
  160.                 CssClass="style7" Text="City*" />  
  161.               </td>  
  162.               <td>  
  163.               <asp:TextBox runat="server" ID="txtcity" Width="200px"/>  
  164.               </td>  
  165.               <td>  
  166.               <asp:RequiredFieldValidator ID="rfv9" Text="Please Enter the Street City" runat="server"ControlToValidate="txtcity"</asp:RequiredFieldValidator>  
  167.               </td>  
  168.         </tr>       
  169.         <tr>  
  170.         <td class="colouredCell">  
  171.             <asp:Label runat="server" ID="LocationLabel10" AssociatedControlID="LocationLabel10"  
  172.                 CssClass="style7" Text="State" />  
  173.               </td>  
  174.               <td>  
  175.               <asp:TextBox runat="server" ID="txtstate" Width="200px"/>  
  176.               </td>  
  177.               <td>  
  178.   
  179.               <asp:RequiredFieldValidator ID="rfv10" Text="Please Enter the Street state"runat="server" ControlToValidate="txtstate"  
  180. </asp:RequiredFieldValidator>  
  181.               </td>  
  182.         </tr>       
  183.         <tr>  
  184.         <td class="colouredCell">  
  185.             <asp:Label runat="server" ID="LocationLabel11" AssociatedControlID="LocationLabel11"  
  186.                 CssClass="style7" Text="Zip Code*" />  
  187.               </td>  
  188.               <td>  
  189.               <asp:TextBox runat="server" ID="txtzip" Width="200px"/>  
  190.   
  191.               </td>  
  192.               <td>  
  193.               <asp:RequiredFieldValidator ID="rfv11" Text="Please Enter the Zip" runat="server"ControlToValidate="txtzip"></asp:RequiredFieldValidator>  
  194.               </td>  
  195.         </tr>        
  196.         <tr>  
  197.         <td class="style10">  
  198.             <asp:Label runat="server" ID="LocationLabel12" AssociatedControlID="LocationLabel12"  
  199.                 CssClass="style7" Text="Phone*" />  
  200.   
  201.               </td>  
  202.               <td class="style11">  
  203.               <asp:TextBox runat="server" ID="txtphone" Width="200px"/>  
  204.               </td>  
  205.               <td>  
  206.               <asp:RequiredFieldValidator ID="rfv12" Text="Please Enter the Phone" runat="server"ControlToValidate="txtphone  
  207. </asp:RequiredFieldValidator>  
  208.               </td>  
  209.         </tr>     
  210.         <tr>  
  211.         <td class="colouredCell">  
  212.   
  213.             <asp:Label runat="server" ID="LocationLabel13" AssociatedControlID="LocationLabel13"  
  214.                 CssClass="style7" Text="Fax*" />  
  215.               </td>  
  216.               <td>  
  217.               <asp:TextBox runat="server" ID="txtfax" Width="200px"/>  
  218.               </td>  
  219.               <td>  
  220.               <asp:RequiredFieldValidator ID="rfv13" Text="Please Enter the Fax" runat="server"ControlToValidate="txtfax"></asp:RequiredFieldValidator>  
  221.               </td>  
  222.         </tr>    
  223.         <tr>  
  224.         <td class="colouredCell">  
  225.             <asp:Label runat="server" ID="LocationLabel14" AssociatedControlID="LocationLabel14"  
  226.                 CssClass="style7" Text="Website*" />  
  227.   
  228.               </td>  
  229.               <td>  
  230.               <asp:TextBox runat="server" ID="txtwebsite" Width="200px"/>              </td>  
  231.               <td>  
  232.               <asp:RequiredFieldValidator ID="rfv14" Text="Please Enter the Website" runat="server"ControlToValidate="txtwebsite"</asp:RequiredFieldValidator>  
  233.               </td>  
  234.               <td> <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server"  
  235.             ErrorMessage="Please enter valid Url"  
  236.             ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?"  
  237.                       ControlToValidate="txtwebsite"></asp:RegularExpressionValidator>  
  238.   
  239.     </td>  
  240.         </tr>     
  241.         <tr>  
  242.         <td class="style12">  
  243.             <asp:Label runat="server" ID="LocationLabel15" AssociatedControlID="LocationLabel15"  
  244.                 CssClass="style7" Text="Country*" />  
  245.                  </td>  
  246.                  <td>  
  247.                  <asp:DropDownList ID="d1" Width="200px" runat="server">  
  248.                      <asp:ListItem>Select</asp:ListItem>  
  249.                      </asp:DropDownList>  
  250.                   </td>  
  251.                   <td>  
  252.               <asp:RequiredFieldValidator ID="rfv15" Text="Please select any value" runat="server"ControlToValidate="d1"></asp:RequiredFieldValidator>  
  253.               </td>  
  254.                 </tr>       
  255.           <tr>  
  256.         <td class="colouredCell">  
  257.             <asp:Label runat="server" ID="LocationLabel16" AssociatedControlID="LocationLabel16"  
  258.                 CssClass="style7" Text="Captcha Image*" />  
  259.                  </td>  
  260.                  <td><asp:TextBox runat="server" ID="txtcaptcha" Width="200px"/></td>  
  261.                  <td>  
  262.                  <img style="WIDTH: 119px; HEIGHT: 34px" alt="" src="Captcha.aspx" />  
  263.                  </td>  
  264.                  <td><a href="Default.aspx" id="uu">Can't Read?</a></td>  
  265.                  </tr>              
  266.         </table>  
  267.     </div>  
  268.     <asp:Button ID="b1" runat="server" Text="Register" />  
  269.     </form>  
  270. </body>  
  271. </html>  

Default.aspx.vb code

  1. Imports System.Data  
  2. Imports System.Data.SqlClient  
  3. Partial Class _Default  
  4.     Inherits System.Web.UI.Page    
  5.     Dim strConnString As String = System.Configuration.ConfigurationManager.ConnectionStrings.Item("ConnectionString").ToString()  
  6.     Dim sqlda As SqlDataAdapter  
  7.     Dim com As SqlCommand  
  8.     Dim ds As DataSet  
  9.     Dim dt As DataTable  
  10.     Dim str As String  
  11.     Dim con As New SqlConnection(strConnString)  
  12.       
  13.     Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) HandlesMe.Load  
  14.         If Not Page.IsPostBack Then  
  15.             con.Open()  
  16.             str = "select * from country"  
  17.             com = New SqlCommand(str, con)  
  18.             Dim reader As SqlDataReader = com.ExecuteReader  
  19.             While reader.Read  
  20.                 d1.Items.Add(reader("countryname"))  
  21.   
  22.             End While  
  23.             reader.Close()  
  24.             con.Close()  
  25.         End If  
  26.     End Sub  
  27.     Protected Sub b1_Click(ByVal sender As ObjectByVal e As System.EventArgs) Handles b1.Click  
  28.         Try  
  29.             con.Open()  
  30. If Session("randomStr").ToString() = txtcaptcha.Text Then  
  31.   
  32.                 str = "insert into employee values ('" & rb1.SelectedValue & "','" & txtname.Text & "','" & txtemail.Text & "','" & txtdateofbirth.Text & "','" & rb2.SelectedValue & "','" & txtcompany.Text & "','"& txtdeg.Text & "','" & txtaddress.Text & "','" & txtcity.Text & "','" & txtstate.Text & "','" & txtzip.Text & "'," & txtphone.Text & "," & txtfax.Text & ",'" & txtwebsite.Text & "','" & d1.SelectedValue & "','" & txtcaptcha.Text & "')"  
  33.   
  34.                 com = New SqlCommand(str, con)  
  35.                 com.ExecuteNonQuery()  
  36.                 Response.Redirect("Success.aspx")  
  37.                 con.Close()  
  38.             Else  
  39.                 Response.Write("Wrong text inserted ,Please enter new characters shown in image textbox")  
  40.             End If  
  41.         Catch err As Exception  
  42.             Response.Write(err.Message)  
  43.         End Try  
  44.     End Sub  
  45. End Class  
Captcha.aspx code
  1. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Captcha.aspx.vb" Inherits="Captcha"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>Untitled Page</title>  
  6. </head>  
  7. <body>  
  8.     <form id="form1" runat="server">  
  9.     <div>    
  10.     </div>  
  11.     </form>  
  12. </body>  
  13. </html>  
Captcha.aspx.vb code
  1. Imports System.Drawing  
  2. Imports System.Drawing.Imaging  
  3.    
  4. Imports System.Drawing.Text  
  5. Partial Class Captcha  
  6.     Inherits System.Web.UI.Page  
  7.     Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) HandlesMe.Load  
  8.         'create object of Bitmap Class and set its width and height.  
  9.         Dim objBMP As Bitmap = New Bitmap(180, 51)  
  10.         'Create Graphics object and assign bitmap object to graphics' object.  
  11.         Dim objGraphics As Graphics = Graphics.FromImage(objBMP)  
  12.         objGraphics.Clear(Color.OrangeRed)  
  13.         objGraphics.TextRenderingHint = TextRenderingHint.AntiAlias  
  14.         Dim objFont As Font = New Font("arial", 30, FontStyle.Regular)  
  15.         'genetating random 6 digit random number  
  16.         Dim randomStr As String = GeneratePassword()    
  17.         'set this random number in session  
  18.         Session.Add("randomStr", randomStr)  
  19.         objGraphics.DrawString(randomStr, objFont, Brushes.White, 2, 2)  
  20.         Response.ContentType = "image/GIF"  
  21.         objBMP.Save(Response.OutputStream, ImageFormat.Gif)  
  22.         objFont.Dispose()  
  23.         objGraphics.Dispose()  
  24.         objBMP.Dispose()  
  25.     End Sub  
  26.     Public Function GeneratePassword() As String  
  27.         ' Below code describes how to create random numbers.some of the digits and letters  
  28.         ' are ommited because they look same like "i","o","1","0","I","O".  
  29.         Dim allowedChars As String = "a,b,c,d,e,f,g,h,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,"  
  30.         allowedChars += "A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z,"  
  31.         allowedChars += "2,3,4,5,6,7,8,9"  
  32.         Dim sep() As Char = {","c}  
  33.         Dim arr() As String = allowedChars.Split(sep)  
  34.         Dim passwordString As String = ""  
  35.         Dim temp As String  
  36.         Dim rand As Random = New Random()  
  37.         Dim i As Integer  
  38.         For i = 0 To 6 - 1 Step i + 1  
  39.             temp = arr(rand.Next(0, arr.Length))  
  40.             passwordString += temp  
  41.         Next  
  42.         Return passwordString  
  43.     End Function  
  44. End Class  
Output

CAPTCHA-in-VB.NET.gif