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

csharp

浏览数:1,075

2019-1-8

AD:资源代下载服务

片段 1片段 2片段 3片段 4片段 5片段 6


生成图像文件类(添加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;


linux环境(不支持docker部署)

https://github.com/zkweb-framework/zkweb.system.drawing

     yum install autoconf automake libtool

     yum install freetype-devel fontconfig libXft-devel

     yum install libjpeg-turbo-devel libpng-devel giflib-devel libtiff-devel libexif-devel

     yum install glib2-devel cairo-devel

     git clone https://github.com/mono/libgdiplus (如果没有安装git命令 执行yum install git 安装)

     cd libgdiplus

     ./autogen.sh

     make

     make install

     cd /usr/lib64/

     ln -s /usr/local/lib/libgdiplus.so gdiplus.dll


linux添加字体

//复制字体文件到目录:/usr/share/fonts

 mkfontscale(如果提示 mkfontscale: command not found,需自行安装 # yum install mkfontscale )

 mkfontdir

 fc-cache -fv(如果提示 fc-cache: command not found,则需要安装# yum install fontconfig )