【asp.net】滑塊驗證碼(分享一個從github上下載的原始碼)
阿新 • • 發佈:2021-08-29
滑塊驗證碼(分享一個從github上下載的原始碼)
思路:
1. 準備好10張或20張不同規格的圖片,按規格分類到不同資料夾,每個資料夾的圖片從1開始順序遞增命名,為了隨機選擇圖片。
2.前端提交規格比如200*300,根據規格選擇原圖,並初始化 小正方塊的長 b 和 小正方塊的y軸座標 c(不用隨機,固定值) 等其他資料。
3. 隨機在原圖的[b,原圖寬度-b]上取一個值 a作為切圖的x座標開始點,y座標,後端使用gdi 切出作為填充的小方塊圖片,把a儲存到session中。
然後把原圖 [a,c]處的區域填充,作為大圖。
4. 圖片轉base64,返回大圖 小圖 c 小圖 長 寬
5. 前端渲染,實現 重新整理圖片,拖拽功能。
6 前端拖動結束,把x軸座標傳回,和session中存的a值比對,在誤差範圍內驗證通過。否則 session儲存錯誤數加一,超過多次錯誤,可在前端控制限制驗證。
這個作者還加了圖片混淆功能,和判斷是否人機驗證功能。詳細看原始碼,程式碼和邏輯都十分的清晰。
github地址:https://github.com/eatage/VerificationCode
快速下載地址:http:////files.cnblogs.com/files/HelloQLQ/VerificationCode-master.zip