我们上一节建了数据库的表,但我发现很多东西还未完善起来,比如验证码,我们先做好验证码吧,验证码我们再熟悉不过了,为了防止恶意的登录,我们必须在登录页面加入验证码,下面我将分享一个验证码,这个是用C#画的,原理是,生成一个随机4位数,将其保存为session或者是cookie形式,将用户输入的验证码进行对比,
验证码可以是一个视图cshtml,或者是一个aspx页面,也可以是一个ashx一般处理程序,我们这里用ashx来显示
在App.Admin下的Core文件夹下新建一个一般处理文件verify_code.ashx,复制以下代码(此验证码适用aspx程序的)
using System; using System.IO; using System.Drawing; using System.Drawing.Imaging; using System.Web; using System.Web.SessionState; namespace App.Admin { /// <summary> /// 验证码生成类 /// </summary> public class verify_code : IHttpHandler, IRequiresSessionState { public void ProcessRequest(HttpContext context) { int codeW = 80; int codeH = 22; int fontSize = 16; string chkCode = string.Empty; //颜色列表,用于验证码、噪线、噪点 Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.Brown, Color.DarkBlue }; //字体列表,用于验证码 string[] font = { "Times New Roman", "Verdana", "Arial", "Gungsuh", "Impact" }; //验证码的字符集,去掉了一些容易混淆的字符 char[] character = { ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘8‘, ‘9‘, ‘a‘, ‘b‘, ‘d‘, ‘e‘, ‘f‘, ‘h‘, ‘k‘, ‘m‘, ‘n‘, ‘r‘, ‘x‘, ‘y‘, ‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘, ‘H‘, ‘J‘, ‘K‘, ‘L‘, ‘M‘, ‘N‘, ‘P‘, ‘R‘, ‘S‘, ‘T‘, ‘W‘, ‘X‘, ‘Y‘ }; Random rnd = new Random(); //生成验证码字符串 for (int i = 0; i < 4; i++) { chkCode += character[rnd.Next(character.Length)]; } //写入Session context.Session["Code"] = chkCode; //创建画布 Bitmap bmp = new Bitmap(codeW, codeH); Graphics g = Graphics.FromImage(bmp); g.Clear(Color.White); //画噪线 for (int i = 0; i < 1; i++) { int x1 = rnd.Next(codeW); int y1 = rnd.Next(codeH); int x2 = rnd.Next(codeW); int y2 = rnd.Next(codeH); Color clr = color[rnd.Next(color.Length)]; g.DrawLine(new Pen(clr), x1, y1, x2, y2); } //画验证码字符串 for (int i = 0; i < chkCode.Length; i++) { string fnt = font[rnd.Next(font.Length)]; Font ft = new Font(fnt, fontSize); Color clr = color[rnd.Next(color.Length)]; g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18 + 2, (float)0); } //画噪点 for (int i = 0; i < 100; i++) { int x = rnd.Next(bmp.Width); int y = rnd.Next(bmp.Height); Color clr = color[rnd.Next(color.Length)]; bmp.SetPixel(x, y, clr); } //清除该页输出缓存,设置该页无缓存 context.Response.Buffer = true; context.Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0); context.Response.Expires = 0; context.Response.CacheControl = "no-cache"; context.Response.AppendHeader("Pragma", "No-Cache"); //将验证码图片写入内存流,并将其以 "image/Png" 格式输出 MemoryStream ms = new MemoryStream(); try { bmp.Save(ms, ImageFormat.Png); context.Response.ClearContent(); context.Response.ContentType = "image/Png"; context.Response.BinaryWrite(ms.ToArray()); } finally { //显式释放资源 bmp.Dispose(); g.Dispose(); } } public bool IsReusable { get { return false; } } } }
//写入Session
context.Session["Code"] = chkCode;
调用这个页面将生成一个session,我们将与用户输入的代码进行对比,OK回到Account的index视图
在验证码的位置嵌入这个页面
<tr> <td style="width: 80px; text-align: right">验证码: </td> <td> <input style="width: 50px" type="text" name="ValidateCode" id="ValidateCode" /> <img id="codeImg" alt="刷新验证码!" style="margin-bottom: -8px; cursor: pointer;" src="/Core/verify_code.ashx" onclick="this.src=this.src+‘?‘" /> <a href="javascript:$(‘#codeImg‘).trigger(‘click‘)">看不清?</a> </td> </tr>
编译后预览一下
时间: 2024-10-08 03:58:58