Java實現(xiàn)滑動驗證碼的示例代碼

更新時間：2018年01月10日 09:57:38 作者：echov

這篇文章主要介紹了Java實現(xiàn)滑動驗證碼的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近滑動驗證碼在很多網(wǎng)站逐步流行起來，一方面對用戶體驗來說，比較新穎，操作簡單，另一方面相對圖形驗證碼來說，安全性并沒有很大的降低。當然到目前為止，沒有絕對的安全驗證，只是不斷增加攻擊者的繞過成本。

接下來分析下滑動驗證碼的核心流程：

后端隨機生成摳圖和帶有摳圖陰影的背景圖片，后臺保存隨機摳圖位置坐標

前端實現(xiàn)滑動交互，將摳圖拼在摳圖陰影之上，獲取到用戶滑動距離值，比如以下示例

前端將用戶滑動距離值傳入后端，后端校驗誤差是否在容許范圍內(nèi)。

這里單純校驗用戶滑動距離是最基本的校驗，出于更高的安全考慮，可能還會考慮用戶滑動的整個軌跡，用戶在當前頁面的訪問行為等。這些可以很復雜，甚至借助到用戶行為數(shù)據(jù)分析模型，最終的目標都是增加非法的模擬和繞過的難度。這些有機會可以再歸納總結(jié)常用到的方法，本文重點集中在如何基于Java來一步步實現(xiàn)滑動驗證碼的生成。

可以看到，滑動圖形驗證碼，重要有兩個圖片組成，摳塊和帶有摳塊陰影的原圖，這里面有兩個重要特性保證被暴力破解的難度：摳塊的形狀隨機和摳塊所在原圖的位置隨機。這樣就可以在有限的圖集中制造出隨機的、無規(guī)律可尋的摳圖和原圖的配對。

用代碼如何從一張大圖中摳出一個有特定隨機形狀的小圖呢？

第一步，先確定一個摳出圖的輪廓，方便后續(xù)真正開始執(zhí)行圖片處理操作

圖片是有像素組成，每個像素點對應(yīng)一種顏色，顏色可以用RGB形式表示，外加一個透明度，把一張圖理解成一個平面圖形，左上角為原點，向右x軸，向下y軸，一個坐標值對應(yīng)該位置像素點的顏色，這樣就可以把一張圖轉(zhuǎn)換成一個二維數(shù)組?；谶@個考慮，輪廓也用二維數(shù)組來表示，輪廓內(nèi)元素值為1，輪廓外元素值對應(yīng)0。

這時候就要想這個輪廓形狀怎么生成了。有坐標系、有矩形、有圓形，沒錯，用到數(shù)學的圖形函數(shù)。典型用到一個圓的函數(shù)方程和矩形的邊線的函數(shù)，類似：

(x-a)²+(y-b)²=r²中，有三個參數(shù)a、b、r，即圓心坐標為(a，b)，半徑r。這些將摳圖放在上文描述的坐標系上很容易就圖算出來具體的值。

示例代碼如下：

 private int[][] getBlockData() {
 int[][] data = new int[targetLength][targetWidth];
 double x2 = targetLength-circleR-2;
 //隨機生成圓的位置
 double h1 = circleR + Math.random() * (targetWidth-3*circleR-r1);
 double po = circleR*circleR;
 
 double xbegin = targetLength-circleR-r1;
 double ybegin = targetWidth-circleR-r1;
 
 for (int i = 0; i < targetLength; i++) {
  for (int j = 0; j < targetWidth; j++) {
  //右邊○
  double d3 = Math.pow(i - x2,2) + Math.pow(j - h1,2);
  
  if (d1 <= po
   || (j >= ybegin && d2 >= po)
   || (i >= xbegin && d3 >= po)
   ) {
   data[i][j] = 0;
   
  } else {
   data[i][j] = 1;
  }
  }
 }
 return data;
 }

第二步，有這個輪廓后就可以依據(jù)這個二維數(shù)組的值來判定摳圖并在原圖上摳圖位置處加陰影。

操作如下：

private void cutByTemplate(BufferedImage oriImage,BufferedImage targetImage, int[][] templateImage, int x,
  int y){
 for (int i = 0; i < targetLength; i++) {
  for (int j = 0; j < targetWidth; j++) {
  int rgb = templateImage[i][j];
  // 原圖中對應(yīng)位置變色處理
  
  int rgb_ori = oriImage.getRGB(x + i, y + j);
  
  if (rgb == 1) {
          //摳圖上復制對應(yīng)顏色值
   targetImage.setRGB(i, y + j, rgb_ori);
   int r = (0xff & rgb_ori);
   int g = (0xff & (rgb_ori >> 8));
   int b = (0xff & (rgb_ori >> 16)));
   rgb_ori = r + (g << 8) + (b << 16) + (200 << 24);
          //原圖對應(yīng)位置顏色變化
   oriImage.setRGB(x + i, y + j, rgb_ori);
  } 
  }
 }
 }

