生成验证码图片

生成验证码图片

开发工具与关键技术：Visual Studio 2015
作者：徐晶旗
撰写时间：2019年4月19日 

我们在登陆某个系统时除了要输入账号和密码之外，还通常要涉及到验证码。那验证
码有什么作用呢？接下来就来简单的介绍一下验证码。
首先验证码是于服务端生成，发送给客户端，并以图像格式显示，所以验证码也是一
张图片，验证码的全称是”全自动区分电脑和人类的图灵测试”,就是由机器向操作者提问,
从而鉴别操作者是人还是机器的一种测试, 也是电脑执行某些程序的指令,验证码的主要
作用是拦截不合格的入侵, 让我们登陆更加安全。目前，不少网站为了防止用户利用机
器人自动注册、登陆、灌水，都采用了验证码技术，由此可以看出验证码的重要性，那
验证码是怎么做出来的呢？

接下来我们就来做一个验证码，先到控制器中给出一个名称,用来生成验证码.。

public ActionResult CreateValidCodeImage()

首先验证码是一张图片,是一张有着随机字母数字的图片,验证码一般是由数字,字母大小写构成,先给这个生成验证码添加一个公共类, 里面写两个方法。

一、 随机创建一个验证码的长度。

 public static string GetRandomCode(int intLength)
        {
            /*产生数字和密码混合的随机数*/
            string strReturn = string.Empty;
   Random random = new Random();//随机数

二、 把创建出来的字符串转换成一张图片。

 public static byte[] CreateImage(string strRandom)
    {
        //新增图片
        Bitmap newBitmap = new Bitmap(strRandom.Length * 20, 38);

        Graphics g = Graphics.FromImage(newBitmap);
        g.Clear(Color.White);

然后到控制器中声明一个变量，到新建的公共类中调用随机生成验证码的具体方法,下面在这里生成的验证码长度为4,说明这个验证码有四个字符。注：这个验证码的长度可以随机变动，你输入的数字是几在这里就能生成几位数的验证码。然后根据生成的验证码字符串生成验证码图片，接下来也是到公共类中调用方法把生成的字符串生成验证码图片，然后把数据存入session中，再到控制器中把图片返回到页面中，这样运行的时候这个验证码就是一张图片了。

 public ActionResult CreateValidCodeImage()
     {
        //1、生成长度为4的随机的验证码字符串 
        string strRandom = ValidCodeUtils.GetRandomCode(4);
        //2、根据生成的验证码字符串生成 验证码图片
        byte[] imgByte = ValidCodeUtils.CreateImage(strRandom);
        //3、将验证码字符串存入session中 key值为
        Session["validCode"] = strRandom;
        //4、把图片返回到视图（文件内容，文件格式）；
        return File(imgByte, @"image/jpeg");
    }

再到登陆页面找到验证码所在位置，用div嵌套一个image图片，在这个image中放入验证码，因为在控制器中已经调用好了方法，所以直接在视图中用src把这个方法链接过去，然后到控制器中找到视图的名称放在src后面，再把要执行的方法复制到这个视图名称的后面。然后设置它的宽高。

<img src="/Main/CreateValidCodeImage" width="100" height="38" id="validCodeImg" />

运行看下效果。

为了验证GetRandomCode这个方法后面的数字是几就能生成几位数的验证码,到这里我就来更换一下数字实验一下,然后我想生成六位数的验证码,看能不能实现这个效果。

string strRandom = ValidCodeUtils.GetRandomCode(6);

这是运行之后的效果图

看，是不是六位数字的验证码就出现了，但是一般验证码会是一张动态图，点击它会更新字母数字，就是验证码图片上的字符会任意切换，而它在这里只是一张静态图，只有一张初始图片，点击它并不会发生任何改变。
所以要到页面去控制它触发单击事件，使点击一下就运行一下方法，重新更换一张图片，接下来要到登陆页面绑定数据，先要引入一下jquery中的插件。

<script src="~/plugins/jquery-3.2.1.min.js"></script>

然后定义一个页面载入事件，通过id选择器获取到验证码图片，用click触发它的单击事件，要使它点击一下就执行一下就要用到function这个函数，再用src链接这个视图名称和控制器中绑定图片方法的名称就可以获取到图片了，然后建一个日期对象new Date来控制图片的刷新，这样点击一下就会刷新一下，验证码上的字符就重新生成一份了。
下面是js代码

$(function () {
             $("#validCodeImg").click(function () {
                 $(this).prop("src", "/Main/CreateValidCodeImage?t=" + new Date().getTime());
             });
         });
    </script>