ASP.NET MVC实现图片验证码的功能
本帖最后由 Naylor 于 2017-6-14 15:37 编辑一、首先：
本文的关键代码源自CSDN博客，原文链接：http://blog.csdn.net/wupd2014/article/details/53232448
图片验证码是一个Web项目不可或缺的功能，该博主封装的代码也很好理解，特借用过来。
效果图：
二、项目结构及关键代码：
1：publicclass文件夹是一个项目公共类文件夹，里面的生成验证码的代码如下：
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.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;
}
//写入Session用于验证码校验，可以对校验码进行加密，提高安全性
System.Web.HttpContext.Current.Session["verifyCode"] = chkCode;
//创建画布
Bitmap bmp = new Bitmap(codeW, codeH-3);
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;
g.DrawLine(new Pen(clr), x1, y1, x2, y2);
}
//画验证码
for (int i = 0; i < chkCode.Length; i++)
{
string fnt = font;
Font ft = new Font(fnt, fontSize);
Color clr = color;
g.DrawString(chkCode.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 ex)
{
return null;
}
finally
{
g.Dispose();
bmp.Dispose();
ms.Dispose();
}
}
2：控制器层代码：IdentifyingCode方法返回一个视图，CreateVerifyCode方法调用VerifyCode类中的GetVerifyCode方法获取byte数组（即图片），CheckVerifyCode方法验证用户输入的代码是否是验证码，供前台页面表单提交时候调用。关键代码如下：
public ActionResult IdentifyingCode()
{
return View();
}
public ActionResult CreateVerifyCode()
{
VerifyCode vc = new PublicClass.VerifyCode();
byte[] result = vc.GetVerifyCode();
return File(result, "image/jpeg jpeg jpg jpe");
}
public string CheckVerifyCode(string thecode)
{
string result = "";
string sessioncode = Session["verifyCode"].ToString();
string thecodeX = thecode.ToLower();
string sessioncodeX = sessioncode.ToLower();
if (thecodeX == sessioncodeX)
{
result = "ok";
}
else
{
result = "no";
}
return result;
}
3：视图层代码：img标签的src属性初始给“/Demo/CreateVerifyCode”，用于获取验证码图片，在图片的点击事件中，改变当前图片的src属性，让其重新去从服务器获取图片，在提交按钮的点击事件中获取用户输入的代码传递到后台作验证。关键代码如下：
@{
ViewBag.Title = "";
Layout = "~/Views/Shared/_Layoutcml.cshtml";
}
<h2>.NET MVC验证码</h2>
<img src="/Demo/CreateVerifyCode" id="verifycode" alt="验证码获取失败" title="验证码" style="border:1px solid black;" />
<input type="text" value="" id="inputcode" />
<br />
<input type="button" value="提交" id="ok" />
<script>
$(function () {
$("#ok").click(function (e) {
debugger
var thecode = $("#inputcode").val();
$.ajax({
url: "/Demo/CheckVerifyCode",
type: "Get",
data: { thecode: thecode },
success: function (data) {
if (data == "ok") {
alert("验证码输入正确。");
} else {
alert("验证码输入错误。");
}
},
error: function () { }
})
})
$("#verifycode").click(function (e) {
debugger
//TODO:这里，可在客户端作一个简单过滤，防止客户端恶意请求服务器。当然，最好的操作方式是在服务器端也做这个操作
this.src = "/Demo/CreateVerifyCode/" + Math.floor(Math.random() * 10000);
})
})
</script>
三、释及注意点：
感谢分享，先收藏了········ 感谢分享，先收藏了········ 看不懂，心累 574261766 发表于 2017-6-17 22:54
看不懂，心累
额哪里看不懂？ 额 还是挺实用的 不错 Mark一下。感谢分享 mvc学习，路由是比较难理解的 马克一下，厉害了大佬 不错，，，学习了。。。。。。。
页:
[1]
2