ShenNiusModularity项目源码学习（2：登录页面验证码）

news2024/9/21 11:04:44

前端登录页面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中以备后用。
在这里插入图片描述