搜尋
首頁後端開發C#.Net教程asp.net點選驗證碼實作思路

哈哈好久沒冒泡了,最進看見點選驗證碼有點意思,所以想自己寫一個。

先上效果圖

asp.net點選驗證碼實作思路

如果你被這個效果吸引了就請繼續看下去。

貼程式碼前先說點思路:

1.要有一個漢字庫,並按字形分類。 (我在資料庫裡是安部首分類的)

2.取得驗證碼(也就是取幾個文字做驗證碼)

3.根據取出來的文字去找形近字

4.排列驗證碼文字和形近字

5.繪製圖片

6.顯示

一、獲取字庫

我國文化博大精深,哪來當然我不可能手動加進去,於是我就在網路上隨便找了一個能查漢字的網站,去抓別人的資料。抓資料的方法請點傳送門。傳送門裡說的只是思路,如果有不懂的請艾特我。我會在下面分享我的字庫。

二、取得驗證碼

這個就比較簡單了這裡我就直接貼程式碼了,下面的程式碼就是隨機排序後取4條數據,我這樣寫是為了圖方便。個人覺得先隨機產生ID,然後直接根據ID取數據,這樣查詢速度會比下面這種寫法快。 (注意我用的資料庫是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;
}

三、根據取出來的文字去找形近字

因為第一步的時候我存部首了,所以這裡我直接根據部首取獲取當前部首的形近字。

/// <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;
}

四.排列驗證碼文字和形近字

下面的程式碼是先把備選答案和驗證碼放在一個集合裡然後再對集合排序

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;
 }

 這是對集合排序的代碼

/// <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;
}

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);
  }

 這是對集合排序的代碼

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

<div class="form-group">
     <ul class="vercode">
      <li><img  src=&#39;&#39;/ alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  src=&#39;&#39;/ alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  src=&#39;&#39;/ alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  src=&#39;&#39;/ alt="asp.net點選驗證碼實作思路" ></li>
      <li class="delete" onclick="delete_input()"></li>
     </ul>
     <div>
      <img  id="code-image"/ alt="asp.net點選驗證碼實作思路" > <a href="javascript:void(0);" onclick="load_vercode()">看不清?</a>
     </div>
     <ul class="vercode-anwser">
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
     </ul>
    </div>

 這是對集合排序的代碼

<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>

rrreee

 這是對集合排序的代碼

rrreee
rrreee

 這是對集合排序的代碼

rrreee五、繪製圖片

下面是畫圖的程式碼,驗證碼和備選答案對應兩種不同的畫法(裡面註解寫的還算清楚)。不要擔心文字旋轉x°後人類分不出來,哈哈。程式碼最後一句我把圖片轉成了Base64,方便前端呼叫。

rrreee

六、顯示

直接呼叫GetCode方法就能返回驗證碼物件

下面是後台程式碼,應為正確答案是放在AnswerValue裡的所以我先把裡面取出來放Session清空後再透過json返回給瀏覽器。 🎜rrreee🎜現在來堆點html代碼🎜rrreee🎜再來點js代碼,這裡只實現的圖片上的效果,還沒對數據驗證(這裡說說驗證思路:每個圖片對應一個ID,取到選擇圖片的ID用逗號分隔,然後與Session裡的值對比)🎜rrreee🎜到這裡代碼就差不多了,以上思路只是單純的個人想法,有興趣的朋友一起來討論吧。 🎜🎜以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持PHP中文網。 🎜🎜更多asp.net點選驗證碼實現想法相關文章請關注PHP中文網! 🎜
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
C#.NET開發:入門的初學者指南C#.NET開發:入門的初學者指南Apr 18, 2025 am 12:17 AM

要開始C#.NET開發,你需要:1.了解C#的基礎知識和.NET框架的核心概念;2.掌握變量、數據類型、控制結構、函數和類的基本概念;3.學習C#的高級特性,如LINQ和異步編程;4.熟悉常見錯誤的調試技巧和性能優化方法。通過這些步驟,你可以逐步深入C#.NET的世界,並編寫高效的應用程序。

c#和.net:了解兩者之間的關係c#和.net:了解兩者之間的關係Apr 17, 2025 am 12:07 AM

C#和.NET的關係是密不可分的,但它們不是一回事。 C#是一門編程語言,而.NET是一個開發平台。 C#用於編寫代碼,編譯成.NET的中間語言(IL),由.NET運行時(CLR)執行。

c#.net的持續相關性:查看當前用法c#.net的持續相關性:查看當前用法Apr 16, 2025 am 12:07 AM

C#.NET依然重要,因為它提供了強大的工具和庫,支持多種應用開發。 1)C#結合.NET框架,使開發高效便捷。 2)C#的類型安全和垃圾回收機制增強了其優勢。 3).NET提供跨平台運行環境和豐富的API,提升了開發靈活性。

從網絡到桌面:C#.NET的多功能性從網絡到桌面:C#.NET的多功能性Apr 15, 2025 am 12:07 AM

C#.NETisversatileforbothwebanddesktopdevelopment.1)Forweb,useASP.NETfordynamicapplications.2)Fordesktop,employWindowsFormsorWPFforrichinterfaces.3)UseXamarinforcross-platformdevelopment,enablingcodesharingacrossWindows,macOS,Linux,andmobiledevices.

C#.NET與未來:適應新技術C#.NET與未來:適應新技術Apr 14, 2025 am 12:06 AM

C#和.NET通過不斷的更新和優化,適應了新興技術的需求。 1)C#9.0和.NET5引入了記錄類型和性能優化。 2).NETCore增強了雲原生和容器化支持。 3)ASP.NETCore與現代Web技術集成。 4)ML.NET支持機器學習和人工智能。 5)異步編程和最佳實踐提升了性能。

c#.net適合您嗎?評估其適用性c#.net適合您嗎?評估其適用性Apr 13, 2025 am 12:03 AM

c#.netissutableforenterprise-levelapplications withemofrosoftecosystemdueToItsStrongTyping,richlibraries,androbustperraries,androbustperformance.however,itmaynotbeidealfoross-platement forment forment forment forvepentment offependment dovelopment toveloperment toveloperment whenrawspeedsportor whenrawspeedseedpolitical politionalitable,

.NET中的C#代碼:探索編程過程.NET中的C#代碼:探索編程過程Apr 12, 2025 am 12:02 AM

C#在.NET中的編程過程包括以下步驟:1)編寫C#代碼,2)編譯為中間語言(IL),3)由.NET運行時(CLR)執行。 C#在.NET中的優勢在於其現代化語法、強大的類型系統和與.NET框架的緊密集成,適用於從桌面應用到Web服務的各種開發場景。

C#.NET:探索核心概念和編程基礎知識C#.NET:探索核心概念和編程基礎知識Apr 10, 2025 am 09:32 AM

C#是一種現代、面向對象的編程語言,由微軟開發並作為.NET框架的一部分。 1.C#支持面向對象編程(OOP),包括封裝、繼承和多態。 2.C#中的異步編程通過async和await關鍵字實現,提高應用的響應性。 3.使用LINQ可以簡潔地處理數據集合。 4.常見錯誤包括空引用異常和索引超出範圍異常,調試技巧包括使用調試器和異常處理。 5.性能優化包括使用StringBuilder和避免不必要的裝箱和拆箱。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器