MVC中生成图形验证码并验证(详细)

Posted lfq761204

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MVC中生成图形验证码并验证(详细)相关的知识,希望对你有一定的参考价值。

一、思路

1.生成验证码

通过Random对象生成随机数 ,通过Session对象保存生成的随机验证码,通过Graphics绘图对象在Bitmap位图上进行绘制,并将绘成功的位图对象转换为字节数组,最后返回该字节数组。

2.显示并验证

在控制器中编写读取验证码字节数组的方法,返回FileResult对象并通过视图中img控件显示。通过读取生成验证码时写入的Session对象的值,与从视图中获取的输入值进行比较判断验证码输入是否正确。

二、代码

1.生成验证码图形的核心代码,建议将该类建立在根目录下的自定义目录Common中。

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Web;

namespace XLZXXX.Common {
    public class VerificationCode {
        public static byte[] GetCodeImage() {
//生成随机验证码
            //定义验证码字符库,0和1容易与字母o和i混淆,尽量不用
            char[] codesSource = { '2','3','4','5','6','7','8','9' };
            int codesLength = 4;    //验证码字符个数
            char[] codes = new char[codesLength];   //验证码字符数组
            Random rnd = new Random();  //定义一个随机数生成器
            //生成随机验证码
            for(int i = 0;i<codesLength;i++) {
                //从验证码字符库里随机取一个字符赋值给验证码的第i个字符
                codes[i]=codesSource[rnd.Next(codesSource.Length)];
            }
//将生成的验证码字符串赋值给Session对象
            HttpContext.Current.Session["VerificationCode"]=string.Join("",codes);
//定义验证码图片对象
            int charSize = 24;  //验证码字符大小
            int imgWidth = charSize*(codesLength+1);    //生成验证码图片的宽度
            int imgHeight = charSize*2;                 //生成验证码图片的高度
            Bitmap bmp = new Bitmap(imgWidth,imgHeight);
            Graphics g = Graphics.FromImage(bmp);
            g.Clear(Color.White);
//在背景上添加噪线
            for(int i = 0;i<20;i++) {
                int x1 = rnd.Next(imgWidth), y1 = rnd.Next(imgHeight);
                int x2 = rnd.Next(imgWidth), y2 = rnd.Next(imgHeight);
                //随机线颜色随机,宽度在1和2值之间随机
                Pen pen = new Pen(Color.FromArgb(rnd.Next()),rnd.Next(1,3));
                g.DrawLine(pen,x1,y1,x2,y2);
            }
//添加验证码字符
            Font font = new Font("黑体",charSize,FontStyle.Bold);
            //定义一个渐变颜色的笔刷
            LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0,0,charSize,charSize),Color.LightGreen,Color.Red,1.5F);
            for(int i = 0;i<codesLength;i++) {
                //重新定义一个位图对象和绘图对象,画随机旋转的单个字符
                Bitmap bmp1 = new Bitmap(charSize*3,charSize*3);
                Graphics g1 = Graphics.FromImage(bmp1);
                Matrix matrix = new Matrix();   //定义一个矩阵对象来旋转字符
                //沿参数中指定定随机旋转-30到30度之间的角度
                matrix.RotateAt(rnd.Next(-30,30),new Point(charSize/2-4,charSize-4));
                g1.Transform=matrix;
                //画单个字符,并把生成的图形画到验证码图形对象上
                g1.DrawString(codes[i].ToString(),font,brush,0,0);
                g.DrawImage(bmp1,charSize/2+charSize*i,(imgHeight-charSize)/2);
                g1.Dispose();
            }
//在前景上添加噪点
            for(int i = 0;i<250;i++) {
                int x = rnd.Next(imgWidth), y = rnd.Next(imgHeight);
                bmp.SetPixel(x,y,Color.FromArgb(rnd.Next()));
            }
            //画验证码的边框
            g.DrawRectangle(new Pen(Color.Black),0,0,imgWidth-1,imgHeight-1);
//将图形对象写入内存流,并返回内存流的字节数组
            MemoryStream ms = new MemoryStream();
            bmp.Save(ms,ImageFormat.Jpeg);
            g.Dispose();bmp.Dispose();
            return ms.ToArray();
        }
    }
}

2.控制器代码

using System.Web.Mvc;
using XLZXXX.Common;

namespace XLZXXX.Controllers {
    public class LoginController : Controller{
        public ActionResult Index(){
            return View();
        }
        //返回验证码图形内容,提供给视图img控件显示
        public FileResult GetVerificationCode() {
            return new FileContentResult(VerificationCode.GetCodeImage(),"image/jpeg");
        }
        //验证输入的验证码是否正确
        //通过读取生成验证码时写入的Session对象的值与从视图中获取的输入值进行比较
        public string CheckVerificationCode(string code) {
            string sessionCode = Session["VerificationCode"]==null ? "" : Session["VerificationCode"].ToString();
            if(sessionCode==code)
                return "验证码正确。";
            else
                return "验证码错误,请重新输入。";
        }
    }
}

3.视图代码

@{Layout = null;}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MVC中生成图形验证码并验证(详细)</title>
    <script src="~/Scripts/jquery.min.js"></script>
    <script>
        $(function() {
            $("#img").click(function() {
                //src属性值后加参数是为了避免浏览器的缓存机制
                $(this).prop("src","/Login/GetVerificationCode?t="+new Date().getTime());
            });
            $("#btnCheck").click(function () {
                $.ajax({
                    url: "/Login/CheckVerificationCode",
                    type: "post",
                    data: { code: $("#txtCode").val() },    //参数名code要和控制器CheckVerificationCode的参数名相同
                    success: function (data) {
                        alert(data);
                        $("#img").click();  //刷新验证码
                    }
                });
            });
        });
    </script>
</head>
<body>
    <p><img src="/Login/GetVerificationCode" id="img" />点击图片验证码可以刷新</p>
    <p><input type="text" id="txtCode" /> <input type="button" id="btnCheck" value="验证" /></p>
</body>
</html>

 

以上是关于MVC中生成图形验证码并验证(详细)的主要内容,如果未能解决你的问题,请参考以下文章

MVC中生成图形验证码并验证(详细)

MVC中生成图形验证码并验证(详细)

MVC中生成图形验证码并验证(详细)

MVC中生成图形验证码并验证(详细)

如何在 Zend Framework 中生成用于重置密码的随机密码或临时 URL?

selenium基础-图形验证码