爲什麼每次登錄都有煩人的驗證碼

一、應用場景

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

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

驗證碼的種類

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

二、不同實現

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

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

import 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()

運行效果如下圖:

三、最後

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

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