因工作中验证码有漏洞,需要进行改造。百度了很多,然后不是这个问题就那个问题,
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();