泰剧你是我的眼睛,艾买提·亚库甫,赛尔号雷伊在哪打
本次和大家分享的是一个集成1：小写拼音 2：大写拼音 3：数字 4：汉字的验证码生成类，从标题来看感觉很普通的样子，没错的确很普通，只是这个验证码类生成的时候可以通过参数指定验证码返回格式的规则，更主要的是希望能给大家带来一定的实用性，本章例子也会有一个mvc使用验证码校验的场景，希望大家能够喜欢。
» 验证码生成流程图
» 验证码生成池代码的解析
» 把验证代码画到图片上
» mvc登录操作测试验证码正确性
下面一步一个脚印的来分享：
» 验证码生成流程图
首先，咋们来看一下本次分享的验证码生成类的生成流程图：
能看到此图描述的编码生成池对应的是几个不同的编码内容，这里主要根据参数设置允许同时获取不同编码内容，从而到达文字，拼音，汉字组合而成验证码，具体规则设置由参数而定；
» 验证码生成池代码的解析
首先，由上面流程图分析的内容能看出，这个验证码生成池子需要并行获取不同类型验证码数据，才能满足组合的验证码，因此有了下面的代码：
我要评论
/// <summary>
/// 创建验证码
/// </summary>
/// <param name="codetype">1：小写拼音 2：大写拼音 3：数字 4：汉字</param>
/// <returns></returns>
public static string createcode(string codetype = "1|2|3|4")
{
var code = string.empty;
try
{
if (string.isnullorwhitespace(codetype) || codetype.indexof('|') < 0) { codetype = "1|2|3|4"; }
var codetypearr = codetype.split(new char[] { '|' }, stringsplitoptions.removeemptyentries);
var strlen = codetypearr.length;
//任务
task<string>[] taskarr = new task<string>[strlen];
for (int i = 0; i < strlen; i++)
{
var val = codetypearr[i];
switch (val)
{
case "1": //小写拼音
taskarr[i] = task.factory.startnew<string>(() => { return getpinyinorupper(false); });
break;
case "2": //大写拼音
taskarr[i] = task.factory.startnew<string>(() => { return getpinyinorupper(); });
break;
case "3": //数字
taskarr[i] = task.factory.startnew<string>(() => { return getshuzi(); });
break;
case "4": //汉字
taskarr[i] = task.factory.startnew<string>(() => { return gethanzi(); });
break;
default:
break;
}
}
//等待完成 30s
task.waitall(taskarr, timespan.fromseconds(30));
foreach (var item in taskarr)
{
code += item.result;
}
}
catch (exception ex)
{
code = "我爱祖国";
}
return code;
}
这里继续使用了关键字task，来分发任务获取不同的验证码内容，个人认为最主要的还是通过参数设置 string codetype = "1|2|3|4" ，来确定验证码的组合方式，这样也达到了验证码格式的多样性；
» 把验证代码画到图片上
首先，咋们要明确的是要吧文字画在某个图片上，那么需要用到graphics关键字，以此来创建画布把咋们的验证编码画到图片上，这里先上代码：
/// <summary>
/// 生成验证码图片流
/// </summary>
/// <param name="code">验证码文字</param>
/// <returns>流</returns>
public static byte[] createvalidatecodestream(string code = "我爱祖国", int fontsize = 18, int width = 0, int height = 0, string fontfamily = "华文楷体")
{
var bb = new byte[0];
//初始化画布
var padding = 2;
var len = code.length;
width = width <= 0 ? fontsize * 2 * (len - 1) + padding * 4 : width;
height = height <= 0 ? fontsize * 2 : height;
var image = new bitmap(width, height);
var g = graphics.fromimage(image);
try
{
var random = new random();
//清空背景色
g.clear(color.white);
//画横向中间干扰线
var x1 = 0;
var y1 = height / 2;
var x2 = width;
var y2 = y1;
g.drawline(new pen(color.darkred), x1, y1, x2, y2);
//字体
var font = new font(fontfamily, fontsize, (fontstyle.bold | fontstyle.italic));
var brush = new lineargradientbrush(new rectangle(0, 0, image.width, image.height),
color.blue, color.darkred, 1f, true);
//画文字
var stringfomart = new stringformat();
//垂直居中
stringfomart.linealignment = stringalignment.center;
//水平居中
stringfomart.alignment = stringalignment.center;
var rf = new rectangle(point.empty, new size(width, height));
g.drawstring(code, font, brush, rf, stringfomart);
//画图片的前景干扰点
for (int i = 0; i < 100; i++)
{
var x = random.next(image.width);
var y = random.next(image.height);
image.setpixel(x, y, color.fromargb(random.next()));
}
//画图片的边框线
g.drawrectangle(new pen(color.silver), 0, 0, image.width - 1, image.height - 1);
//保存图片流
var stream = new memorystream();
image.save(stream, imageformat.jpeg);
//输出图片流
bb = stream.toarray();
}
catch (exception ex) { }
finally
{
g.dispose();
image.dispose();
}
return bb;
}
这个列出画验证码图片方法的关键点：
1. 图片的高和宽度需要设置，这个根据不同页面布局方式而定，所以这里吧高和宽用作参数传递
2. 干扰线：通常验证码图片都以一两条干扰线，主要防止某些恶意用户使用图片识别软件进行不正规破解请求，我这里干扰线只设置了横向居中的一天直线代码如： g.drawline(new pen(color.darkred), x1, y1, x2, y2);
3. 字体：一个好看的字体通常也一种用户体验，因此这里根据需要参数传递字体；
4. 验证代码位于图片纵横向居中，这里的关键代码是：
var stringfomart = new stringformat(); //垂直居中 stringfomart.linealignment = stringalignment.center; //水平居中 stringfomart.alignment = stringalignment.center;
5. g.drawstring(code, font, brush, rf, stringfomart); 主要用来把文字画到图片上，这是最关键的地方
6. 咋们通常都是吧验证码弄成图片流，而不是真的生成一个实体的验证码图片保存到服务器上，不然这样服务器很快就会磁盘不足，所以
//保存图片流 var stream = new memorystream(); image.save(stream, imageformat.jpeg); //输出图片流 bb = stream.toarray();
这句的重要性也不可忽视，主要就把画的内容保存到流中方便使用
7. 最后千万不用忘了使用dispose释放画布
» mvc登录操作测试验证码正确性
有了上面验证码生成类生成好的验证码图片，那么我们还需要测试验证下正确性和效果；下面我们使用mvc架构来做测试，先创建一个验证码测试action并生成对应试图validcode.cshtml文件，然后自定义几个不同格式的验证码获取action，代码如下：
public fileresult getvalidatecode()
{
//返回的验证码文字
var code = string.empty;
var bb_code = validatecode.getvalidatecodestream(ref code);
return file(bb_code, "image/jpeg");
}
public fileresult getvalidatecode01()
{
var code = string.empty;
var bb_code = validatecode.getvalidatecodestream(ref code, "1|2|3|4");
return file(bb_code, "image/jpeg");
}
public fileresult getvalidatecode02()
{
var code = string.empty;
var bb_code = validatecode.getvalidatecodestream(ref code, "4|3|2|1");
return file(bb_code, "image/jpeg");
}
public fileresult getvalidatecode03()
{
var code = string.empty;
var bb_code = validatecode.getvalidatecodestream(ref code, "2|2|2|2");
return file(bb_code, "image/jpeg");
}
public fileresult getvalidatecode04()
{
var code = string.empty;
var bb_code = validatecode.getvalidatecodestream(ref code, "4|4|4|4");
return file(bb_code, "image/jpeg");
}
public fileresult getvalidatecode05()
{
var code = string.empty;
var bb_code = validatecode.getvalidatecodestream(ref code, "1|1|1|1");
return file(bb_code, "image/jpeg");
}
感觉上几乎一模一样，只是对应的参数不一样，这里遵循的方法getvalidatecodestream参数codetype格式是：为空表示自由组合 1：小写拼音 2：大写拼音 3：数字 4：汉字；然后我们往试图中填写如下代码：
<h2>神牛 - 验证码实例</h2> <div class="container " id="appvue"> <table class="table table-bordered text-left"> <tbody> <tr> <td>全部随机</td> <td> <img src="/home/getvalidatecode" data-src="/home/getvalidatecode" id="imgcode" /> <input type="text" name="code" placeholder="请输入验证码" class="form-control" /> <button class="btn btn-default">登 录</button> <span id="msg" style="color:red"></span> </td> </tr> <tr> <td>小写|大写|数字|汉字</td> <td><img src="/home/getvalidatecode01" data-src="/home/getvalidatecode01" /></td> </tr> <tr> <td>汉字|数字|大写|小写</td> <td><img src="/home/getvalidatecode02" data-src="/home/getvalidatecode02" /></td> </tr> <tr> <td>全部大写</td> <td><img src="/home/getvalidatecode03" data-src="/home/getvalidatecode03" /></td> </tr> <tr> <td>全部汉字</td> <td><img src="/home/getvalidatecode04" data-src="/home/getvalidatecode04" /></td> </tr> <tr> <td>全部小写</td> <td><img src="/home/getvalidatecode05" data-src="/home/getvalidatecode05" /></td> </tr> </tbody> </table> </div>
好了咋们生成下项目，看下效果图如下：
能从图中看到我们验证码格式的不同之处，这也是文章开头说的验证码格式的多样性，当然可能还有其他组成格式请允许我暂时忽略，下面我们来做一个点击图片获取新验证码的功能和点击登录按钮去后台程序判断验证码是否匹配的例子，先来修改试图界面代码如下：
@{
viewbag.title = "validtcode";
}
<h2>神牛 - 验证码实例</h2>
<div class="container " id="appvue">
<table class="table table-bordered text-left">
<tbody>
<tr>
<td>全部随机</td>
<td>
<img src="/home/getvalidatecode" data-src="/home/getvalidatecode" id="imgcode" />
<input type="text" name="code" placeholder="请输入验证码" class="form-control" />
<button class="btn btn-default">登 录</button>
<span id="msg" style="color:red"></span>
</td>
</tr>
<tr>
<td>小写|大写|数字|汉字</td>
<td><img src="/home/getvalidatecode01" data-src="/home/getvalidatecode01" /></td>
</tr>
<tr>
<td>汉字|数字|大写|小写</td>
<td><img src="/home/getvalidatecode02" data-src="/home/getvalidatecode02" /></td>
</tr>
<tr>
<td>全部大写</td>
<td><img src="/home/getvalidatecode03" data-src="/home/getvalidatecode03" /></td>
</tr>
<tr>
<td>全部汉字</td>
<td><img src="/home/getvalidatecode04" data-src="/home/getvalidatecode04" /></td>
</tr>
<tr>
<td>全部小写</td>
<td><img src="/home/getvalidatecode05" data-src="/home/getvalidatecode05" /></td>
</tr>
</tbody>
</table>
</div>
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("img").on("click", function () {
var nowtime = new date().gettime();
var src = $(this).attr("data-src") + "?t=" + nowtime;
if (src.length <= 0) { return; }
$(this).attr("src", src);
});
$("button").on("click", function () {
var msg = $("#msg");
var code = $("input[name='code']").val();
if (code.length <= 0) { msg.html("请输入验证码！"); return; }
$.post("/home/userlogin", { code: code }, function (result) {
if (result) {
msg.html(result.msg);
if (!result.isok) {
$("#imgcode").click();
}
}
});
})
})
</script>
然后在controller中增加如下登录验证代码：
public jsonresult userlogin(string code)
{
var data = new stage.com.extend.stagemodel.modata();
if (string.isnullorwhitespace(code)) { data.msg = "验证码不能为空"; return json(data); }
var comparecode = session["code"];
if (!comparecode.equals(code)) { data.msg = "验证码错误"; return json(data); }
data.isok = true;
data.msg = "验证码验证成功";
return json(data);
}
public fileresult getvalidatecode()
{
//返回的验证码文字
var code = string.empty;
var bb_code = validatecode.getvalidatecodestream(ref code);
var key = "code";
if (session[key] != null)
{
session.remove(key);
}
session[key] = code;
return file(bb_code, "image/jpeg");
}
由于我这里无法截动态图，所点击测试获取验证码我这里直接给出线上的一个例子，各位可以试试：，点击获取新验证码的关键代码是： $(this).attr("src", src); 重新给img元素的scr赋值，不过这里要注意由于浏览器缓存的原因，这里赋值的时候需要加上一个动态参数，我这里是使用时间作为请求参数，因此有了以下的代码： $(this).attr("data-src") + "?t=" + nowtime; 这是特别的地方需要注意；好了咋们来直接测试登陆是否能从后端判断验证码是否正确匹配吧，这里用的是session来保存获取验证码图片返回的验证代码，然后在登陆时候判断用户数据的验证码是否和后台session的验证一样：
验证失败：
验证成功：
好了测试用例就这么多，如果您觉得我这个验证码生成例子还可以并且您希望使用那么请注意，参数的传递，不同得到的验证码格式不同，主要方法是：
/// <summary>
/// 获取验证码图片流
/// </summary>
/// <param name="codelen">验证码个数（codetype设置 > codelen设置）</param>
/// <param name="codetype">为空表示自由组合 1：小写拼音 2：大写拼音 3：数字 4：汉字</param>
/// <returns></returns>
public static byte[] getvalidatecodestream(ref string code, string codetype = "", int codelen = 0, int fontsize = 18, int width = 120, int height = 30)
{
//为空自由组合
if (string.isnullorwhitespace(codetype))
{
for (int i = 0; i < codelen; i++)
{
codetype += rm.next(1, 5) + "|";
}
}
code = createcode(codetype);
return createvalidatecodestream(code, fontsize, width: width, height: height);
}
具体参数各位可以看下备注，我这里顺便打包下代码，方便分享和使用：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论