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

为什么80%的码农都做不了架构师？>>>   

应用场景：项目微信端登录使用手机号+短信验证码，输入手机号后调用获取短信验证码接口，虽然增加了同一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();
}

最终效果图如下：

转载于:https://my.oschina.net/jokeny/blog/1579449