滑動驗證碼，利用圖片的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