serving the solutions day and night

Pages

Thursday, May 6, 2010

CAPTCHA Image Code - C#.NET, AJAX

CAPTCHA - Completely Automated Public Turing test to tell Computers and Humans Apart
A CAPTCHA is used to ensure that the response is not generated by a computer, means response from human. It is used to distinguish between human and bots.

HTML Form Code
<script>
 function resetCaptcha()
 {
  document.getElementById('imgCaptcha').src = 'captchaimage.aspx?' + Math.random();
 }
</script>
<div>
<img src="captchaimage.aspx" id="imgCaptcha">
<img src="refresh.jpeg" border=0 id="imgRefresh" onclick="setTimeout('resetCaptcha()', 300); return false;">
</div>

C#.NET CODE - captchaimage.aspx.cs
using System;
using System.Web;
using System.Drawing;
using System.Drawing.Text;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.IO;
using System.Web.SessionState;

public partial class captcha : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
  CSHARPCaptchaImage();
 }

 void CSHARPCaptchaImage()
 {
  /* Define number characters contains the captcha image, declare global */
  int iTotalChars= 6;

  /* Size image height and width, declare globl */
  int iHeight=40;
  int iWidth=170;

  /* Font size is 80% of the image height */
  float fFontSize1 = iHeight * 0.30F;
  float fFontSize2 = iHeight * 0.40F;

  /* font style */
  Random randChars = new Random();
  Font fntStyle1 = new Font("Arial", fFontSize1, FontStyle.Bold);
  Font fntStyle2 = new Font("Arial", fFontSize2, FontStyle.Bold);

  /* Possible characters in the image - 09azAZ:;<>=?[]\^_`@*/
  string sImageCode = "";
  for (int i = 0; i < iTotalChars; i++)
   sImageCode += System.Convert.ToChar(randChars.Next(48, 122));

  /* Bitmap function is used to create a create new image using the GD+ Library*/
  Bitmap bmpImage = new Bitmap(iWidth, iHeight);
  Graphics graImage = Graphics.FromImage(bmpImage);

  /* Set the background image color */
  graImage.Clear(Color.FromArgb((randChars.Next(0, 255)), (randChars.Next(0, 255)), (randChars.Next(0, 255))));
  graImage.TextRenderingHint = TextRenderingHint.AntiAlias;

  /*DrawString(string, Font, Brush, RectangeD, StringFormat) function is used to write text in the sepecifed rectangle format to the image using fonts. */
  for (int i = 0; i < iTotalChars; i++)
  {
   if ((i % 2) == 0)
    graImage.DrawString(sImageCode.Substring(i, 1), fntStyle1, new SolidBrush(Color.FromArgb((randChars.Next(0, 255)), (randChars.Next(0, 255)), (randChars.Next(0, 255)))), iWidth/(iTotalChars + 1) * i+10, iHeight/6);
   else
    graImage.DrawString(sImageCode.Substring(i, 1), fntStyle2, new SolidBrush(Color.FromArgb((randChars.Next(0, 255)), (randChars.Next(0, 255)), (randChars.Next(0, 255)))), iWidth/(iTotalChars + 1) * i+15, iHeight/4);
   }

  /* output captcha image to browser */
  Response.ContentType = "image/GIF";

  /* create gifg image and display on the screen*/
  bmpImage.Save(Response.OutputStream, ImageFormat.Gif);

  /* Dispose function is used destory an image object */
  graImage.Dispose();
  bmpImage.Dispose();

  Session["dns_security_code"] = sImageCode;
 }
}

Use AJAX code to Reload CAPTCHA image in the form. Once form submitted,use JavaScript to validate CAPTCHA image text value is not empty. Then use C#.NET code to validate user input CAPTCHA image text value and SESSION value, if it both are same, then process further oterwise throw verification is not valid in the error message.

1 comment:

Nwe said...

An Excellent Article.Thanks a lot