|
You may have noticed that on my "Register" page, there's a security verification image that the user has to copy the numbers that they see in to the sign-up form. This ensures that a person is registering, and not an automated program.
Below is an example. Refresh this page to generate a new image.
This short guide explains how I implemented this in to a C# 2.0 project, and parts of it are based on other examples I’ve seen on the web.
Step 1: Add a new "Generic Handler" page to your project called "SecurityNumberGenerator.ashx"
Step 2: Add the following code to this new page
<%@ WebHandler Language="C#" Class="SecurityNumberGenerator" %>
using System;
using System.IO;
using System.Web;
using System.Drawing;
using System.Drawing.Imaging;
using System.Configuration;
using System.Security.Cryptography;
using System.Drawing.Text;
using System.Web.SessionState;
public class SecurityNumberGenerator : IHttpHandler, IRequiresSessionState{
public void ProcessRequest (HttpContext context)
{
RandomNumberGenerator rm;
rm = RandomNumberGenerator.Create();
byte[] data = new byte[3];
rm.GetNonZeroBytes(data);
string zpTmp = "";
string zpRand = "";
for (int i = 0; i <= data.Length - 1; i ++)
{
//First convert it into a integer
int lpVal = Convert.ToInt32(data.GetValue(i));
// Check whether the converted int falls in between alphabets, symbols
if (lpVal > 32 && lpVal < 127)
{
zpTmp = Convert.ToChar(lpVal).ToString(); //Convert to character
}
else
{
zpTmp = lpVal.ToString(); //Remain as integer
}
zpRand += zpTmp.ToString(); //Append it to a string
}
HttpContext.Current.Session["RandomTextGenerator"] = zpRand;
Bitmap bmp = generateImage(zpRand);
bmp.Save(context.Response.OutputStream, ImageFormat.Gif);
bmp.Dispose();
}
public bool IsReusable {
get {
return false;
}
}
public Bitmap generateImage(string sTextToImg)
{
PixelFormat pxImagePattern = PixelFormat.Format32bppArgb;
Bitmap bmpImage = new Bitmap(1, 1, pxImagePattern);
Font fntImageFont = new Font("Trebuchets", 14);
Graphics gdImageGrp = Graphics.FromImage(bmpImage);
float iWidth = gdImageGrp.MeasureString(sTextToImg, fntImageFont).Width;
float iHeight = gdImageGrp.MeasureString(sTextToImg, fntImageFont).Height;
bmpImage = new Bitmap((int)iWidth, (int)iHeight, pxImagePattern);
gdImageGrp = Graphics.FromImage(bmpImage);
gdImageGrp.Clear(Color.White);
gdImageGrp.TextRenderingHint = TextRenderingHint.AntiAlias;
gdImageGrp.DrawString(sTextToImg, fntImageFont, new SolidBrush(Color.Red), 0, 0);
gdImageGrp.Flush();
return bmpImage;
}
}
Step 3: Insert image on page
You now want to display the generated image on a page. This is done by adding an ImageButton to your page, and pointing it to the above "SecurityNumberGenerator.ashx" page:
<asp:Image BorderColor="Black" BorderStyle="solid" BorderWidth="1" ID="imgVerification" runat="server" ImageUrl="~/SecurityNumberGenerator.ashx" />
Step 4: Validate the value entered by the user
You will also need a text box on the page for the user to enter the characters from the image. To validate whether the characters in the image match what the user entered, you need to get a reference to the characters in the randomly generated image. The following code can be added in the code-behind file:
string zpSecurityCode = Session["RandomTextGenerator"].ToString();
The Session value was set in the Generic Handler file, so you just need to compare this Session value to the value the user entered in the text box.
|