学步园

网站页面验证码方法是防止电脑攻击的一个比较常用的方法，结合本人的实践，在这里对验证码图片相关技术作一介绍，主要实现图片产生，图片生成参数自动设置，点击图片自动更换一张等常用功能．

1. 验证图片的产生

首先，建立一个validatepage.aspx页面

Public Class validatepage<br /> Inherits validateClass</p> <p> Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load<br /> End Sub</p> <p>End Class

其次，实现validateclass类，validatepage.aspx是一个继承自validateclass类的页面，页中无任何实质内容．validateclass类的实现代码如下：

Imports System.Web<br /> Imports System.Web.SessionState<br /> Imports System.Web.UI<br /> Imports System.Web.UI.WebControls<br /> Imports System.Web.UI.HtmlControls<br /> Public Class validateClass<br /> Inherits System.Web.UI.Page</p> <p> ' 验证码存储键<br /> Public Const VCODE As String = "zhaochao888666_SessionKey"</p> <p> '// 验证码长度<br /> Private m_codeLen As Integer = 8<br /> '// 图片清晰度<br /> Private m_fineness As Integer = 80<br /> '// 图片宽度<br /> Private m_imgWidth As Integer = 128<br /> '// 图片高度<br /> Private m_imgHeight As Integer = 24<br /> '// 字体家族名称<br /> Private m_fontName As String = "Times New Roman"<br /> '// 字体大小<br /> Private m_fontSize As Integer = 14<br /> '// 字体样式<br /> Private m_fontStyle As String = "Regular"<br /> '// 绘制起始坐标 X<br /> Private m_posX As Integer = 0<br /> '// 绘制起始坐标 Y<br /> Private m_posY As Integer = 0<br /> Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load<br /> '// 获取代码长度设置<br /> If Not (Request.Params("CodeLen") Is Nothing) Then<br /> m_codeLen = Int32.Parse(Request.Params("CodeLen"))<br /> End If</p> <p> '// 获取图片清晰度设置<br /> If Not (Request.Params("Fineness") Is Nothing) Then<br /> m_fineness = Int32.Parse(Request.Params("Fineness"))<br /> End If</p> <p> '// 获取图片宽度<br /> If Not (Request.Params("ImgWidth") Is Nothing) Then<br /> m_imgWidth = Int32.Parse(Request.Params("ImgWidth"))<br /> End If</p> <p> '// 获取图片高度<br /> If Not (Request.Params("ImgHeight") Is Nothing) Then<br /> m_imgHeight = Int32.Parse(Request.Params("ImgHeight"))<br /> End If</p> <p> '// 获取验证码字体家族名称<br /> If Not (Request.Params("FontName") Is Nothing) Then<br /> m_fontName = Request.Params("FontName")<br /> End If</p> <p> '// 获取验证码字体大小<br /> If Not (Request.Params("FontSize") Is Nothing) Then<br /> m_fontSize = Int32.Parse(Request.Params("FontSize"))<br /> End If</p> <p> '// 获取字体样式<br /> If Not (Request("FontStyle") Is Nothing) Then</p> <p> m_fontStyle = Request.Params("FontStyle")<br /> End If</p> <p> '// 验证码绘制起始位置 X<br /> If Not (Request.Params("PosX") Is Nothing) Then<br /> m_posX = Int32.Parse(Request.Params("PosX"))<br /> End If</p> <p> '// 验证码绘制起始位置 Y<br /> If Not (Request.Params("PosY") Is Nothing) Then<br /> m_posY = Int32.Parse(Request.Params("PosY"))<br /> End If</p> <p> '------------------------------------------------------</p> <p> '// 生成随即验证码<br /> Dim validateCode As String = CreateValidateCode()</p> <p> '// 生成BITMAP图像<br /> Dim bitmap1 As New Bitmap(Me.m_imgWidth, Me.m_imgHeight)</p> <p> '// 给图像设置干扰<br /> DisturbBitmap(bitmap1)</p> <p> '// 绘制验证码图像<br /> DrawValidateCode(bitmap1, validateCode)</p> <p> '// 保存验证码<br /> HttpContext.Current.Session(SK_VALIDATE_CODE) = validateCode</p> <p> '// 保存验证码图像，等待输出<br /> 'Response.Clear()<br /> bitmap1.Save(Response.OutputStream, ImageFormat.Gif)</p> <p> End Sub</p> <p> '/// 随机生成验证码，验证码为：A ～ Z 的英文字母<br /> Protected Overridable Function CreateValidateCode() As String</p> <p> Dim validateCode As String = ""</p> <p> '// 随机数对象<br /> Dim Random As New Random<br /> Dim i, j As Integer</p> <p> For i = 0 To Me.m_codeLen - 1<br /> j = Random.Next(1, 5)<br /> If j Mod 2 <> 0 Then<br /> ' 26: A ～ Z<br /> Dim n As Integer = Random.Next(26)<br /> ' 将数字转换成大写字母<br /> validateCode += Chr(n + 65)<br /> Else<br /> '0-9<br /> Dim n As Integer = Random.Next(9)<br /> validateCode += Chr(n + 48)<br /> End If<br /> Next<br /> Return validateCode<br /> End Function</p> <p> ' 为图片设置干扰点<br /> ' <param name="bitmap">位图图像</param><br /> Protected Overridable Sub DisturbBitmap(ByVal Bitmap1 As Bitmap)<br /> ' 通过随机数生成<br /> Dim Random As New Random<br /> Dim j, i As Integer<br /> For i = 0 To Bitmap1.Width - 1<br /> For j = 0 To Bitmap1.Height - 1<br /> If (Random.Next(100) <= Me.m_fineness) Then<br /> Bitmap1.SetPixel(i, j, Color.White)<br /> End If<br /> Next j<br /> Next i<br /> End Sub</p> <p> ' 绘制验证码图片<br /> '<param name="bitmap">位图图像</param><br /> '<param name="validateCode">所要绘制的验证码</param><br /> Protected Overridable Sub DrawValidateCode(ByVal Bitmap1 As Bitmap, ByVal validateCode As String)</p> <p> '// 获取绘制器对象<br /> Dim g As Graphics = Graphics.FromImage(Bitmap1)</p> <p> '// 设置绘制字体<br /> ' dim font1 as Font=new Font(me.m_fontName, me.m_fontSize, (FontStyle)( enum.Parse(typeof(FontStyle), me.m_fontStyle, false)))<br /> Dim fs1 As New FontStyle<br /> fs1 = CInt(m_fontStyle)</p> <p> Dim font1 As Font = New Font(m_fontName, m_fontSize, fs1)<br /> '// 绘制验证码图像<br /> g.DrawString(validateCode, font1, Brushes.Black, m_posX, m_posY)<br /> End Sub<br /> End Class<br />

       2。validatepage.aspx传入参数说明

