工作记录：C# ashx生成验证码图片及校验

当前位置:

首页 > c#编程 >

工作记录：C# ashx生成验证码图片及校验

因工作中验证码有漏洞，需要进行改造。百度了很多，然后不是这个问题就那个问题，

1，验证码图片生成这里借鉴了https://blog.csdn.net/z10668107/article/details/103074267这个老哥的。ashx代码如下

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Imaging;
using System.Text;
using System.Web;

namespace YiSoft.Web.cn2016.mobile
{
    /// <summary>
    /// ImageCodeHandler 图片验证码
    /// </summary>
    public class ImageCodeHandler : IHttpHandler, System.Web.SessionState.IRequiresSessionState
    {

        public void ProcessRequest(HttpContext context)
        {
            bool isCreate = true;
            //创建时间初始化，在页面刷新的时候重新获得新的验证码
            context.Session["CreateTime"] = null;
            if (context.Session["CreateTime"] == null)
            {
                context.Session["CreateTime"] = DateTime.Now;
            }
            else
            {
                DateTime startTime = Convert.ToDateTime(context.Session["CreateTime"]);
                DateTime endTime = Convert.ToDateTime(DateTime.Now);
                TimeSpan ts = endTime - startTime;

                // 超时则获得新的验证码
                if (ts.Minutes > 15)
                {
                    isCreate = true;
                    context.Session["CreateTime"] = DateTime.Now;
                }
                else
                {
                    isCreate = false;
                }
            }
            context.Response.ContentType = "image/gif";
            //绘制图象
            Bitmap basemap = new Bitmap(200, 60);
            Graphics graph = Graphics.FromImage(basemap);
            graph.FillRectangle(new SolidBrush(Color.White), 0, 0, 200, 60);
            Font font = new Font(FontFamily.GenericSerif, 48, FontStyle.Bold, GraphicsUnit.Pixel);
            Random r = new Random();
            //会出现的字符，需要的可以加上字母 ：ABCDEFGHIJKLMNPQRSTUVWXYZabcdefghijklmnpqrstuvwxyz0123456789
            string letters = "0123456789";
            string letter;
            StringBuilder s = new StringBuilder();
            if (isCreate)
            {
                // 随机生成4个字母或者数字
                for (int x = 0; x < 4; x++)
                {
                    letter = letters.Substring(r.Next(0, letters.Length - 1), 1);
                    s.Append(letter);

                    // 绘制文字
                    graph.DrawString(letter, font, new SolidBrush(Color.Black), x * 38, r.Next(0, 15));
                }
            }
            else
            {
                // 创建失败则绘制先前存在的验证码
                string currentCode = context.Session["ValidateCode"].ToString();
                s.Append(currentCode);
                foreach (char item in currentCode)
                {
                    letter = item.ToString();
                    // 绘制文字
                    graph.DrawString(letter, font, new SolidBrush(Color.Black), currentCode.IndexOf(item) * 38, r.Next(0, 15));
                }
            }
            // 混淆背景
            Pen linePen = new Pen(new SolidBrush(Color.Black), 2);
            for (int x = 0; x < 10; x++)
            {
                graph.DrawLine(linePen, new Point(r.Next(0, 199), r.Next(0, 59)), new Point(r.Next(0, 199), r.Next(0, 59)));
            }
            // 保存图片
            basemap.Save(context.Response.OutputStream, ImageFormat.Gif);
            // 传递验证码的值
            context.Session["ValidateCode"] = s.ToString();
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

2，在html页面引用，我这里把图片存在另一个页面，因为点击图片要刷新验证码，为了不刷新整个页面。如果直接在页面引入的话刷新验证码整个页面都会刷新，不太友好，还有就是后台生成的验证码是存入session的，我这里不这样引入就不能保持session属于同一个会话。一定还有更好的解决方式。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../cn2019/css/purchase.css" />
    <link rel="stylesheet" href="../cn2019/css/footer.css" />
    <style>
        body{
            background:#fff
        }
        #form1 > div > input{
            height: 30px;
    width: 100px;
    float: right;
        }
    </style>
    <script>
    function relo() {
        location.reload();
    }
    </script>
</head>

<body>
    <div class="">
        <div class="main">
            <form id="form1" runat="server">
                <div>
                    <asp:ImageButton ID="img_validCode" ImageUrl="../cn2016/mobile/ImageCodeHandler.ashx" runat="server"/>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

3，在需要的页面加入

<iframe name="myFrame" style="width: 100px;height:30px;" src="../cn2019/yzm.html" frameborder="0"></iframe>

4，页面最终效果，点击数字就能刷新验证码

5，验证码在后台进行校验，如果验证码输入错误，在提示后调用：myFrame.window.relo()进行页面验证码刷新，myFrame是引入图片时自定义的一个name值，relo()是自定义的一个刷新当前页面方法，在yzm.html页面。调用失败请联系前端~~~

6，后台校验代码，从session取出验证码，接口使用session需要继承System.Web.UI.Page和 IReadOnlySessionState

String code = Session["ValidateCode"].ToString().ToLower();

记录一下平常遇到的问题及新的知识，方便以后查看

栏目列表