开源博客项目Blog中的后台管理登录界面中支持输入验证码(如下图所示),本文学习并记录项目中验证码的生成及调用方式。
博客项目中调用VerifyCode类生成验证码,该类位于App.Framwork项目中,命名空间为App.Framwork.Generate。VerifyCode类主要包括十几种参数设置,两种验证码生成方式(随机字符串,问题型)。主要参数设置如下所示:
序号 | 名称 | 类型 | 说明 |
---|---|---|---|
1 | SetLength | int | 主要用于随机字符串型的验证码,设置随机字符串的长度,默认值为4 |
2 | SetVerifyCodeText | string | 保存生成的验证码 |
3 | SetAddLowerLetter | bool | 设置验证码中是否包含小写字母,默认值为true |
4 | SetAddUpperLetter | bool | 设置验证码中是否包含大写字母,默认值为true |
5 | SetFontSize | int | 设置验证码的字体大小,用于生成验证码图片,默认值为18 |
6 | SetFontColor | Color | 设置验证码的字体颜色,用于生成验证码图片,默认值为蓝色 |
7 | SetFontFamily | string | 设置验证码的字体名称,用于生成验证码图片,默认值为Verdana |
8 | SetBackgroundColor | Color | 设置验证码图片的背景色,用于生成验证码图片,默认值为AliceBlue |
9 | SetIsBackgroundLine | bool | 设置验证码图片中是否包含线条,以便提升识别难度 |
10 | SetForeNoisePointCount | int | 设置验证码图片中的前景噪点数量,以便提升识别难度,默认值为2,但实际从代码来看增加的比设置的多 |
11 | SetRandomAngle | int | 设置验证码图片中单个字符的最大旋转角度,主要用于随机字符串型的验证码,默认值为40 |
12 | SetIsRandomColor | bool | 设置是否随机生成验证码的字体颜色,默认值为true,效果是每次生成的验证码图片中的字体颜色都是随机生成 |
13 | SetWith | int | 设置验证码图片的宽度 |
14 | SetHeight | int | 设置验证码图片的高度 |
15 | VerifyCodeResult | string | 保存问题型验证码的答案 |
随机字符串型验证码的生成函数为GetVerifyCodeText,其生成步骤如下:
1)创建字符池,首先加入1-9的数字,再根据设置分别加入大写字母和小写字母,这里特地将O和o去掉了,避免难以识别;
2)根据验证码长度,逐一从字符池中随机取字符,用后即弃(使用StringBuilder实现,用后直接移除指定位置的内容即可),最后返回完整的验证码字符串。
问题型验证码的生成函数为GetQuestion,其生成步骤如下:
1)如果提供有问答对集合(即函数输入参数questionList,默认为null),则从集合中随机抽取一组问答对并返回;
2)如果没有提供问答对集合,则随机生成100以内的加减乘除算式,并保存计算结果,然后返回算式和结果的问答对。
验证码图片的生成函数为GetVerifyCodeImage,其生成步骤如下:
1)创建空图片,图片高度大致为1.6倍字体大小,宽度为验证码长度倍字体大小,填充背景色;
2)增加前景噪点,噪点数量为图片宽度乘以SetForeNoisePointCount,绘制方式为将图片随机像素点位置的颜色换为字体颜色;
3)增加背景噪点,分为两部分,首先是噪点,数量为2倍图片宽度,绘制方式为在图片随机位置绘制宽和高均为1的矩形。接着按设置增加干扰线条,绘制方式是根据随机生成两侧坐标绘制线条;
4)从左向右逐个绘制验证码的字符,如果需要旋转字符,则随机生成旋转角度,旋转坐标后再绘制字符,最后返回图片内容
博客项目中LoginController类调用验证码生成类,该类位于App.Hosting项目中,命名空间为App.Hosting.Areas.Main.Controllers,具体调用函数为ValidateCode,函数返回验证码图片,并将验证码内容放在HttpContext.Session中返回,前端调用页码则是Index.cshtml。
从上面的分析可以看出,开源博客项目Blog中提供的验证码生成类相对独立,实现逻辑清晰易懂,扩展起来也比较方便,能够按需放在其它项目或程序中。
参考文献:
[1]https://gitee.com/miss_you/Blog
[2]https://www.donet5.com/Home/Doc