validatepage.aspx实现动态生成验证码图片，其参数如下：

    '// 验证码长度
    codeLen As Integer = 8
    '// 图片清晰度
    fineness As Integer = 80
    '// 图片宽度
    imgWidth As Integer = 128
    '// 图片高度
    imgHeight As Integer = 24
    '// 字体名称
   fontName As String = "Times New Roman"
    '// 字体大小
    fontSize As Integer = 14
    '// 字体样式
    fontStyle As String = "Regular"
    '// 绘制起始坐标 X
   posX As Integer = 0
    '// 绘制起始坐标 Y
    posY As Integer = 0

validatepage.aspx在网页中的典型调用方式如下：

 <img id="vcode" src="validatepage/ValidatePage.aspx?CodeLen=4&Fineness=85&ImgWidth=56&PosX=1&PosY=1&FontName=Bookman Old Style&FontSize=13&FontStyle=3" mce_src="validatepage/ValidatePage.aspx?CodeLen=4&Fineness=85&ImgWidth=56&PosX=1&PosY=1&FontName=Bookman Old Style&FontSize=13&FontStyle=3"<br /> style="cursor:pointer;" mce_style="cursor:pointer;" alt="看不清，请点击此图片更换一个" onclick="this.src='validatepage/ValidatePage.aspx?CodeLen=4&Fineness=85&ImgWidth=56&PosX=1&PosY=1&FontName=Bookman Old Style&FontSize=13&FontStyle=3' + '&rndcode=' +Math.random();" />

3。实现点击图片更换验证码功能

得到验证图片后,如何实现点击验证码图片更新代码呢,首先要为验证码图片加入onclick事件，实现快速动态刷新，个人反复实践,实现方式如下:

<tr><br /> <td align="right" class="tdwhite"> 验证码:</td><br /> <td align="left" class="tdwhite" height="30"><br /> <asp:TextBox ID="TextBox1" runat="server" Width="106px"></asp:TextBox><br /> <img id="vcode" src="validatepage/ValidatePage.aspx?CodeLen=4&Fineness=95&ImgWidth=56&PosX=1&PosY=1&FontName=Bookman Old Style&FontSize=13&FontStyle=3" mce_src="validatepage/ValidatePage.aspx?CodeLen=4&Fineness=95&ImgWidth=56&PosX=1&PosY=1&FontName=Bookman Old Style&FontSize=13&FontStyle=3"<br /> style="cursor:pointer;" alt="点击刷新验证码" onclick="this.src='validatepage/ValidatePage.aspx?CodeLen=4&Fineness=95&ImgWidth=56&PosX=1&PosY=1&FontName=Bookman Old Style&FontSize=13&FontStyle=3' + '&rndcode=' +Math.random();" />请将此代码输入左侧的文本框内<br /> </td><br /> </tr>

其中，"&rndcode='+Math.random()"部分无任何意义,只是告诉服务器端该图片的参数已经更改,从而认为图片地址发生变化,及时返回一个新的图片。

至此，一个完整的验证码图片功能基本实现。如果想加入更多功能，可以直接更改validateclass类，比如实现汉字验证等等。