仿QQ注册验证码的实现。

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

最近发现一些网站的验证码全部换成了“极验”和“点触”的，发现QQ的注册也是与“点触”的相似。就想尝试实现一个。

先上效果图：

下面贴上主要思路及代码：

第一步：得到常用汉字列表

public static List<string> GetChineseWordList()
{
string cacheKey = "VCode_ChineseWordList";
return cache.GetCacheByFuc_NoRemove<List<string>>(cacheKey, new CacheFunc(delegate()
{
var list = new List<byte>();
for (int area = ; area <= ; area++)
{
for (int place2 = (area == ) ? : , place = ; place <= place2; place++)
{
list.Add((byte)(area + 0xa0));
list.Add((byte)(place + 0xa0));
}
}
string words = Encoding.GetEncoding("GB2312").GetString(list.ToArray());
return words.Select(m => m.ToString()).ToList();
}));
}

第二步：获取随机背景图片列表

public static List<string> GetBackGroundImageList(string imageDir)
{
string cacheKey = "VCode_BackGroundImageList";
return cache.GetCacheByFuc_NoRemove<List<string>>(cacheKey, new CacheFunc(delegate()
{
List<string> list = new List<string>(); DirectoryInfo theFolder = new DirectoryInfo(imageDir);
FileInfo[] fileInfo = theFolder.GetFiles();
foreach (FileInfo file in fileInfo)
{
list.Add(file.FullName);
}
return list;
}));
}

第三步：获取随机汉字列表

public static List<string> GetRandChineseWordList(List<string> chineseWordList, int length)
{
List<string> list = new List<string>();
for (var i = ; i < length; i++)
{
Random rnd = new Random((i + ) * unchecked((int)DateTime.Now.Ticks));
int index = rnd.Next(, chineseWordList.Count());
list.Add(chineseWordList[index]);
}
return list;
}

第四步：生成汉字水印并返回需要验证的字符及位置信息

public static List<WordPos> DrawWord(Graphics picture, Bitmap bmp, List<string> randWordList, Random rnd)
{
picture.CompositingQuality = CompositingQuality.HighQuality;
picture.SmoothingMode = SmoothingMode.AntiAlias; StringFormat format = StringFormat.GenericDefault; List<WordPos> wordPosList = new List<WordPos>(); //需要副本
List<Point> areaPointList = Utils.GetAreaPointList().Select(m => m).ToList();
List<Point> verAreaPointList = Utils.GetVerAreaPointList(); List<int> fontSizeList = Utils.GetFontSizeList(Config.FontSize);
List<Color> fontColorList = Utils.GetFontColorList(Config.FontColor);
List<string> fontFamilyList = Utils.GetFontFamilyList(Config.FontFamily);
List<int> verifyLengthList = Utils.GetVerifyLengthList(Config.VerifyLength);
List<string> tipFontFamilyList = Utils.GetTipFontFamilyList(Config.TipFontFamily);
List<Color> tipFontColorList = Utils.GetTipFontColorList(Config.TipFontColor); var verifyLengthIndex = rnd.Next(, verifyLengthList.Count); for (int i = ; i < randWordList.Count; i++)
{
int sizeIndex = rnd.Next(, fontSizeList.Count);
int colorIndex = rnd.Next(, fontColorList.Count);
int familyIndex = rnd.Next(, fontFamilyList.Count);
int areaPointIndex = rnd.Next(, areaPointList.Count); Font font = new Font(fontFamilyList[familyIndex], fontSizeList[sizeIndex], FontStyle.Bold, GraphicsUnit.Pixel);
SizeF sizef = picture.MeasureString(randWordList[i], font); Point point = areaPointList[areaPointIndex];
areaPointList.RemoveAt(areaPointIndex); Rectangle rect = new Rectangle(point.X, point.Y, (int)sizef.Width, (int)sizef.Height); using (GraphicsPath path = GetStringPath(randWordList[i], rect, font, format))
{ RectangleF off = rect;
off.Offset(, );//阴影偏移
using (GraphicsPath offPath = GetStringPath(randWordList[i], off, font, format))
{
Brush b = new SolidBrush(Color.White);
picture.FillPath(b, offPath);
b.Dispose();
} SolidBrush semiTransBrush = new SolidBrush(fontColorList[colorIndex]);
picture.DrawPath(Pens.WhiteSmoke, path);//绘制轮廓（描边）
picture.FillPath(semiTransBrush, path);//填充轮廓（填充）
}
wordPosList.Add(new WordPos()
{
Word = randWordList[i],
X = point.X,
Y = point.Y,
Width = sizef.Width,
Height = sizef.Height
});
} //输出需要验证的字
List<WordPos> verWordList = wordPosList.Take(verifyLengthList[verifyLengthIndex]).ToList();
for (int i = ; i < verAreaPointList.Count && i < verWordList.Count; i++)
{
int colorIndex = rnd.Next(, tipFontColorList.Count);
int tipFamilyIndex = rnd.Next(, tipFontFamilyList.Count); Font font = new Font(tipFontFamilyList[tipFamilyIndex], Config.TipFontSize, FontStyle.Bold, GraphicsUnit.Pixel);
SizeF sizef = picture.MeasureString(randWordList[i], font); Point point = verAreaPointList[i];
Rectangle rect = new Rectangle(point.X, point.Y, (int)sizef.Width, (int)sizef.Height); var color = tipFontColorList[colorIndex];
using (GraphicsPath path = GetStringPath(randWordList[i], rect, font, format))
{
SolidBrush semiTransBrush = new SolidBrush(color);
if ((color.R + color.G + color.B) > )
{
picture.DrawPath(Pens.Black, path);
}
else
{
picture.DrawPath(Pens.White, path);
}
picture.FillPath(semiTransBrush, path);
}
}
return verWordList;
} private static GraphicsPath GetStringPath(string s, RectangleF rect, Font font, StringFormat format)
{
GraphicsPath path = new GraphicsPath();
path.AddString(s, font.FontFamily, (int)font.Style, font.Size, rect, format); return path;
}

