随机验证码功能实现

为什么要有验证码呢:一定程度上防止机器登录,爬虫读取数据,恶意注册等
我们也可以使用开源的图片验证码LazyCaptcha和开源的滑动验证码LazySlideCaptcha

如果没有验证码 通过浏览器F12打开检查器,截取到后台的请求后,可以通过模拟Ajax请求实现自动登录,就不用手动输入了

后端实现
Tools工具类
C#
public class Tools
{
    public static string CreateValidateString()
    {
        //准备一组供验证码展示的数据
        string chars = "adbcadjas;dasjflkhaflajpoahr";
        Random random = new(DateTime.Now.Millisecond);
        string validateString = "";
        int length = 4;
        for (int i = 0; i < length; i++)
        {
            validateString += chars[random.Next(chars.Length)];
        }
        return validateString;
    }
    public static Byte[] CreteValidataCodeBuffer(string validateCode)
    {
        //bmp->位图
        //1.创建画布,设置画布的长宽
        using Bitmap bitmap = new(200,60);
        //2.创建画笔,告诉画笔在哪个画布上画画
        Graphics graphics = Graphics.FromImage(bitmap);
        //用白色覆盖画布,并清除画布上所有的内容
        graphics.Clear(Color.White);
        //设置字体的参数(设置字体的名称、大小、粗细以及斜体)
        Font font = new("微软雅黑", 12, FontStyle.Bold | FontStyle.Italic);
        //通过graphics.MeasureString方法计算字符串长度
        var Size = graphics.MeasureString(validateCode, font);
        //通过长度生成新的画布
        //1.98 Convert.ToInt32(1.98) = 1
        //向上取整:天花板函数,向下取整:地板函数
        using Bitmap bitmaptext = new(Convert.ToInt32(Math.Ceiling(Size.Width)), Convert.ToInt32(Math.Ceiling(Size.Height)));
        //将文字写入,生成图片
        Graphics graphicstext = Graphics.FromImage(bitmaptext);
        //把图片缩放到原画布上
        //配置画图参数
        //设置颜色刷范围参数
        RectangleF rf = new(0,0,bitmap.Width,bitmap.Height);
        //设置刷子的颜色(设置为渐变)
        LinearGradientBrush brush = new(rf,Color.Red,Color.DarkBlue,1.2f,true);
        //将字符串绘制到场景中
        graphicstext.DrawString(validateCode, font, brush, 0, 0);
        graphics.DrawImage(bitmaptext, 10, 10, 190, 50);
        //将图片放到缓冲区中
        //创建一个用于保存图片的缓冲器
        MemoryStream memoryStream = new();
        //把图片保存到缓冲区
        bitmap.Save(memoryStream, ImageFormat.Jpeg);
        //图片已经放在缓冲区了,bitmap对象没有用了,释放资源
        bitmap.Dispose();
        return memoryStream.ToArray();
    }
}
MemoryHelper
C#
public class MemoryHelper
 {
     private static IMemoryCache _memoryCache;
     static MemoryHelper()
     {
         if (_memoryCache == null)
         {
             _memoryCache = new MemoryCache(new MemoryCacheOptions());
         }
     }
     public static void SetMemory(string key,object value,int expireMins)
     {
         _memoryCache.Set(key,value,TimeSpan.FromMinutes(expireMins));
     }
     public static object GetMemory(string key)
     {
         return _memoryCache.Get(key);
     }
 }
Controller
C#
 //验证码
    [HttpGet]
    public IActionResult GetValidateCodeImage(string code)
    {
        Console.WriteLine(code);
        var validateCodeString = Tools.CreateValidateString();
        //将验证码记入缓存中
        MemoryHelper.SetMemory(code, validateCodeString,1);
        //接受图片返回的二进制流
        byte[] buffer = Tools.CreteValidataCodeBuffer(validateCodeString);
        return File(buffer, @"image/jpeg");
    }
效果图
前端刷新
HTML
HTML
<img src = "validateCodeRef" alt = "" @click = "changeValidateCode"/>
Vue+JavaScript
JavaScript
import{validateCodeRefchangeValidateCode} from ""
const validateCode = "localhost:port/url"
onMounted(() =>{
 validateCodeRef.value = validateCode+"?t="+getGuid(); //获取随机标识符
});
getValidate
JavaScript
const validateCode = "localhost:port/url"
export const validateCodeRef = ref();
export const changeValidateCode = () =>{
   validateCodeRef.value = validateCode+"?t="+getGuid();
};
订阅评论
提醒
0 评论
最旧
最新 最多投票
内联反馈
查看所有评论
滚动至顶部