Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use asp.net to achieve point-to-point CAPTCHA. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Put up the effect picture first

If you are attracted by this effect, please keep watching.

Here are some ideas before posting the code:

1. It is necessary to have a Chinese character library and classify it according to its shape. (I am classified by the head of the Security Ministry in the database.)

two。 Get the CAPTCHA (that is, take a few words as CAPTCHA)

3. Find the near words according to the words taken out.

4. Arrange CAPTCHA text and near words

5. Draw a picture

6. Display

First, get the font

Our culture is broad and profound, where do so many spicy words come from? Of course, it was impossible for me to add it manually, so I randomly found a website that could look up Chinese characters on the Internet to capture other people's data. For the method of grasping data, please click the transfer gate. What is said in the portal is just a train of thought, if there is anything you don't understand, please ask me. I will share my font below.

Second, obtain the verification code

This is relatively simple here I will directly paste the code, the following code is randomly sorted to take 4 pieces of data, I write this for convenience. Personally, I think that first randomly generate ID, and then directly according to the ID data, so that the query speed will be faster than the following way of writing. (note that the database I am using is MySql.)

/ public List GetCodeText () {const string sql = "SELECT * FROM wenzhi ORDER BY RAND () LIMIT 4"; var dataReader = dbHelper.GetDataReader (sql); var list = DataReaderToList (dataReader); dataReader.Close (); return list;}

Third, according to the words taken out to find the shape of near words

Because I saved the radical in the first step, so here I get the near word of the current radical directly according to the radical.

/ get the answer alternative / radical code / / current text ID / quantity / public List GetAnswer (string buShouCode, int id,int number=1) {string sql = $"SELECT * FROM wenzhi where BuShouCode=' {buShouCode} 'and ID {id} ORDER BY RAND () LIMIT" + number; var dataReader = dbHelper.GetDataReader (sql); var list = DataReaderToList (dataReader); dataReader.Close (); return list;}

four。 Arrange CAPTCHA text and near words

The following code first puts the alternative answers and CAPTCHA in a set, and then sorts the set

Public Model.Code GetCode () {var wenzlist = _ wenZhiDal.GetCodeText (); / / get the CAPTCHA var listAnsuwr = new List (); / / instantiate the alternative answer object var answerCode = string.Empty;// answer var result = new Model.Code {Id = Guid.NewGuid (). ToString ()} / / get the alternative answer according to the CAPTCHA and add the answer to the alternative answer collection foreach (var item in wenzlist) {answerCode + = item.ID + ","; result.AnswerValue + = item.Text; var answerList = _ wenZhiDal.GetAnswer (item.BuShouCode, item.ID); listAnsuwr.Add (new Answer {Id = item.ID.ToString (), Img = GetImage (item.Text)}) ListAnsuwr.AddRange (answerList.Select (answer = > new Answer {Id = answer.ID.ToString (), Img = GetImage (answer.Text)}));} / / if there are not enough answers, fetch a few more if (listAnsuwr.Count)

< 9) { var ran = new Random(); var randKey = ran.Next(0, 4); var item = wenzlist[randKey]; var answerList = _wenZhiDal.GetAnswer(item.BuShouCode, item.ID, 9 - listAnsuwr.Count); listAnsuwr.AddRange(answerList.Select(answer =>

New Answer {Id = answer.ID.ToString (), Img = GetImage (answer.Text)});} result.CodeImg = GetImage (result.AnswerValue); / / get the picture result.AnswerValue = answerCode.TrimEnd (','); result.Answer = RandomSortList (listAnsuwr); / / disrupt the order of the correct answer and the hyphen return result;}

This is the code that sorts the collection

/ private static List RandomSortList (IEnumerable listT) {var random = new Random (); var newList = newList (); foreach (var item in listT) {newList.Insert (random.Next (newList.Count + 1), item);} return newList;}

5. Draw pictures

The following is the drawing code, CAPTCHA and alternative answers correspond to two different ways of drawing (the comments are fairly clear). Don't worry that after the text is rotated x °, humans can't tell it apart, . In the last sentence of the code, I converted the picture into Base64, which is convenient for the front end to call.

Private static string GetImage (string text) {Image image; switch (text.Length) {case 1: image = new Bitmap (50,40); break; case 4: image = new Bitmap (120,40); break; default: image = new Bitmap (50,40); break;} Brush brushText = new SolidBrush (Color.FromArgb (255,0,0,0); var graphics = Graphics.FromImage (image); graphics.SmoothingMode = SmoothingMode.AntiAlias Graphics.Clear (Color.White); var font = new Font (new FontFamily), 20, FontStyle.Regular) If (text.Length > 1) / / draw CAPTCHA {/ / first two straight lines for interference and then draw the text graphics.DrawLine (new Pen (brushText, new Random (). Next (1,3)), new Point (new Random (). Next (0,10), new Random (). Next (10,40), new Point (new Random (). Next (100,120), new Random (). Next (10,30) Graphics.DrawLine (new Pen (brushText, new Random (). Next (1,3)), new Point (new Random (). Next (20,50), new Random (). Next (0,10), new Point (new Random (). Next (100,120), new Random (). Next (30,40)); graphics.DrawString (text, font, brushText, 0,10);} else// drawing choice answer {Point middle = new Point (25,20) Graphics.TranslateTransform (middle.X, middle.Y); / / here is 360 °random rotation graphics.RotateTransform (new Random (). Next (0360); var format = new StringFormat (StringFormatFlags.NoClip) {Alignment = StringAlignment.Center, LineAlignment = StringAlignment.Center}; graphics.DrawString (text, font, brushText, 0,0, format);} brushText.Dispose (); graphics.Dispose (); return ImageToBase64 (image);}

VI. Display

You can return the CAPTCHA object by calling the GetCode method directly.

The following is the background code, because the correct answer is in AnswerValue, so I first take it out and put it in Session, then empty the value and return it to the browser through json.

Public string GetVerCode () {var code = new VerificationCode.Code () .GetCode (); Session ["VERCODE"] = code.AnswerValue; code.AnswerValue = "; return JsonConvert.SerializeObject (code);}

Now let's pile up some html code.

Can't see clearly?

Let's take a little bit of js code. Here we only implement the effect on the image, and we haven't verified the data yet. (here's the verification idea: each image corresponds to an ID. The ID of the selected image is separated by a comma, and then compared with the value in Session.)

$(function () {/ / load CAPTCHA load_vercode (); / / bind CAPTCHA click event $(".vercode-anwser") .find ("img") .on ("click", null, function () {$(".vercode") .find ("img [src='']: eq (0)") .attr ("src", $(this) .attr ("src");});}) Function load_vercode () {$(".vercode") .find ("img") .attr ("src", ""); $.get ("GetVerCode", function (data) {var result = JSON.parse (data); $("# code-image") .attr ("src", _ "data:image/png;base64," + result.CodeImg) $(".vercode-anwser") .find ("img") .each (function (index) {$(this) .attr ("src", _ "data:image/png;base64,"+ result.Answer [index] .Img);});} / delete event function delete_input () {$(" .vercode ") .find (" img [srckeeper requests']: last ") .attr (" src ",") } this is the end of the article on "how to use asp.net to implement clickable CAPTCHA". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.