其中需要注意的是，汉字的水印位置，我的作法是将背景图片先划分成X个区域，然后画一个区域，将其排除掉。

第五步：生成图片

public void Create()
{
_httpContext.Response.CacheControl = "no-cache";
_httpContext.Session["VCode_ISValidate"] = false; List<string> chineseWordList = Utils.GetChineseWordList();
List<string> backGroundImageList = Utils.GetBackGroundImageList(_httpContext.Server.MapPath(Config.BackGroundImageDir)); var randWordList = Utils.GetRandChineseWordList(chineseWordList, Config.RandLength); Random rnd = new Random(unchecked((int)DateTime.Now.Ticks));
var imgIndex = rnd.Next(, backGroundImageList.Count); string imagePath = backGroundImageList[imgIndex];
using (Image img = Image.FromFile(imagePath))
{
using (Graphics g = Graphics.FromImage(img))
{
using (Bitmap bmp = new Bitmap(imagePath))
{
List<WordPos> verWordList = Utils.DrawWord(g, bmp, randWordList, rnd);
_httpContext.Session["VCode_Word"] = verWordList;
}
MemoryStream ms = new MemoryStream();
img.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
_httpContext.Response.ClearContent();
_httpContext.Response.ContentType = "image/Jpeg";
_httpContext.Response.BinaryWrite(ms.ToArray());
}
}
}

最后，验证环节

JS来获取到相应的位置坐标传到后端后，通过比较相应的两点距离在一定范围内则算通过。

public bool Validate(dynamic pos)
{
bool isValidate = false;
_httpContext.Session["VCode_ISValidate"] = false;
if (pos.Length > && _httpContext.Session["VCode_Word"] != null)
{
bool isNotMath = false;
List<WordPos> verWordList = (List<WordPos>)_httpContext.Session["VCode_Word"];
_httpContext.Session["VCode_ISValidate"] = true;
_httpContext.Session["VCode_Word"] = null; if (pos.Length == verWordList.Count)
{
for (int i = ; i < pos.Length; i++)
{
var _posLeft = Convert.ToInt32(pos[i]["left"]) + / ;
var _posTop = Convert.ToInt32(pos[i]["top"]) + / ;
Point _posCenter = new Point(_posLeft, _posTop); var _ckLeft = Convert.ToInt32(verWordList[i].X + verWordList[i].Width / );
var _ckTop = Convert.ToInt32(verWordList[i].Y + verWordList[i].Height / ); Point _ckPosCenter = new Point(_ckLeft, _ckTop); if (Utils.GetDistance(_posCenter, _ckPosCenter) > )
{
isNotMath = true;
break;
}
}
if (isNotMath == false)
{
isValidate = true;
}
}
}
return isValidate;
}