. Net click Verification Code Implementation ideas,. net Verification Code

. Net click Verification Code Implementation ideas,. net Verification Code

Haha, I haven't been bubbling for a long time. It's a little interesting to click the verification code first, so I want to write one by myself.

First

If you are attracted by this effect, please continue to take a look.

Let's talk about some ideas before you paste the Code:

1. You must have a Chinese Character Library and classify it by font. (I am the first security classification in the database)

2. Get the verification code (that is, take a few texts for verification code)

3. Search for near words based on the obtained text

4. Arrange the text and text of the Verification Code

5. Draw Images

6. Display

6. write a blog and share it with you (share code to change the world)

 

1. Obtain the font library

Chinese culture is profound and profound. Where can I find many hot words? Of course, I can't add it manually, so I just found a website on the Internet that can query Chinese characters and capture others' data. For data capturing methods, click the portal. What I said in the portal is just a thought. If you don't understand it, please let me know. I will share my font below.

 

2. Obtain the verification code

This is relatively simple. Here I directly paste the code. The following code is to obtain four data records after random sorting. I write this code for the convenience of graphs. I personally think that the ID is randomly generated first, and then the data is retrieved directly based on the ID, so the query speed will be faster than the following method. (Note that the database I use is MySql)

/// <Summary> /// obtain the verification code /// </summary> public List <VerificationCode. model. wenZhi> 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 ;}

 

3. Search for near words based on the obtained text

Because I saved the beginning of the first step, I can retrieve the near-word of the current beginning based on the beginning.

/// <Summary> /// obtain alternative answers /// </summary> /// <param name = "buShouCode"> header Code </param> /// <param name = "id"> current text ID </param> /// <param name = "number"> quantity </param> /// <returns> </returns> public List <VerificationCode. model. wenZhi> 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 ;}

 

4. Arrange the text and text of the Verification Code

The following code first places the alternative answer and verification code in a set and then sorts the set.

Public Model. code GetCode () {var wenzlist = _ wenZhiDal. getCodeText (); // obtain the verification code var listAnsuwr = new List <Answer> (); // instantiate the alternative Answer object var answerCode = string. empty; // The Answer var result = new Model. code {Id = Guid. newGuid (). toString ()}; // obtain the alternative answer based on the verification code and add it to the alternative answer set 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 the number of answers is not enough, retrieve a few 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); // obtain the image result. answerValue = answerCode. trimEnd (','); result. answer = RandomSortList (listAnsuwr); // disrupt the order of the correct Answer and near-word return result ;}

This is the code for sorting the set.

/// <Summary> /// randomly arrange the set /// </summary> /// <typeparam name = "T"> </typeparam> /// <param name = "listT"> </param> // <returns> </returns> private static List <T> RandomSortList <T> (IEnumerable <T> listT) {var random = new Random (); var newList = new List <T> (); foreach (var item in listT) {newList. insert (random. next (newList. count + 1), item);} return newList ;}

 

5. Draw Images

The following is the drawing code. The verification code and alternative answer correspond to two different painting methods (the comments inside are still clear ). Don't worry about text cannot be split after x °, haha. In the last sentence of the code, I converted the image into Base64 for convenient front-end calling.

 

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 the verification code {// first use 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 // draw alternative answers {Point middle = new Point (25, 20); graphics. translateTransform (middle. x, middle. y); // here it is 360 ° random rotation graphics. rotateTransform (new Random (). next (0,360); 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 );}

 

6. Display

You can directly call the GetCode method to return the verification code object.

The following is the background code. The correct answer should be placed in the AnswerValue. Therefore, I first extract the code and put it in the Session. Then, I clear the value and return it to the browser in json format.

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

Now let's heap the html code.

<Div class = "form-group"> <ul class = "vercode"> <li>  </li>  </li>  </li> <li class = "delete" onclick = "delete_input () "> </li> </ul> <div>  <a href =" javascript: void (0 ); "onclick =" load_vercode () "> cannot see clearly? </A> </div> <ul class = "vercode-anwser"> <li>  </li> <li>  </li>  </li>  </li> </ul> </div>

 

Click the js Code. Here we only implement the effect on the image, and we haven't verified the data (Here we talk about the verification idea: each image corresponds to an ID, and the IDs of the selected images are separated by commas, then compare it with the value in the Session)

<Script> $ (function () {// load the verification code load_vercode (); // bind the verification code Click Event $ (". vercode-ansible "). 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-ansible "). find ("img "). each (function (index) {$ (this ). attr ("src", "data: image/png; base64," + result. answer [index]. img) ;}) ;};}// Delete event function delete_input () {$ (". vercode "). find ("img [src! = '']: Last"). attr ("src", "") ;}</script>

The code here is almost the same. The above ideas are just personal thoughts. If you are interested, let's discuss them together.

Source code here --> address http://pan.baidu.com/s/1eS5Mn30 password: 7intrauterine

Share code to change the world