十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營(yíng)維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
最近滑動(dòng)驗(yàn)證碼在很多網(wǎng)站逐步流行起來,一方面對(duì)用戶體驗(yàn)來說,比較新穎,操作簡(jiǎn)單,另一方面相對(duì)圖形驗(yàn)證碼來說,安全性并沒有很大的降低。當(dāng)然到目前為止,沒有絕對(duì)的安全驗(yàn)證,只是不斷增加攻擊者的繞過成本。
創(chuàng)新互聯(lián)堅(jiān)信:善待客戶,將會(huì)成為終身客戶。我們能堅(jiān)持多年,是因?yàn)槲覀円恢笨芍档眯刨?。我們從不忽悠初訪客戶,我們用心做好本職工作,不忘初心,方得始終。十載網(wǎng)站建設(shè)經(jīng)驗(yàn)創(chuàng)新互聯(lián)是成都老牌網(wǎng)站營(yíng)銷服務(wù)商,為您提供網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站設(shè)計(jì)、HTML5、網(wǎng)站制作、品牌網(wǎng)站制作、微信小程序定制開發(fā)服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。
接下來分析下滑動(dòng)驗(yàn)證碼的核心流程:
后端隨機(jī)生成摳圖和帶有摳圖陰影的背景圖片,后臺(tái)保存隨機(jī)摳圖位置坐標(biāo)
前端實(shí)現(xiàn)滑動(dòng)交互,將摳圖拼在摳圖陰影之上,獲取到用戶滑動(dòng)距離值,比如以下示例
前端將用戶滑動(dòng)距離值傳入后端,后端校驗(yàn)誤差是否在容許范圍內(nèi)。
這里單純校驗(yàn)用戶滑動(dòng)距離是最基本的校驗(yàn),出于更高的安全考慮,可能還會(huì)考慮用戶滑動(dòng)的整個(gè)軌跡,用戶在當(dāng)前頁面的訪問行為等。這些可以很復(fù)雜,甚至借助到用戶行為數(shù)據(jù)分析模型,最終的目標(biāo)都是增加非法的模擬和繞過的難度。這些有機(jī)會(huì)可以再歸納總結(jié)常用到的方法,本文重點(diǎn)集中在如何基于Java來一步步實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼的生成。
可以看到,滑動(dòng)圖形驗(yàn)證碼,重要有兩個(gè)圖片組成,摳塊和帶有摳塊陰影的原圖,這里面有兩個(gè)重要特性保證被暴力破解的難度:摳塊的形狀隨機(jī)和摳塊所在原圖的位置隨機(jī)。這樣就可以在有限的圖集中制造出隨機(jī)的、無規(guī)律可尋的摳圖和原圖的配對(duì)。
用代碼如何從一張大圖中摳出一個(gè)有特定隨機(jī)形狀的小圖呢?
第一步,先確定一個(gè)摳出圖的輪廓,方便后續(xù)真正開始執(zhí)行圖片處理操作
圖片是有像素組成,每個(gè)像素點(diǎn)對(duì)應(yīng)一種顏色,顏色可以用RGB形式表示,外加一個(gè)透明度,把一張圖理解成一個(gè)平面圖形,左上角為原點(diǎn),向右x軸,向下y軸,一個(gè)坐標(biāo)值對(duì)應(yīng)該位置像素點(diǎn)的顏色,這樣就可以把一張圖轉(zhuǎn)換成一個(gè)二維數(shù)組?;谶@個(gè)考慮,輪廓也用二維數(shù)組來表示,輪廓內(nèi)元素值為1,輪廓外元素值對(duì)應(yīng)0。
這時(shí)候就要想這個(gè)輪廓形狀怎么生成了。有坐標(biāo)系、有矩形、有圓形,沒錯(cuò),用到數(shù)學(xué)的圖形函數(shù)。典型用到一個(gè)圓的函數(shù)方程和矩形的邊線的函數(shù),類似:
(x-a)²+(y-b)²=r²中,有三個(gè)參數(shù)a、b、r,即圓心坐標(biāo)為(a,b),半徑r。這些將摳圖放在上文描述的坐標(biāo)系上很容易就圖算出來具體的值。
示例代碼如下:
private int[][] getBlockData() { int[][] data = new int[targetLength][targetWidth]; double x2 = targetLength-circleR-2; //隨機(jī)生成圓的位置 double h2 = 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 - h2,2); if (d1 <= po || (j >= ybegin && d2 >= po) || (i >= xbegin && d3 >= po) ) { data[i][j] = 0; } else { data[i][j] = 1; } } } return data; }
第二步,有這個(gè)輪廓后就可以依據(jù)這個(gè)二維數(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]; // 原圖中對(duì)應(yīng)位置變色處理 int rgb_ori = oriImage.getRGB(x + i, y + j); if (rgb == 1) { //摳圖上復(fù)制對(duì)應(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); //原圖對(duì)應(yīng)位置顏色變化 oriImage.setRGB(x + i, y + j, rgb_ori); } } } }
經(jīng)過前面兩步后,就得到了摳圖和帶摳圖陰影的原圖。為增加混淆和提高網(wǎng)絡(luò)加載效果,還需要對(duì)圖片做進(jìn)一步處理。一般有兩件事需要做,一對(duì)圖片做模糊處理增加機(jī)器識(shí)別難度,二做適當(dāng)同質(zhì)量壓縮。模糊處理很容易想到高斯模糊,原理很好理解,大家可以去google了解下。具體到Java里面的實(shí)現(xiàn),有很多版本,現(xiàn)在不借助任何第三方j(luò)ar,提供一個(gè)示例:
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)測(cè)試模糊效果很不錯(cuò)。另外是圖片壓縮,也不借助任何第三方工具,做同質(zhì)壓縮。
public static byte[] fromBufferedImage2(BufferedImage img,String imagType) throws IOException { bos.reset(); // 得到指定Format圖片的writer Iteratoriter = 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(); // 指定壓縮時(shí)使用的色彩模式 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; }
至此,滑動(dòng)驗(yàn)證碼核心的代碼處理流程已全部結(jié)束,這里面有很多細(xì)節(jié)可以不斷打磨優(yōu)化,讓滑動(dòng)體驗(yàn)可以變得更好。希望可以幫助到某些準(zhǔn)備自己構(gòu)建滑動(dòng)驗(yàn)證碼的同學(xué)。
以上代碼實(shí)現(xiàn)都非常的精煉,一方面為了保證性能,另一方面好理解。另外由于各方面原因也不便引入過多細(xì)節(jié),如果疑問,可留言交流。經(jīng)測(cè)試,該生成滑動(dòng)圖形的流程響應(yīng)時(shí)間可以控制在20ms左右,如果原圖分辨率在300px*150px以下,可以到10ms左右,在可接受范圍內(nèi)。如果有更高效的方式,希望多多指教。也希望大家多多支持創(chuàng)新互聯(lián)。