Asp.net Web Api實現(xiàn)圖片點擊式圖片驗證碼功能
現(xiàn)在驗證碼的形式越來越豐富,今天要實現(xiàn)的是在點擊圖片中的文字來進行校驗的驗證碼,如圖

這種驗證碼驗證是驗證鼠標是否選中了圖片中文字的位置,以及選擇的順序,產(chǎn)生驗證碼的時候可以提供一組底圖,然后隨機獲取一張圖片,隨機選取幾個字,然后把文字的順序打亂,分別隨機放到圖片的一個位置上,然后記錄文字的位置和順序,驗證的時候驗證一下文字的位置和順序即可
驗證碼圖片的類
/// <summary>
/// 二維碼圖片
/// </summary>
public class VerCodePic
{
/// <summary>
/// 圖片鏈接
/// </summary>
public string PicURL { get; set; }
/// <summary>
/// 第一個字位置
/// </summary>
public FontPoint Font1 { get; set; }
/// <summary>
/// 第二個字位置
/// </summary>
public FontPoint Font2 { get; set; }
/// <summary>
/// 第三個字位置
/// </summary>
public FontPoint Font3 { get; set; }
/// <summary>
/// 第四個字位置
/// </summary>
public FontPoint Font4 { get; set; }
}
/// <summary>
/// 文字位置
/// </summary>
public class FontPoint
{
public int X { get; set; }
public int Y { get; set; }
}
生成驗證碼圖片驗證碼的方法,在這個方法中指定了生成的驗證碼圖片中字體大小為20個像素,因為驗證碼底圖的大小是固定的,所以就把驗證碼底圖按照字體的大小分成了若干個網(wǎng)格位置,指定一個文字在圖片中的位置時只需要隨機獲取其中一個網(wǎng)格即可,如果這個網(wǎng)格中沒有指定過文字,那就把文字放到這個網(wǎng)格中。
提前設(shè)定網(wǎng)格的方法
private static ArrayList _FontPoint;
public static ArrayList FontPoint
{
get
{
if (_FontPoint==null)
{
_FontPoint = new ArrayList();
for (int x=0;x<10;x++)
{
for (int y=0;y<5;y++)
{
_FontPoint.Add(new Models.FontPoint() { X = x * 28, Y = y * 20 });
}
}
}
return _FontPoint;
}
}
我選定的驗證碼底圖為280*100的,所以按照上邊的方法將圖片分成了若干個網(wǎng)格,在下邊設(shè)定一個文字位置的時候隨機選取其中一個位置,而且給每個字都設(shè)定了不一樣的顏色
/// <summary>
/// 根據(jù)文字和圖片獲取驗證碼圖片
/// </summary>
/// <param name="content"></param>
/// <param name="picFileName"></param>
/// <returns></returns>
public static VerCodePic GetVerCodePic(string content,string picFileName,int fontSize=20)
{
ClassLoger.Info("FileHelper.GetVerCodePic","開始生成二維碼");
Bitmap bmp = new Bitmap(picFileName);
List<int> hlist = new List<int>();
VerCodePic codepic = new VerCodePic();
int i = Utils.GetRandom(0, SystemSet.FontPoint.Count - 1);
codepic.Font1 = SystemSet.FontPoint[i] as FontPoint;
hlist.Add(i);
A: int i2 = Utils.GetRandom(0, SystemSet.FontPoint.Count - 1);
if (hlist.Contains(i2))
goto A;
codepic.Font2 = SystemSet.FontPoint[i2] as FontPoint;
hlist.Add(i2);
B: int i3 = Utils.GetRandom(0, SystemSet.FontPoint.Count - 1);
if (hlist.Contains(i3))
goto B;
hlist.Add(i3);
codepic.Font3 = SystemSet.FontPoint[i3] as FontPoint;
C: int i4 = Utils.GetRandom(0, SystemSet.FontPoint.Count - 1);
if (hlist.Contains(i4))
goto C;
hlist.Add(i4);
codepic.Font4 = SystemSet.FontPoint[i4] as FontPoint;string fileName = (content + "-" + picFileName+"-"+i+"|"+i2+"|"+i3+"|"+i4).MD5()+Path.GetExtension(picFileName);
string dir = Path.Combine(SystemSet.ResourcesPath, SystemSet.VerCodePicPath);
string filePath = Path.Combine(dir, fileName);
if (File.Exists(filePath))
{
codepic.PicURL = string.Format("{0}/{1}/{2}", SystemSet.WebResourcesSite, SystemSet.VerCodePicPath, fileName);
return codepic;
}
if (!Directory.Exists(dir))
{
Directory.CreateDirectory(dir);
}
Graphics g = Graphics.FromImage(bmp);
Font font = new Font("微軟雅黑", fontSize, GraphicsUnit.Pixel);
SolidBrush sbrush = new SolidBrush(Color.Black);
SolidBrush sbrush1 = new SolidBrush(Color.Peru);
SolidBrush sbrush2 = new SolidBrush(Color.YellowGreen);
SolidBrush sbrush3 = new SolidBrush(Color.SkyBlue);
List<char> fontlist = content.ToList();
ClassLoger.Info("FileHelper.GetVerCodePic", fontlist.Count.ToString());
g.DrawString(fontlist[0].TryToString(), font, sbrush, new PointF(codepic.Font1.X, codepic.Font1.Y));
g.DrawString(fontlist[1].TryToString(), font, sbrush1, new PointF(codepic.Font2.X, codepic.Font2.Y));
g.DrawString(fontlist[2].TryToString(), font, sbrush2, new PointF(codepic.Font3.X, codepic.Font3.Y));
g.DrawString(fontlist[3].TryToString(), font, sbrush3, new PointF(codepic.Font4.X, codepic.Font4.Y));
bmp.Save(filePath, ImageFormat.Jpeg);
codepic.PicURL = string.Format("{0}/{1}/{2}",SystemSet.WebResourcesSite, SystemSet.VerCodePicPath, fileName);
return codepic;
}
獲取圖片驗證碼的api接口,在這個接口中從成語庫中隨機選取了一個成語,然后隨機選取了一個圖片,然后調(diào)用生成圖片驗證碼的方法,生成了圖片驗證碼,并且把驗證碼對應(yīng)的信息緩存在redis中,設(shè)定緩存時間,將redis的key作為一個臨時令牌隨同驗證碼返回
/// <summary>
/// 獲取驗證碼,有效時間10分鐘
/// </summary>
/// <returns></returns>
[HttpGet]
[Route("vercode")]
public JsonResult<VerCodePicViewModel> VerCodePic()
{
JsonResult<VerCodePicViewModel> result = new JsonResult<VerCodePicViewModel>();
result.code = 1;
result.msg = "OK";
try
{
ClassLoger.Info("VerCodePic","開始獲取成語");
cy_dictBll cybll = new cy_dictBll();
IList<cy_dict> cylist = cybll.GetAllcy_dict();
ClassLoger.Info("VerCodePic", cylist.Count.ToString());
int i = Utils.GetRandom(0, cylist.Count-1);
ClassLoger.Info("VerCodePic",i.ToString());
cy_dict cy = cylist[i];
ClassLoger.Info("VerCodePic成語:",cy.chengyu);
VerCodePicViewModel vcvm = new VerCodePicViewModel();
string sourcePic = FileHelper.GetVerCodePicResource();
if (sourcePic.IsNull() || !File.Exists(sourcePic))
{
sourcePic = @"E:\WebResources\images\VerCodePicSource\1.jpg";
}
ClassLoger.Info("VerCodePic圖片",sourcePic);
VerCodePic codepic = FileHelper.GetVerCodePic(cy.chengyu, sourcePic);
vcvm.content = cy.chengyu;
vcvm.MainPic = codepic.PicURL;
result.Result = vcvm;
string key = cookieKey();
RedisBase.Item_Set(key, codepic);
RedisBase.ExpireEntryAt(key,DateTime.Now.AddMinutes(10));
result.ResultMsg = key;
} catch (Exception ex)
{
ClassLoger.Error("AccountController.VerCodePic",ex);
result.code = -1;
result.msg = "AccountController.VerCodePic發(fā)生異常:"+ex.Message;
}
return result;
}
效果如圖:

