html5访问webapi带用户验证码,.net core webapi+vue实现登录图片验证码功能

生成图像文件类(添加NuGet包：ZKWeb.System.Drawing)

using System;

using System.DrawingCore;

using System.DrawingCore.Imaging;

using System.IO;

namespace Security

{

public static class VierificationCodeServices

{

///

/// 该方法用于生成指定位数的随机数

///

/// 参数是随机数的位数

/// 返回一个随机数字符串

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;

}

///

/// 该方法是将生成的随机数写入图像文件

///

/// code是一个随机数

/// 生成位数(默认4位)

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

{

///

/// 后台登入系统

///

[HttpGet]

public async Task 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();

}

///

/// 图形验证码

///

[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

//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 )