1.验证码图片生成类
/// <summary>
/// 生成验证码图片类
/// </summary>
public class VerifyCodeHelper
{
public static Bitmap CreateVerifyCode(out string code)
{
//建立Bitmap对象，绘图
Bitmap bitmap = new Bitmap(200, 60);
Graphics graph = Graphics.FromImage(bitmap);
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();
string letters = "ABCDEFGHIJKLMNPQRSTUVWXYZ0123456789";
StringBuilder sb = new StringBuilder();
//添加随机的五个字母
for (int x = 0; x < 5; x++)
{
string letter = letters.Substring(r.Next(0, letters.Length - 1), 1);
sb.Append(letter);
graph.DrawString(letter, font, new SolidBrush(Color.Black), x * 38, r.Next(0, 15));
}
code = sb.ToString();
//混淆背景
Pen linePen = new Pen(new SolidBrush(Color.Black), 2);
for (int x = 0; x < 6; x++)
graph.DrawLine(linePen, new Point(r.Next(0, 199), r.Next(0, 59)), new Point(r.Next(0, 199), r.Next(0, 59)));
return bitmap;
}
}
使用上述类时需要添加相关引用
2.后台controller的提供验证码图片的action方法
/// <summary>
/// 提供验证码
/// </summary>
/// <returns></returns>
public ActionResult VerifyCode()
{
string verifyCode = string.Empty;
Bitmap bitmap = VerifyCodeHelper.CreateVerifyCode(out verifyCode);
#region 缓存Key
Cache cache = new Cache();
// 先用当前类的全名称拼接上字符串 “verifyCode” 作为缓存的key
var verifyCodeKey = $"{this.GetType().FullName}_verifyCode";
cache.Remove(verifyCodeKey);
cache.Insert(verifyCodeKey, verifyCode);
#endregion
MemoryStream memory = new MemoryStream();
bitmap.Save(memory, ImageFormat.Gif);
return File(memory.ToArray(), "image/gif");
}
这里使用了cache来存储验证码的值以便在登录方法中与用户输入的验证码做对比，cache可以在缓存，它可以在用户登录方法中将相应的值取出来
关于cache的特性及用法可以参考https://www.cnblogs.com/lonelyxmas/p/10780917.html
3.后台处理登录请求的action方法(验证码比对)
public ActionResult Login(string verifyCode)
{
// 第一步检验验证码
// 从缓存获取验证码作为校验基准
// 先用当前类的全名称拼接上字符串 “verifyCode” 作为缓存的key
Cache cache = new Cache();
var verifyCodeKey = $"{this.GetType().FullName}_verifyCode";
object cacheobj = cache.Get(verifyCodeKey);
if (cacheobj == null)
{
return Json(new
{
Success = false,
Message = "验证码已失效"
});
}//不区分大小写比较验证码是否正确
else if (!(cacheobj.ToString().Equals(verifyCode, StringComparison.CurrentCultureIgnoreCase)))
{
return Json(new
{
Success = false,
Message = "验证码错误"
});
}
cache.Remove(verifyCodeKey);
//...接下来再进行账号密码比对等登录操作
}
4.前端cshtml相关代码（注意要有对应的action返回view与其对应）
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
</head>
<body>
<div>
<img id="verifycode" style="height: 36px;
width: 108px;
margin-left: -15px;
margin-top: -8px;
cursor: pointer;" src="@Url.Action("VerifyCode")" />
</div>
</body>
</html>
生成的验证码图片示例如下:
