一、應用場景

每次登錄系統的時候總是要輸入煩人的驗證碼，那么我們今天就思考這個問題，為什么要有驗證碼這個功能？
很多伙伴應該都知道:

• 防止黑客通過接口調用攻擊系統，每次登錄系統要輸入驗證碼就防止機器訪問。
• 做限流處理，防止同一時間產生大量用戶的涌入，防止系統崩潰。

驗證碼的種類

• 傳統輸入式驗證碼: 用戶輸入圖片中的字母、數字、漢字等進行驗證。簡單易操作，人機交互性較好。但安全系數低，容易被破解。
• 輸入式的圖形驗證碼: 有精美圖案，識別文本也清晰可認，專注于廣告。一種廣告位的展現形式。
• 純行為驗證碼: 照要求將備選碎片直線滑動到正確的位置。操作簡單，體驗好。單一維度，容易被逆向模擬，與移動端頁面切換不兼容。
• 圖標選擇與行為輔助: 給出一組圖片，按要求點擊其中一張或者多張。借用萬物識別的難度阻擋機器。安全性強。對于圖片、圖庫、技術要求高。
• 點擊式的圖文驗證與行為輔助: 通過文字提醒用戶點擊圖中相同字的位置進行驗證。操作簡單，體驗良好，單一圖片區域較大，破解難度大。
• 智能驗證碼: 通過行為特征、設備指紋、數據風控等技術，正常用戶免驗證，異常用戶強制驗證。簡單便捷，區分人與機器、人與人、設備與設備。

二、不同實現

下面以三種不同的編程語言，通過代碼生成驗證碼。

2.1 Java語言實現

先看下Java代碼是如何生成驗證碼的。手動創建下面這個類，就可以生成驗證碼了。代碼如下:

public class GenVerifyCodeUtils {private static char mapTable[] = {'0', '1', '2', '3', '4', '5','6', '7', '8', '9', '0', '1','2', '3', '4', '5', '6', '7','8', '9'};public static void main(String[] args) {OutputStream outputStream = new BufferedOutputStream(new ByteArrayOutputStream());System.out.println(getImageCode(100,80,outputStream ));}public static Map<String, Object> getImageCode(int width, int height, OutputStream os) {Map<String,Object> returnMap = new HashMap<String, Object>();if (width <= 0) width = 60;if (height <= 0) height = 20;BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);// 獲取圖形上下文Graphics g = image.getGraphics();//生成隨機類Random random = new Random();// 設定背景色g.setColor(getRandColor(200, 250));g.fillRect(0, 0, width, height);//設定字體g.setFont(new Font("Times New Roman", Font.PLAIN, 18));// 隨機產生168條干擾線，使圖像中的認證碼不易被其它程序探測到g.setColor(getRandColor(160, 200));for (int i = 0; i < 168; i++) {int x = random.nextInt(width);int y = random.nextInt(height);int xl = random.nextInt(12);int yl = random.nextInt(12);g.drawLine(x, y, x + xl, y + yl);}//取隨機產生的碼String strEnsure = "";//4代表4位驗證碼,如果要生成更多位的認證碼,則加大數值for (int i = 0; i < 4; ++i) {strEnsure += mapTable[(int) (mapTable.length * Math.random())];// 將認證碼顯示到圖像中g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));// 直接生成String str = strEnsure.substring(i, i + 1);// 設置隨便碼在背景圖圖片上的位置g.drawString(str, 13 * i + 20, 25);}// 釋放圖形上下文g.dispose();returnMap.put("image",image);returnMap.put("strEnsure",strEnsure);return returnMap;}static Color getRandColor(int fc, int bc) {Random random = new Random();if (fc > 255) fc = 255;if (bc > 255) bc = 255;int r = fc + random.nextInt(bc - fc);int g = fc + random.nextInt(bc - fc);int b = fc + random.nextInt(bc - fc);return new Color(r, g, b);} }

2.2 Javascript 實現

這里我也用原生Js寫了一個生成驗證碼的工具，代碼如下:

<form action="#">&nbsp;<input type="text" id="input1" onblur="inputBlur()"/><input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px;background: #660099"/><br /> </form> <script language="javascript" type="text/javascript">var code; //在全局 定義驗證碼var code2; //在全局 定義驗證碼function createCode() {code = "";var checkCode = document.getElementById("checkCode");function RndNum(n) {var rnd = "";for (var i = 0; i < n; i++)rnd += Math.floor(Math.random() * 10);return rnd;}var num = RndNum(2);var num2 = RndNum(2);code = num + "+" + num2 + "=";code2 = parseInt(num) + parseInt(num2)if (checkCode) {checkCode.className = "code";checkCode.value = code;}}function inputBlur(){var inputCode = document.getElementById("input1").value;if (inputCode.length <= 0) {alert("請輸入驗證碼！");}else if (inputCode != code2) {alert("驗證碼輸入錯誤！");createCode(); }else {alert("^-^ OK");}} </script> <style type="text/css">.code{font-family: Arial;font-style: italic;color: Red;border: 0;padding: 2px 3px;letter-spacing: 3px;font-weight: bolder;}.unchanged{border: 0;} </style>

效果如下:

2.3 python實現

代碼如下:

# -*- coding: utf-8 -* from PIL import Image, ImageDraw, ImageFont, ImageFilterimport random# 隨機字母: def rndChar():return chr(random.randint(65, 90))# 隨機顏色1: def rndColor():return (random.randint(64, 255), random.randint(64, 255), random.randint(64, 255))# 隨機顏色2: def rndColor2():return (random.randint(32, 127), random.randint(32, 127), random.randint(32, 127))# 240 x 60: width = 60 * 4 height = 60 image = Image.new('RGB', (width, height), (255, 255, 255)) # 創建Font對象: font = ImageFont.truetype('C:\Windows\Fonts\Arial.ttf', 36) # 創建Draw對象: draw = ImageDraw.Draw(image) # 填充每個像素: for x in range(width):for y in range(height):draw.point((x, y), fill=rndColor()) # 輸出文字: for t in range(4):draw.text((60 * t + 10, 10), rndChar(), font=font, fill=rndColor2()) # 模糊: image = image.filter(ImageFilter.BLUR) image.save('code.jpg', 'jpeg') image.show()

運行效果如下圖:

三、最后

本篇講了為什么會有驗證碼這個東東，和市面上現在驗證碼的種類，簡單給大家做了一下科普，最后分別以不同的編程語言，展示了生成驗證碼的過程。現在網絡安全尤為重要，驗證碼這個功能雖小，但是不可不做!

我有個公眾號叫：不安分的猿人 每周都會有技術干貨分享給大家，關注我第一時間獲取哦！

總結

以上是生活随笔為你收集整理的为什么每次登录都有烦人的验证码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。