隐藏

.net core webapi+vue实现登录图片验证码功能

发布:2022/6/2 20:22:07作者:管理员 来源:本站 浏览次数:1148

生成图像文件类(添加NuGet包:ZKWeb.System.Drawing)
using System;
using System.DrawingCore;
using System.DrawingCore.Imaging;
using System.IO;
 
namespace Security
{
    public static class VierificationCodeServices
    {
        /// <summary> 
        /// 该方法用于生成指定位数的随机数 
        /// </summary> 
        /// <param name="VcodeNum">参数是随机数的位数</param> 
        /// <returns>返回一个随机数字符串</returns> 
        private static string RndNum(int VcodeNum)
        {
            //验证码可以显示的字符集合 
            string Vchar = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,p" +
                ",q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,P,P,Q" +
                ",R,S,T,U,V,W,X,Y,Z";
            string[] VcArray = Vchar.Split(new Char[] { ',' });//拆分成数组  
            string code = "";//产生的随机数 
            int temp = -1;//记录上次随机数值,尽量避避免生产几个一样的随机数 
 
            Random rand = new Random();
            //采用一个简单的算法以保证生成随机数的不同 
            for (int i = 1; i < VcodeNum + 1; i++)
            {
                if (temp != -1)
                {
                    rand = new Random(i * temp * unchecked((int)DateTime.Now.Ticks));//初始化随机类 
                }
                int t = rand.Next(61);//获取随机数 
                if (temp != -1 && temp == t)
                {
                    return RndNum(VcodeNum);//如果获取的随机数重复,则递归调用 
                }
                temp = t;//把本次产生的随机数记录起来 
                code += VcArray[t];//随机数的位数加一 
            }
            return code;
        }
 
        /// <summary> 
        /// 该方法是将生成的随机数写入图像文件 
        /// </summary> 
        /// <param name="code">code是一个随机数</param>
        /// <param name="numbers">生成位数(默认4位)</param> 
        public static MemoryStream Create(out string code, int numbers = 4)
        {
            code = RndNum(numbers);
            Bitmap Img = null;
            Graphics g = null;
            MemoryStream ms = null;
            Random random = new Random();
            //验证码颜色集合 
            Color[] c = { Color.Black, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };
 
            //验证码字体集合
            string[] fonts = { "Verdana", "Microsoft Sans Serif", "Comic Sans MS", "Arial", "宋体" };            //定义图像的大小,生成图像的实例 
            Img = new Bitmap((int)code.Length * 18, 32);
 
            g = Graphics.FromImage(Img);//从Img对象生成新的Graphics对象   
 
            g.Clear(Color.White);//背景设为白色 
 
            //在随机位置画背景点 
            for (int i = 0; i < 100; i++)
            {
                int x = random.Next(Img.Width);
                int y = random.Next(Img.Height);
                g.DrawRectangle(new Pen(Color.LightGray, 0), x, y, 1, 1);
            }
            //验证码绘制在g中 
            for (int i = 0; i < code.Length; i++)
            {
                int cindex = random.Next(7);//随机颜色索引值 
                int findex = random.Next(5);//随机字体索引值 
                Font f = new Font(fonts[findex], 15, FontStyle.Bold);//字体 
                Brush b = new SolidBrush(c[cindex]);//颜色 
                int ii = 4;
                if ((i + 1) % 2 == 0)//控制验证码不在同一高度 
                {
                    ii = 2;
                }
                g.DrawString(code.Substring(i, 1), f, b, 3 + (i * 12), ii);//绘制一个验证字符 
            }
            ms = new MemoryStream();//生成内存流对象 
            Img.Save(ms, ImageFormat.Jpeg);//将此图像以Png图像文件的格式保存到流中 
 
            //回收资源 
            g.Dispose();
            Img.Dispose();
            return ms;
        }
    }
 
}


controller(添加NuGet包:Microsoft.AspNetCore.Session)(谷歌浏览器跨域需要设置用户客户端,不建议使用session存储方案)

using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Cors;
using Security;
 
namespace Back
{
    [Route("back/[controller]/[action]"), EnableCors("AllowAnyOrigin")]
    public class LoginController : Controller
    {
        /// <summary>
        /// 后台登入系统
        /// </summary>
        [HttpGet]
        public async Task<IActionResult> Login(string pPhone, string pPassword, string code)
        {
            string loginValidateCode = HttpContext.Session.GetString("LoginValidateCode");
            if (string.IsNullOrEmpty(code))
            {
                return BadRequest("请填写验证码");
            }
            if (code.ToLower() != loginValidateCode.ToLower())
            {
                return BadRequest("验证码错误");
            }
            return Ok();
        }
 
        /// <summary>
        /// 图形验证码
        /// </summary>
        [HttpGet]
        public IActionResult ValidateCode()
        {
            string code = "";
            System.IO.MemoryStream ms = VierificationCodeServices.Create(out code);
            HttpContext.Session.SetString("LoginValidateCode", code);
            return File(ms.ToArray(), @"image/png");
        }
 
    }
}


Startup

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
 
    //添加session
    services.AddSession();
    //添加跨域访问
    services.AddCors(options =>
    options.AddPolicy("AllowAnyOrigin",
        builder => builder.WithOrigins("*").AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin().AllowCredentials()));
 
}
 
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
 
    //使用Session,必须在UseMvc之上
    app.UseSession();
    app.UseMvc();
    //使用静态文件
    app.UseStaticFiles();
}


vue

<img :src="codeUrl+'/Login/ValidateCode'" alt="看不清?点击更换" onclick="this.src = this.src + '?'" />
 
//axios配置
//webapi和vue不同域,由于同源策略,需配置以下代码
axios.defaults.withCredentials=true;