前端登录页面Login.cshtml位于ShenNius.Admin.Mvc项目的Areas\Sys\Views\User内,页面中使用的验证码是调用同项目内UserController的OnGetVCode函数获取验证码图片。
点击验证码图片,会调用wwwroot\js\login.js定义的changeSrcCode函数刷新验证码。这里避免使用浏览器缓存的技巧是在调用函数后累加数字(之前学习的开源博客项目中是在调用函数后增加随机数)。
验证码生成类VerifyCode位于同项目内ShenNius.Mvc.Admin.Common命名空间下,支持创建验证码及相应图片。
验证码生成函数CreateRandomCode的逻辑比较简单,取新建Guid的前几位作为验证码。项目中固定取4位验证码。
验证码图片创建函数DrawImage采用GDI+创建图片。防机器识别的方式是增加背景噪点及旋转验证码文字。
背景噪点的生成思路是在图片区域随机位置绘制50个1X1的灰色矩形。旋转验证码文字的思路是从左到右逐个绘制验证码文字,对每个字符,采用随机字体、旋转角度、字体颜色绘制字符。
最终将图片以Gif形式保存并传递至登录页面。并在OnGetVCode函数中将验证码文本保存到Session中以备后用。
参考文献:
[1]https://gitee.com/shenniu_code_group/shen-nius.-modularity