关于滑动验证码
程序员文章站
2022-05-13 15:00:20
...
滑动验证码，利用图片的X,Y坐标来实现类似于腾讯的滑动验证。
首先前台调用后台接口，获取Y坐标，及裁剪的小图，混淆拼接的图片。X坐标保存到数据库。
/// <summary>
/// 返回验证码json
/// </summary>
public string GetVerificationCode()
{
Random rd = new Random();
_PositionX = rd.Next(_MinRangeX, _MaxRangeX);//设置X坐标
_PositionY = rd.Next(_MinRangeY, _MaxRangeY);//设置Y坐标
string Id = SetSql.Add(_PositionX.ToString());//X坐标插入数据库(Y坐标给前台)
int[] a = { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 };
int[] array = a.OrderBy(x => Guid.NewGuid()).ToArray();
Bitmap bmp = new Bitmap(path + (new Random()).Next(0, _ImgNum - 1) + ".jpg");
string ls_small = "data:image/jpg;base64," + ImgToBase64String(cutImage(bmp, _shearSize, _shearSize, _PositionX, _PositionY));
Bitmap lb_normal = GetNewBitMap(bmp, _shearSize, _shearSize, _PositionX, _PositionY);
string ls_confusion = "data:image/jpg;base64," + ImgToBase64String(ConfusionImage(array, lb_normal));
JObject jObject = new JObject();
jObject["errcode"] = 0;
jObject["y"] = _PositionY;//Y坐标
jObject["array"] = string.Join(",", array);//
jObject["imgx"] = _ImgWidth;//图片宽
jObject["imgy"] = _ImgHeight;//图片高
jObject["small"] = ls_small;//裁剪的小图
jObject["normal"] = ls_confusion;//裁剪小图后的原图
jObject["Id"] = Id;
/* errcode: 状态值 成功为0
* y:裁剪图片y轴位置
* small：小图字符串
* normal：剪切小图后的原图并按无序数组重新排列后的图
* array：无序数组
* imgx：原图宽
* imgy：原图高
*/
return jObject.ToString();
}
/// <summary>
/// 获取裁剪的小图
/// </summary>
/// <param name="sFromBmp">原图</param>
/// <param name="cutWidth">剪切宽度</param>
/// <param name="cutHeight">剪切高度</param>
/// <param name="x">X轴剪切位置</param>
/// <param name="y">Y轴剪切位置</param>
private Bitmap cutImage(Bitmap sFromBmp, int cutWidth, int cutHeight, int x, int y)
{
//载入底图
Image fromImage = sFromBmp;
//先初始化一个位图对象，来存储截取后的图像
Bitmap bmpDest = new Bitmap(cutWidth, cutHeight, System.Drawing.Imaging.PixelFormat.Format32bppRgb);
//这个矩形定义了，你将要在被截取的图像上要截取的图像区域的左顶点位置和截取的大小
Rectangle rectSource = new Rectangle(x, y, cutWidth, cutHeight);
//这个矩形定义了，你将要把 截取的图像区域 绘制到初始化的位图的位置和大小
//我的定义，说明，我将把截取的区域，从位图左顶点开始绘制，绘制截取的区域原来大小
Rectangle rectDest = new Rectangle(0, 0, cutWidth, cutHeight);
//第一个参数就是加载你要截取的图像对象，第二个和第三个参数及如上所说定义截取和绘制图像过程中的相关属性，第四个属性定义了属性值所使用的度量单位
Graphics g = Graphics.FromImage(bmpDest);
g.DrawImage(fromImage, rectDest, rectSource, GraphicsUnit.Pixel);
g.Dispose();
return bmpDest;
}
/// <summary>
/// 获取裁剪小图后的原图
/// </summary>
/// <param name="sFromBmp">原图</param>
/// <param name="cutWidth">剪切宽度</param>
/// <param name="cutHeight">剪切高度</param>
/// <param name="spaceX">X轴剪切位置</param>
/// <param name="spaceY">Y轴剪切位置</param>
public Bitmap GetNewBitMap(Bitmap sFromBmp, int cutWidth, int cutHeight, int spaceX, int spaceY)
{
// 加载原图片
Bitmap oldBmp = sFromBmp;
// 绑定画板
Graphics grap = Graphics.FromImage(oldBmp);
// 加载水印图片
Bitmap bt = new Bitmap(cutWidth, cutHeight);
Graphics g1 = Graphics.FromImage(bt); //创建b1的Graphics
g1.FillRectangle(Brushes.Black, new Rectangle(0, 0, cutWidth, cutHeight)); //把b1涂成红色
bt = PTransparentAdjust(bt, 120);
// 添加水印
grap.DrawImage(bt, spaceX, spaceY, cutWidth, cutHeight);
grap.Dispose();
g1.Dispose();
return oldBmp;
}
/// <summary>
/// 获取混淆拼接的图片
/// </summary>
/// <param name="a">无序数组</param>
/// <param name="bmp">剪切小图后的原图</param>
public Bitmap ConfusionImage(int[] a, Bitmap cutbmp)
{
Bitmap[] bmp = new Bitmap[20];
for (int i = 0; i < 20; i++)
{
int x, y;
x = a[i] > 9 ? (a[i] - 10) * _CutX : a[i] * _CutX;
y = a[i] > 9 ? _CutY : 0;
bmp[i] = cutImage(cutbmp, _CutX, _CutY, x, y);
}
Bitmap Img = new Bitmap(_ImgWidth, _ImgHeight); //创建一张空白图片
Graphics g = Graphics.FromImage(Img); //从空白图片创建一个Graphics
for (int i = 0; i < 20; i++)
{
//把图片指定坐标位置并画到空白图片上面
g.DrawImage(bmp[i], new Point(i > 9 ? (i - 10) * _CutX : i * _CutX, i > 9 ? _CutY : 0));
}
g.Dispose();
return Img;
}然后前台返回X坐标，滑动过程特性，来判断是否成功。
/// <summary>
/// 校验前端是否通过验证
/// </summary>
public void CheckCode(HttpContext context)
{
context.Response.ContentType = "text/plain";
string ls_point = context.Request["point"];//完成时x轴对于左上角位置位置
string datelist = context.Request["datelist"];//滑动过程特征
string timespan = context.Request["timespan"];//耗时
string Id = context.Request["Id"];//ID编号，验证X坐标
string[] result = SetSql.Seach(Id).Split(',');//获取X坐标和错误次数
string code = result[0];
string code_errornum = result[1];
string token = result[2];
if (code == null)
{ WriteError(context, "发生错误"); return; }
if (string.IsNullOrEmpty(ls_point))
{ WriteError(context, "未获取到坐标值"); return; }
int li_old_point = 0, li_now_point = 0;
try { li_old_point = int.Parse(code); }
catch { WriteError(context, "发生错误-1"); return; }
try { li_now_point = int.Parse(ls_point); }
catch { WriteError(context, "获取到的坐标值不正确"); return; }
//错误
if (Math.Abs(li_old_point - li_now_point) > _deviationPx)
{
int li_count = 0;
try
{
li_count = int.Parse(code_errornum);
}
catch { li_count = 0; }
SetSql.AddErrorCount(Id);//增加错误次数
if (li_count > _MaxErrorNum)
{
//超过最大错误次数后不再校验
SetSql.Delete(Id,"false");
//HttpContext.Current.Session["code"] = null;
Write(context, "{\"state\":-1,\"msg\":" + li_count + "}"); return;
}
//返回错误次数
Write(context, "{\"state\":-1,\"msg\":" + li_count + "}"); return;
}
if (SlideFeature(datelist))
{
//机器人??
}
//校验成功 返回正确坐标
//HttpContext.Current.Session["isCheck"] = "OK";
//HttpContext.Current.Session["code_errornum"] = null;
//HttpContext.Current.Session["code"] = null;
SetSql.Delete(Id,"true");
Write(context, "{\"state\":0,\"info\":\"正确\",\"data\":" + li_old_point + ",\"token\":\""+token+"\"}");
}本项目基于GitHub源码修改
源地址：https://github.com/eatage/VerificationCode