爲何每次登陸都有煩人的驗證碼?

1、應用場景

每次登陸系統的時候老是要輸入煩人的驗證碼，那麼咱們今天就思考這個問題，爲何要有驗證碼這個功能？ 不少夥伴應該都知道:

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

驗證碼的種類

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

2、不一樣實現

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

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() 複製代碼

運行效果以下圖:

3、最後

本篇講了爲何會有驗證碼這個東東，和市面上如今驗證碼的種類，簡單給你們作了一下科普，最後分別以不一樣的編程語言，展現了生成驗證碼的過程。如今網絡安全尤其重要，驗證碼這個功能雖小，可是不可不作!

不安分的猿人

孜孜不斷的技術分享！