在登录页面中增加图片验证码

应用场景：项目微信端登录使用手机号+短信验证码，输入手机号后调用获取短信验证码接口，虽然增加了同一IP60s内只能获取一次验证码，但还是免不了被恶意攻击，攻击者产生不同的IP后通过手机号调用接口频繁获取短信验证码，故在调用接口之前增加图片验证码进行验证。（说明：发送短信调用阿里的短信接口，所以出现了经济损失。。。）

html代码如下：

<img id="checkImg" alt="验证码" src="ValidateCode.ashx"  onclick="RefreshCode(this)" style="float: left;cursor:pointer;" title="点击刷新验证码"/>

Js代码如下：

function RefreshCode(obj) {
$(obj).attr("src", "ValidateCode.ashx?temp=" + Math.random());
}

ValidateCode.ashx后台代码如下：

public void ProcessRequest(HttpContext hc)
{
int intLength = 5;               //长度
string strIdentify = "CodeKey"; //存储键值
//设置输出流图片格式
hc.Response.ContentType = "image/gif";

Bitmap b = new Bitmap(90, 40);
Graphics g = Graphics.FromImage(b);
g.FillRectangle(new SolidBrush(Color.CadetBlue), 0, 0, 90, 40);
Font font = new Font(FontFamily.GenericSerif, 20, FontStyle.Bold, GraphicsUnit.Pixel);
Random r = new Random();
//合法随机显示字符列表
string strLetters = "1234567890";//abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
StringBuilder s = new StringBuilder();

//将随机生成的字符串绘制到图片上
for (int i = 0; i < intLength; i++)
{
s.Append(strLetters.Substring(r.Next(0, strLetters.Length - 1), 1));
g.DrawString(s[s.Length - 1].ToString(), font, new SolidBrush(Color.White), i * 18, r.Next(0, 15));
}
//生成干扰线条
Pen pen = new Pen(new SolidBrush(Color.LightGray), 2);
for (int i = 0; i < 1; i++)
{
g.DrawLine(pen, new Point(r.Next(0, 90), r.Next(0, 40)), new Point(r.Next(0, 90), r.Next(0, 40)));
}
b.Save(hc.Response.OutputStream, ImageFormat.Gif);
hc.Session[strIdentify] = s.ToString(); //先保存在Session中，验证与用户输入是否一致
hc.Response.End();
}

最终效果图如下：