Introduction
We need to check if it is a real person who is registering on our Web site. So we decided to generate an image with a random code, hidden for robots, and feed it to the browser instead of a page response. We show it in our registration form, and let the user enter the code to check it.
Create the Web Project
- File -> New -> New project
Create a new CodeImage Visual Basic ASP.NET Web Application.
Change the Web Form
- Rename WebForm1.aspx to CodeImage.aspx. Open it.
- Switch to HTML View (Right click -> View HTML source).
- Remove all HTML code. Leave only the <%@ Page ... %> header.
- Switch to Code View (Right click -> View Code).
Change the Page_Load method with the code to generate the random code image. Also set Session("hiddenCode") to allow code checks later:
CodeImage.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="CodeImage.aspx.vb" Inherits="CodeImage" %>
CodeImage.aspx.vb
Partial Class CodeImage
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'Put user code to initialize the page here
' Create a Bitmap image
Dim ImageSrc As System.Drawing.Bitmap = New System.Drawing.Bitmap(155, 85)
' Fill it randomly with white pixels
For iX As Integer = 0 To ImageSrc.Width - 1
For iY As Integer = 0 To ImageSrc.Height - 1
If Rnd() > 0.5 Then
ImageSrc.SetPixel(iX, iY, System.Drawing.Color.White)
End If
Next iY
Next iX
' Create an ImageGraphics Graphics object from bitmap Image
Dim ImageGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(ImageSrc)
' Generate random code.
Dim hiddenCode As String = (Fix(Rnd() * 10000000)).ToString
' Set Session variable
Session("hiddenCode") = hiddenCode
' Draw random code within Image
Dim drawFont As New System.Drawing.Font("Arial", 20, Drawing.FontStyle.Italic)
Dim drawBrush As New _
System.Drawing.SolidBrush(System.Drawing.Color.Black)
Dim x As Single = 5.0 + (Rnd() / 1) * (ImageSrc.Width - 120)
Dim y As Single = 5.0 + (Rnd() / 1) * (ImageSrc.Height - 30)
Dim drawFormat As New System.Drawing.StringFormat
ImageGraphics.DrawString(hiddenCode, drawFont, drawBrush, _
x, y, drawFormat)
' Change reponse content MIME type
Response.ContentType = "image/jpeg"
' Sent Image using Response OutputStream
ImageSrc.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg)
' Dispose used Objects
drawFont.Dispose()
drawBrush.Dispose()
ImageGraphics.Dispose()
End Sub
End Class
CodeImageDefault.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="CodeImageDefault.aspx.vb" Inherits="CodeImageDefault" %>
<!DOCTYPE html PUBLIC "-//W 3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Generate an Image with a Random Number</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<img style="Z-INDEX: 101; LEFT: 152px; POSITION: absolute; TOP: 24px" height="85" alt="Hidden Code"
src="CodeImage.aspx" width="155"/>
<div style="DISPLAY: inline; Z-INDEX: 102; LEFT: 88px; WIDTH: 304px; POSITION: absolute; TOP: 120px; HEIGHT: 19px"
ms_positioning="FlowLayout">Enter the Code in image:</div>
<asp:TextBox id="TextBox1" style="Z-INDEX: 103; LEFT: 160px; POSITION: absolute; TOP: 144px"
runat="server"></asp:TextBox>
<asp:Button id="Button1" style="Z-INDEX: 104; LEFT: 168px; POSITION: absolute; TOP: 176px" runat="server"
Text="Button" Width="128px" Height="32px"></asp:Button>
<asp:Label id="Label1" style="Z-INDEX: 105; LEFT: 128px; POSITION: absolute; TOP: 224px" runat="server"
Width="232px" Height="32px"></asp:Label>
</div>
</form>
</body>
</html>
CodeImageDefault.aspx.vb
Partial Class CodeImageDefault
Inherits System.Web.UI.Page
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
If TextBox1.Text <> Session("hiddenCode") Then
Label1.Text = "Wrong Code!"
Else
Label1.Text = "Correct Code!"
End If
End Sub
End Class