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:

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">
  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;
  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;
  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"
  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>
  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"/>
  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*" />
  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">
  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*" />
  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>
  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)
  13. Protected Sub Page_Load(ByVal sender As Object, ByVal 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"))
  22. End While
  23. reader.Close()
  24. con.Close()
  25. End If
  26. End Sub
  27. Protected Sub b1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles b1.Click
  28. Try
  29. con.Open()
  30. If Session("randomStr").ToString() = txtcaptcha.Text Then
  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 & "')"
  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
  4. Imports System.Drawing.Text
  5. Partial Class Captcha
  6. Inherits System.Web.UI.Page
  7. Protected Sub Page_Load(ByVal sender As Object, ByVal 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