Explication détaillée d'exemples de code de vérification de clic asp.net

Cet article présente principalement le partage d'idées pour la mise en œuvre du code de vérification des clics asp.net (avec démo). Il a une certaine valeur de référence et les amis intéressés peuvent s'y référer.

Haha, je ne l'ai pas posté depuis longtemps. J'ai enfin vu que le code de vérification des clics était intéressant, alors j'ai eu envie d'en écrire un moi-même.

D'abord l'image de l'effet

Si vous êtes attiré par cet effet, continuez à lire.

Laissez-moi vous donner quelques idées avant de poster le code :

1 Il doit y avoir une bibliothèque de caractères chinois et la classer selon les glyphes. (J'ai classé les radicaux dans la base de données)

2. Obtenez le code de vérification (c'est-à-dire prenez quelques mots pour créer le code de vérification)

3. en fonction de Trouvez les mots avec des formes similaires

4. Organisez le texte du code de vérification et les mots avec des formes similaires

5. Dessinez des images

6. Affichage

1. Obtenez la bibliothèque de polices

La culture de notre pays est vaste et profonde, d'où viennent tant d'épices. les personnages viennent-ils ? Bien sûr, je ne pouvais pas l'ajouter manuellement, j'ai donc trouvé par hasard un site Web capable de rechercher des caractères chinois sur Internet pour capturer les données d'autres personnes. Pour capturer des données, veuillez cliquer sur le portail. Ce qui est mentionné dans le portail n’est que des idées. S’il y a quelque chose que vous ne comprenez pas, dites-le-moi. Je partagerai ma bibliothèque de polices ci-dessous.

2. Obtenez le code de vérification

C'est relativement simple, je vais coller le code directement ici Le code suivant est trié aléatoirement et. obtenu 4 éléments de données, je les écris comme ça pour plus de commodité. Personnellement, je pense que l'ID est d'abord généré aléatoirement, puis les données sont récupérées directement en fonction de l'ID. De cette façon, la

requête sera plus rapide que la méthode d'écriture suivante. (Notez que la base de données que j'utilise est MySql)

  /// <summary>
  /// 获取验证码
  /// </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. Trouver des mots similaires en fonction du texte extrait

Parce que j'ai sauvegardé le radical dans la première étape, j'obtiens ici directement la forme proche du radical courant basée sur le radical.

  /// <summary>
  /// 获取答案备选
  /// </summary>
  /// <param name="buShouCode">部首编码</param>
  /// <param name="id">当前文字ID</param>
  /// <param name="number">数量</param>
  /// <returns></returns>
  public List<VerificationCode.Model.WenZhi> GetAnswer(string buShouCode, int id,int number=1)
  {
   string sql = $"SELECT * FROM wenzhi where BuShouCode=&#39;{buShouCode}&#39; and ID <> {id} ORDER BY RAND() LIMIT "+ number;
   var dataReader = dbHelper.GetDataReader(sql);
   var list = DataReaderToList(dataReader);
   dataReader.Close();
   return list;
  }

4. Organisez le texte du code de vérification et les mots similaires

Le code suivant place d'abord les réponses alternatives et le code de vérification dans un ensemble, puis triez l'ensemble

 public Model.Code GetCode()
  {
   
   var wenzlist = _wenZhiDal.GetCodeText(); //获取验证码
   var listAnsuwr = new List<Answer>();//实例化备选答案对象
   var answerCode = string.Empty;//答案
   var result = new Model.Code
   {
    Id = Guid.NewGuid().ToString()
   };
   //根据验证码获取备选答案并把添加到答案添加到备选答案集合
   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 (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);//获取图片
   result.AnswerValue = answerCode.TrimEnd(&#39;,&#39;);
   result.Answer = RandomSortList(listAnsuwr);//打乱正确答案与形近字的顺序
   return result;
  }

C'est le code pour trier l'ensemble

  /// <summary>
  /// 随机排列集合
  /// </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. Dessinez l'image

En dessous est un code pour dessiner des images. Le code de vérification et les réponses alternatives correspondent à deux méthodes de dessin différentes (l'annotation

est écrite assez clairement). Ne vous inquiétez pas, les humains ne peuvent pas faire la différence après une rotation du texte de x°, haha. Dans la dernière phrase du code, j'ai converti l'image en Base64 pour faciliter les appels front-end.

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)//画验证码
   {
    //先来两条直线做干扰 然后再画文字
    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//画备选答案
   {
    Point middle = new Point(25, 20);
    graphics.TranslateTransform(middle.X, middle.Y);
    //这里是360°随机旋转 
    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. Afficher

L'appel direct de la méthode GetCode peut renvoyer l'objet code de vérification

Ce qui suit est le code d'arrière-plan, parce que la bonne réponse est placée dans AnswerValue, je la retire d'abord et la mets dans

Session, puis efface la valeur et la renvoie au navigateur via json.

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

Maintenant, empilons du code html

<p class="form-group">
     <ul class="vercode">
      <li><img src=&#39;&#39;/></li>
      <li><img src=&#39;&#39;/></li>
      <li><img src=&#39;&#39;/></li>
      <li><img src=&#39;&#39;/></li>
      <li class="delete" onclick="delete_input()"></li>
     </ul>
     <p>
      <img id="code-image"/> <a href="javascript:void(0);" onclick="load_vercode()">看不清？</a>
     </p>
     <ul class="vercode-anwser">
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
     </ul>
    </p>

Ajoutons du code js Ici, nous obtenons uniquement l'effet sur l'image, et nous n'avons pas encore vérifié les données. (voici l'idée de vérification : Chaque image correspond à un identifiant. Récupérez les identifiants des images sélectionnées séparés par des virgules, puis comparez-les avec les valeurs de la Session)

<script>
  $(function () {
   //加载验证码
   load_vercode();
   //绑定验证码点击事件
   $(".vercode-anwser").find("img").on("click", null, function () {
    $(".vercode").find("img[src=&#39;&#39;]: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);
    });
   });
  }
  //删除事件
  function delete_input() {
   $(".vercode").find("img[src!=&#39;&#39;]:last").attr("src", "");
  }
 </script>

[Recommandations associées ]

1.

Tutoriel vidéo gratuit ASP

2.

Tutoriel ASP

3.

Li Tutoriel vidéo de base de Yanhui ASP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!