Angular + ABP前后端分离 登录验证码

1.后端

生成验证码

/// <summary>
        /// 自定义长度验证码（字母+数字）
        /// </summary>
        /// <param name="length">验证码长度</param>
        /// <returns></returns>
        private VerificationCodeDto GenerateCheckCode(int length=4)
        {
            int number;
            string RandomCode = string.Empty;
            Random r = new Random();
            for (int i = 0; i < length; i++)
            {
                number = r.Next();
                //字符从0~9, A~Z中随机产生,对应的ASCII码分别为48~57, 65~90 a-z 97~122
                number = number % 36;
                if (number < 10)
                    number += 48;
                else
                    number += 55;
                RandomCode += ((char)number).ToString();
            }

            var result = new VerificationCodeDto() { Id = Guid.NewGuid().ToString(), Code = RandomCode };
            //在缓存中中保存验证码1分钟有效使用UUID作为唯一标识
            _cacheManager.GetCache("VerificationCode").Set(result.Id, RandomCode,TimeSpan.FromMinutes(1));
            return result;
        }

生成图片验证码

/// <summary>
        /// 创建图片验证码
        /// </summary>
        public VerificationCodeImageDto CreateCheckCodeImage()
        {
            var result = new VerificationCodeImageDto();
            var codeInfo = GenerateCheckCode();
            //若验证码为空，则直接返回
            if (codeInfo.Code == null || codeInfo.Code.Trim() == string.Empty)
                return result;
            //根据验证码的长度确定输出图片的宽度
            int iWidth = (int)Math.Ceiling(codeInfo.Code.Length * 15m);
            int iHeight = 20;
            //创建图像
            Bitmap image = new Bitmap(iWidth, iHeight);
            //从图像获取一个绘图面
            Graphics g = Graphics.FromImage(image);

            try
            {
                Random r = new Random();
                //清空图片背景色
                g.Clear(Color.White);
                //画图片的背景噪音线10条
                for (int i = 0; i < 10; i++)
                {
                    int x1 = r.Next(image.Width);
                    int x2 = r.Next(image.Width);
                    int y1 = r.Next(image.Height);
                    int y2 = r.Next(image.Height);
                    //用银色画出噪音线
                    g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
                }
                //画图片的前景噪音点50个
                for (int i = 0; i < 50; i++)
                {
                    int x = r.Next(image.Width);
                    int y = r.Next(image.Height);
                    image.SetPixel(x, y, Color.FromArgb(r.Next()));
                }
                //画图片的框线
                g.DrawRectangle(new Pen(Color.SaddleBrown), 0, 0, image.Width - 1, image.Height - 1);
                //定义绘制文字的字体
                Font f = new Font("Arial", 12, (FontStyle.Bold | FontStyle.Italic));
                //线性渐变画刷
                System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.Purple, 1.2f, true);
                g.DrawString(codeInfo.Code, f, brush, 2, 2);
                //创建内存流用于输出图片
                using (System.IO.MemoryStream ms = new System.IO.MemoryStream())
                {
                    image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
                    byte[] arr = new byte[ms.Length];
                    ms.Position = 0;
                    ms.Read(arr, 0, (int)ms.Length);
                    ms.Close();
                    result.Id = codeInfo.Id;
                    result.ImageCode = Convert.ToBase64String(arr);
                    return result;
                }
            }
            finally
            {
                //释放Bitmap对象和Graphics对象
                g.Dispose();
                image.Dispose();
            }

        }

前端展示

纯验证码

 图片验证码

 效果：

后端校验

        /// <summary>
        /// 校验验证码
        /// </summary>
        /// <param name="info"></param>
        /// <returns></returns>
        public bool CheckVerificationCode(VerificationCodeDto info)
        {
           var code= _cacheManager.GetCache("VerificationCode").GetOrDefault(info.Id);
            if (code!=null)
            {
                if (code.ToString() == info.Code)
                {
                    return true;
                }
                else
                {
                    return false;
                }
            }
            else
            {
                throw new UserFriendlyException("验证码失效");
                //return false
            }
        }