圖片驗證碼校驗接口參數(shù)結(jié)構(gòu)
public class CheckPicCodeViewModel
{
/// <summary>
/// 客戶端令牌
/// </summary>
public string token { get; set; }
public double x1 { get; set; }
public double x2 { get; set; }
public double x3 { get; set; }
public double x4 { get; set; }
public double y1 { get; set; }
public double y2 { get; set; }
public double y3 { get; set; }
public double y4 { get; set; }
}
驗證碼校驗接口
/// <summary>
/// 校驗圖片驗證碼是否正確
/// </summary>
/// <param name="piccode"></param>
/// <returns></returns>
[HttpPost]
[Route("checkpiccode")]
public async Task<IHttpActionResult> CheckPicCode([FromBody]CheckPicCodeViewModel piccode)
{
JsonResult<bool> result = new JsonResult<bool>();
result.code = 1;
result.msg = "OK";
if (piccode == null)
{
result.Result = false;
result.ResultMsg = "參數(shù)錯誤";
return Ok(result);
}
if (string.IsNullOrEmpty(piccode.token) || !RedisBase.ContainsKey(piccode.token))
{
result.Result = false;
result.ResultMsg = "驗證碼已過期";
return Ok(result);
}
result.Result = await Task.Run<bool>(() => {
bool flag = false;
VerCodePic codepic = RedisBase.Item_Get<VerCodePic>(piccode.token);
if (Math.Abs(codepic.Font1.X - piccode.x1) > 0.5 || Math.Abs(codepic.Font1.Y - piccode.y1) > 0.5
|| Math.Abs(codepic.Font2.X - piccode.x2) > 0.5 || Math.Abs(codepic.Font2.Y - piccode.y2) > 0.5
|| Math.Abs(codepic.Font3.X - piccode.x3) > 0.5 || Math.Abs(codepic.Font3.Y - piccode.y3) > 0.5
|| Math.Abs(codepic.Font4.X - piccode.x4) > 0.5 || Math.Abs(codepic.Font4.Y - piccode.y4) > 0.5)
{
flag = false;
result.ResultMsg = "驗證碼錯誤";
}
else
{
flag = true;
result.ResultMsg = "驗證碼正確";
}
return flag;
});
return Ok(result);
}
傳入用戶選中的位置和順序,并對其進行驗證。
以上所述是小編給大家介紹的Asp.net Web Api實現(xiàn)圖片點擊式圖片驗證碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
獲取遠程網(wǎng)頁的內(nèi)容之一(downmoon原創(chuàng))
獲取遠程網(wǎng)頁的內(nèi)容之一(downmoon原創(chuàng))...2007-03-03
asp.net GridView 刪除時彈出確認對話框(包括內(nèi)容提示)
GridView 刪除時彈出確認對話框(包括內(nèi)容提示)2009-12-12
c# .net在WEB頁中的COOKIES設(shè)置技巧
c# .net在WEB頁中的COOKIES設(shè)置技巧,需要的朋友可以參考下。2011-07-07
ASP.NET Core 配置和使用環(huán)境變量的實現(xiàn)
這篇文章主要介紹了ASP.NET Core 配置和使用環(huán)境變量的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
ASP.NET:一段比較經(jīng)典的多線程學(xué)習(xí)代碼
ASP.NET:一段比較經(jīng)典的多線程學(xué)習(xí)代碼...2006-09-09
在asp.net(c#)下實現(xiàn)調(diào)用cmd的方法
通常情況下我們會用到調(diào)用cmd.exe來實現(xiàn)一些命令,例如 ping ,等等2012-01-01
靈活掌握asp.net中g(shù)ridview控件的多種使用方法(下)
這篇文章繼續(xù)向大家推薦如何靈活掌握asp.net中g(shù)ridview控件的多種使用方法,感興趣的小伙伴們可以參考一下2015-11-11