經(jīng)過前面兩步后，就得到了摳圖和帶摳圖陰影的原圖。為增加混淆和提高網(wǎng)絡(luò)加載效果，還需要對圖片做進一步處理。一般有兩件事需要做，一對圖片做模糊處理增加機器識別難度，二做適當同質(zhì)量壓縮。模糊處理很容易想到高斯模糊，原理很好理解，大家可以去google了解下。具體到Java里面的實現(xiàn)，有很多版本，現(xiàn)在不借助任何第三方j(luò)ar，提供一個示例：

public static ConvolveOp getGaussianBlurFilter(int radius,
      boolean horizontal) {
    if (radius < 1) {
      throw new IllegalArgumentException("Radius must be >= 1");
    }
    
    int size = radius * 2 + 1;
    float[] data = new float[size];
    
    float sigma = radius / 3.0f;
    float twoSigmaSquare = 2.0f * sigma * sigma;
    float sigmaRoot = (float) Math.sqrt(twoSigmaSquare * Math.PI);
    float total = 0.0f;
    
    for (int i = -radius; i <= radius; i++) {
      float distance = i * i;
      int index = i + radius;
      data[index] = (float) Math.exp(-distance / twoSigmaSquare) / sigmaRoot;
      total += data[index];
    }
    
    for (int i = 0; i < data.length; i++) {
      data[i] /= total;
    }    
    
    Kernel kernel = null;
    if (horizontal) {
      kernel = new Kernel(size, 1, data);
    } else {
      kernel = new Kernel(1, size, data);
    }
    return new ConvolveOp(kernel, ConvolveOp.EDGE_NO_OP, null);
  }

public static void simpleBlur(BufferedImage src,BufferedImage dest) {
   BufferedImageOp op = getGaussianBlurFilter(2,false);
   op.filter(src, dest);
 }

經(jīng)測試模糊效果很不錯。另外是圖片壓縮，也不借助任何第三方工具，做同質(zhì)壓縮。

public static byte[] fromBufferedImage2(BufferedImage img,String imagType) throws IOException {
 bos.reset();
 // 得到指定Format圖片的writer
 Iterator<ImageWriter> iter = ImageIO.getImageWritersByFormatName(imagType);
 ImageWriter writer = (ImageWriter) iter.next(); 

 // 得到指定writer的輸出參數(shù)設(shè)置(ImageWriteParam )
 ImageWriteParam iwp = writer.getDefaultWriteParam();
 iwp.setCompressionMode(ImageWriteParam.MODE_EXPLICIT); // 設(shè)置可否壓縮
 iwp.setCompressionQuality(1f); // 設(shè)置壓縮質(zhì)量參數(shù)

 iwp.setProgressiveMode(ImageWriteParam.MODE_DISABLED);

 ColorModel colorModel = ColorModel.getRGBdefault();
 // 指定壓縮時使用的色彩模式
 iwp.setDestinationType(new javax.imageio.ImageTypeSpecifier(colorModel,
 colorModel.createCompatibleSampleModel(16, 16)));
 
 writer.setOutput(ImageIO
 .createImageOutputStream(bos));
 IIOImage iIamge = new IIOImage(img, null, null);
 writer.write(null, iIamge, iwp);
 
 byte[] d = bos.toByteArray();
 return d;
 }

至此，滑動驗證碼核心的代碼處理流程已全部結(jié)束，這里面有很多細節(jié)可以不斷打磨優(yōu)化，讓滑動體驗可以變得更好。希望可以幫助到某些準備自己構(gòu)建滑動驗證碼的同學。

以上代碼實現(xiàn)都非常的精煉，一方面為了保證性能，另一方面好理解。另外由于各方面原因也不便引入過多細節(jié)，如果疑問，可留言交流。經(jīng)測試，該生成滑動圖形的流程響應(yīng)時間可以控制在20ms左右，如果原圖分辨率在300px*150px以下，可以到10ms左右，在可接受范圍內(nèi)。如果有更高效的方式，希望多多指教。也希望大家多多支持腳本之家。

您可能感興趣的文章: