在应用软件中,登陆系统我们往往会用到验证码技术,下面将介绍在MVC中用到的验证码技术。
1.前端代码段及前端效果图如下
<div class="row">
<input id="txt_code" maxlength="4" type="text" placeholder="验证码" style=" 190px; float: left;">
<div style=" 110px; float: right; padding-top: 14px; padding-left: 14px;">
看不清?<a id="switchCode" href="javascript:void();" style="text-decoration: none;">换一张</a>
<img id="imgcode" class="authcode" src="~/Login/GetAuthCode" width="80" height="25" />
</div>
</div>
当验证码看不清楚时,我们点击换一张来进行验证码的替换,js代码如下:
$("#switchCode").click(function () { $("#imgcode").attr("src", "/Login/GetAuthCode?time=" + Math.random()); });
2.服务端
我们需要引入程序集:using System.Web.Mvc;
前端调用代码如下:
[HttpGet] public ActionResult GetAuthCode() { return File(new VerifyCode().GetVerifyCode(), @"image/Gif"); }
具体实现类如下:
public class VerifyCode { public byte[] GetVerifyCode() { int codeW = 80; int codeH = 30; int fontSize = 16; string chkCode = string.Empty; //颜色列表,用于验证码、噪线、噪点 Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.Brown, Color.DarkBlue }; //字体列表,用于验证码 string[] font = { "Times New Roman" }; //验证码的字符集,去掉了一些容易混淆的字符 char[] character = { '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'd', 'e', 'f', 'h', 'k', 'm', 'n', 'r', 'x', 'y', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y' }; Random rnd = new Random(); //生成验证码字符串 for (int i = 0; i < 4; i++) { chkCode += character[rnd.Next(character.Length)]; } //写入Session、验证码加密 WebHelper.WriteSession("nfine_session_verifycode", Md5.md5(chkCode.ToLower(), 16)); //创建画布 Bitmap bmp = new Bitmap(codeW, codeH); Graphics g = Graphics.FromImage(bmp); g.Clear(Color.White); //画噪线 for (int i = 0; i < 3; i++) { int x1 = rnd.Next(codeW); int y1 = rnd.Next(codeH); int x2 = rnd.Next(codeW); int y2 = rnd.Next(codeH); Color clr = color[rnd.Next(color.Length)]; g.DrawLine(new Pen(clr), x1, y1, x2, y2); } //画验证码字符串 for (int i = 0; i < chkCode.Length; i++) { string fnt = font[rnd.Next(font.Length)]; Font ft = new Font(fnt, fontSize); Color clr = color[rnd.Next(color.Length)]; g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18, (float)0); } //将验证码图片写入内存流,并将其以 "image/Png" 格式输出 MemoryStream ms = new MemoryStream(); try { bmp.Save(ms, ImageFormat.Png); return ms.ToArray(); } catch (Exception) { return null; } finally { g.Dispose(); bmp.Dispose(); } } }
通过上述代码,一个简单的验证码就可以实现了。