Java實現(xiàn)滑動驗證碼的示例代碼
最近滑動驗證碼在很多網站逐步流行起來,一方面對用戶體驗來說,比較新穎,操作簡單,另一方面相對圖形驗證碼來說,安全性并沒有很大的降低。當然到目前為止,沒有絕對的安全驗證,只是不斷增加攻擊者的繞過成本。
接下來分析下滑動驗證碼的核心流程:
后端隨機生成摳圖和帶有摳圖陰影的背景圖片,后臺保存隨機摳圖位置坐標
前端實現(xiàn)滑動交互,將摳圖拼在摳圖陰影之上,獲取到用戶滑動距離值,比如以下示例

前端將用戶滑動距離值傳入后端,后端校驗誤差是否在容許范圍內。
這里單純校驗用戶滑動距離是最基本的校驗,出于更高的安全考慮,可能還會考慮用戶滑動的整個軌跡,用戶在當前頁面的訪問行為等。這些可以很復雜,甚至借助到用戶行為數(shù)據分析模型,最終的目標都是增加非法的模擬和繞過的難度。這些有機會可以再歸納總結常用到的方法,本文重點集中在如何基于Java來一步步實現(xiàn)滑動驗證碼的生成。
可以看到,滑動圖形驗證碼,重要有兩個圖片組成,摳塊和帶有摳塊陰影的原圖,這里面有兩個重要特性保證被暴力破解的難度:摳塊的形狀隨機和摳塊所在原圖的位置隨機。這樣就可以在有限的圖集中制造出隨機的、無規(guī)律可尋的摳圖和原圖的配對。
用代碼如何從一張大圖中摳出一個有特定隨機形狀的小圖呢?
第一步,先確定一個摳出圖的輪廓,方便后續(xù)真正開始執(zhí)行圖片處理操作
圖片是有像素組成,每個像素點對應一種顏色,顏色可以用RGB形式表示,外加一個透明度,把一張圖理解成一個平面圖形,左上角為原點,向右x軸,向下y軸,一個坐標值對應該位置像素點的顏色,這樣就可以把一張圖轉換成一個二維數(shù)組?;谶@個考慮,輪廓也用二維數(shù)組來表示,輪廓內元素值為1,輪廓外元素值對應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;
}
第二步,有這個輪廓后就可以依據這個二維數(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];
// 原圖中對應位置變色處理
int rgb_ori = oriImage.getRGB(x + i, y + j);
if (rgb == 1) {
//摳圖上復制對應顏色值
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);
//原圖對應位置顏色變化
oriImage.setRGB(x + i, y + j, rgb_ori);
}
}
}
}
經過前面兩步后,就得到了摳圖和帶摳圖陰影的原圖。為增加混淆和提高網絡加載效果,還需要對圖片做進一步處理。一般有兩件事需要做,一對圖片做模糊處理增加機器識別難度,二做適當同質量壓縮。模糊處理很容易想到高斯模糊,原理很好理解,大家可以去google了解下。具體到Java里面的實現(xiàn),有很多版本,現(xiàn)在不借助任何第三方jar,提供一個示例:
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);
}
經測試模糊效果很不錯。另外是圖片壓縮,也不借助任何第三方工具,做同質壓縮。
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ù)設置(ImageWriteParam )
ImageWriteParam iwp = writer.getDefaultWriteParam();
iwp.setCompressionMode(ImageWriteParam.MODE_EXPLICIT); // 設置可否壓縮
iwp.setCompressionQuality(1f); // 設置壓縮質量參數(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é)可以不斷打磨優(yōu)化,讓滑動體驗可以變得更好。希望可以幫助到某些準備自己構建滑動驗證碼的同學。
以上代碼實現(xiàn)都非常的精煉,一方面為了保證性能,另一方面好理解。另外由于各方面原因也不便引入過多細節(jié),如果疑問,可留言交流。經測試,該生成滑動圖形的流程響應時間可以控制在20ms左右,如果原圖分辨率在300px*150px以下,可以到10ms左右,在可接受范圍內。如果有更高效的方式,希望多多指教。也希望大家多多支持腳本之家。
相關文章
Springboot2.6.x高版本與Swagger2版本沖突問題解決方法
Spring Boot 2.6.x版本引入依賴?springfox-boot-starter?(Swagger?3.0) 后,啟動容器會報錯,本文就介紹一下Springboot2.6.x高版本與Swagger2版本沖突問題解決方法,感興趣的可以了解一下2022-04-04
Spring MVC Interceptor 實現(xiàn)性能監(jiān)控的功能代碼
本篇文章主要介紹了Spring MVC Interceptor 實現(xiàn)性能監(jiān)控的功能代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09
Spring?Boot?Admin?監(jiān)控指標接入Grafana可視化的實例詳解
Spring Boot Admin2 自帶有部分監(jiān)控圖表,如圖,有線程、內存Heap和內存Non Heap,這篇文章主要介紹了Spring?Boot?Admin?監(jiān)控指標接入Grafana可視化,需要的朋友可以參考下2022-11-11
解決參數(shù)命名不規(guī)范,造成使用@NotNull進行校驗出現(xiàn)的問題
這篇文章主要介紹了解決參數(shù)命名不規(guī)范,造成使用@NotNull進行校驗出現(xiàn)的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01

