java OpenCV挑战极验滑动拼图验证码

一丶解析验证码组成

从上面三张图来看，极验滑动拼图验证码是由一个小的拼图和一个大的背景图组成，拼图的形状各式各样，背景图中有一个阴影缺口，与拼图形状一致。

这里我们使用F12大法打开浏览器控制台，观察一下验证码的页面结构。

通过观察可以看到，验证码所包含的图片均以<canves>画布的形式呈现在页面中，且有三张图片，且第三张图片被加上了属性style=“display: none;”，即为隐藏不显示。那么我们修改下页面代码，看下这张图究竟是什么。

修改完代码发现，这不就是完整的背景图嘛。那么根据上面的命名来看，基本可以确定这三张图分别是什么了。

• 第一张class为geetest_canvas_bg geetest_absolute，可以确定为带缺口的背景图。

• 第二张class为geetest_canvas_slice geetest_absolute，可以确定为拼图。

• 第三张便是完整的图片。

二丶分析出破解思路

1. 首先根据这个验证码的组成，来分析一下我们人要做的事情：

按照正常的手动操作流程来看，我们需要看出背景图中与拼图对应的阴影缺口的位置，然后鼠标按住下方滑块来把拼图对正到缺口位置来完成验证。

2. 然后根据人要做的事情，来分析一下程序要做的事情：

根据分析得出下面几个步骤：
1.获取到两张图片（带缺口背景图、完整背景图）
2.处理图片，得到阴影位置并计算滑动距离
3.根据滑动距离模拟滑动

三丶具体操作步骤

1丶获取到两张图片

由于这里的图片都是通过canvas画布呈现的，我们可以通过执行js代码来生成图片。
可以参考《如何抓取canvas画布中的图片》。

2丶处理图片，计算滑动距离

通过第一步得到的两张图片可以看出，两张图有两处不同的地方，一处差异不大，一处差异较大，我们可以通过比较每一个像素点的差异度来确定阴影缺口的位置。缺口的位置横坐标减去小图距离边框的距离即为滑动距离。

以下是关键部分代码：

private final String INDEX_URL = "https://www.geetest.com/Register"; // 延时加载 private static WebElement waitWebElement(WebDriver driver, By by, int count) throws Exception { WebElement webElement = null; boolean isWait = false; for (int k = 0; k < count; k++) { try { webElement = driver.findElement(by); if (isWait) System.out.println(" ok!"); return webElement; } catch (org.openqa.selenium.NoSuchElementException ex) { isWait = true; if (k == 0) System.out.print("waitWebElement(" + by.toString() + ")"); else System.out.print("."); Thread.sleep(50); } } if (isWait) System.out.println(" outTime!"); return null; } /** * 计算需要平移的距离 * * @param driver * @param fullImgPath完整背景图片文件名 * @param bgImgPath含有缺口背景图片文件名 * @return * @throws IOException */ public static int getMoveDistance(WebDriver driver, String fullImgPath, String bgImgPath) throws IOException { File fullFile = new File(fullImgPath); File bgFile = new File(bgImgPath); try { BufferedImage fullBI = ImageIO.read(fullFile); BufferedImage bgBI = ImageIO.read(bgFile); for (int i = 0; i < bgBI.getWidth(); i++) { for (int j = 0; j < bgBI.getHeight(); j++) { int[] fullRgb = new int[3]; fullRgb[0] = (fullBI.getRGB(i, j) & 0xff0000) >> 16; fullRgb[1] = (fullBI.getRGB(i, j) & 0xff00) >> 8; fullRgb[2] = (fullBI.getRGB(i, j) & 0xff); int[] bgRgb = new int[3]; bgRgb[0] = (bgBI.getRGB(i, j) & 0xff0000) >> 16; bgRgb[1] = (bgBI.getRGB(i, j) & 0xff00) >> 8; bgRgb[2] = (bgBI.getRGB(i, j) & 0xff); if (difference(fullRgb, bgRgb) > 255) { return i; } } } } catch (Exception e) { return 0; } finally { fullFile.delete(); bgFile.delete(); } return 0; } private static int difference(int[] a, int[] b) { return Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]) + Math.abs(a[2] - b[2]); } /** * // 执行 JS 代码并生成图片 * * @param driver * @param jsString * @param input * @return图片路径 */ public static String getImgByJs(WebDriver driver, String jsString) { try { String imgFilePath = "c://GeeTest_" + System.currentTimeMillis() + "_" + (Math.random() * 9 + 1) * 100000 + ".jpg"; String imgInfo = ((JavascriptExecutor) driver).executeScript(jsString).toString(); if (imgInfo != null && imgInfo.contains("data")) { imgInfo = imgInfo.substring(imgInfo.indexOf(",") + 1); ByteArrayOutputStream outputStream = imgStrToFile(imgInfo); if (outputStream != null) { byte[] picBytes = outputStream.toByteArray(); outPicToFile(picBytes, imgFilePath); return imgFilePath; } } return null; } catch (Exception e) { return null; } } /** * 将base64字节码转byte输出流 * * @param imgBase64Str * @return */ private static ByteArrayOutputStream imgStrToFile(String imgBase64Str) { ByteArrayOutputStream outputStream = new ByteArrayOutputStream(); try { if (imgBase64Str != null) { BASE64Decoder decoder = new BASE64Decoder(); byte[] data = decoder.decodeBuffer(imgBase64Str); outputStream.write(data); outputStream.flush(); } return outputStream; } catch (Exception e) { return null; } } /** * 图片流转图片 * * @param o * @param imgFilePath */ private static void outPicToFile(Object o, String imgFilePath) { if (o == null) return; try { if (o instanceof byte[]) { // 转为图片 if (((byte[]) o).length == 0) return; File imgFile = new File(imgFilePath); // byte数组到图片 FileImageOutputStream imageOutput = new FileImageOutputStream(imgFile); imageOutput.write((byte[]) o, 0, ((byte[]) o).length); imageOutput.close(); } else { return; } } catch (Exception e) { } } /** * 模拟人工移动 * * @param driver * @param element页面滑块 * @param distance需要移动距离 * @throws InterruptedException */ public static void move(WebDriver driver, WebElement element, int distance) throws InterruptedException { int randomTime = 0; if (distance > 90) { randomTime = 250; } else if (distance > 80 && distance <= 90) { randomTime = 150; } List<Integer> track = getMoveTrack(distance - 2); int moveY = 1; try { Actions actions = new Actions(driver); actions.clickAndHold(element).perform(); Thread.sleep(200); for (int i = 0; i < track.size(); i++) { actions.moveByOffset(track.get(i), moveY).perform(); Thread.sleep(new Random().nextInt(300) + randomTime); } Thread.sleep(200); actions.release(element).perform(); } catch (Exception e) { e.printStackTrace(); } } /** * 根据距离获取滑动轨迹 * * @param distance需要移动的距离 * @return */ public static List<Integer> getMoveTrack(int distance) { List<Integer> track = new ArrayList<>();// 移动轨迹 Random random = new Random(); int current = 0;// 已经移动的距离 int mid = (int) distance * 4 / 5;// 减速阈值 int a = 0; int move = 0;// 每次循环移动的距离 while (true) { a = random.nextInt(10); if (current <= mid) { move += a;// 不断加速 } else { move -= a; } if ((current + move) < distance) { track.add(move); } else { track.add(distance - current); break; } current += move; } return track; } private void seleniumTest() { ChromeDriverManager manager = ChromeDriverManager.getInstance(); int status = -1; String phone = "13814389438"; try { WebDriver driver = manager.getDriver(); driver.get(INDEX_URL); driver.manage().window().maximize(); // 设置浏览器窗口最大化 Thread.sleep(2000); // 输入手机号 WebElement phoneElemet = waitWebElement(driver, By.xpath("//input[@placeholder='手机号码']"), 20); phoneElemet.clear(); for (int i = 0; i < phone.length(); i++) { char c = phone.charAt(i); phoneElemet.sendKeys(c + ""); phoneElemet.click(); } sleep(50); // 点击获取验证码 waitWebElement(driver, By.className("sendCode"), 20).click(); sleep(2000); // 完整背景图geetest_canvas_fullbg geetest_fade geetest_absolute String fullImgJs = "return document.getElementsByClassName(\"geetest_canvas_fullbg geetest_fade geetest_absolute\")[0].toDataURL(\"image/png\");"; String fullImgPath = getImgByJs(driver, fullImgJs); // 含有缺口背景图geetest_canvas_bg geetest_absolute String bgImgJs = "return document.getElementsByClassName(\"geetest_canvas_bg geetest_absolute\")[0].toDataURL(\"image/png\");"; String bgImgPath = getImgByJs(driver, bgImgJs); // 获取滑动按钮 WebElement moveElemet = waitWebElement(driver, By.className("geetest_slider_button"), 20); // 获取滑动距离并删除图片 int distance = getMoveDistance(driver, fullImgPath, bgImgPath); if (distance == 0) { } // 滑动 move(driver, moveElemet, distance - 6); // 滑动结果 sleep(2 * 1000); String gtInfo = waitWebElement(driver, By.className("sendCode"), 20).getAttribute("innerHTML"); System.out.println(gtInfo); } catch (Exception e) { e.printStackTrace(); } finally { manager.closeDriver(status); } } protected static void sleep(long time) { try { Thread.sleep(time); } catch (InterruptedException e) { } } 

3丶根据滑动距离模拟滑动

得到滑动距离之后，我们再来看下滑动轨迹，如果滑动轨迹过于规律，则很容易被识别。所以我们就将滑动轨迹贴近人类的正常操作轨迹即可。
比如：先快后慢，慢慢对准缺口。在缺口处左右晃动。在缺口处停留，欣赏成果等。

四丶结果展示

五丶结果分析

目标：

识别阴影位置，推算出对应滑动距离，模拟滑动。

实现思路：

1.获取到两张图片（完整图、缺口图）
2.处理图片，得到阴影位置并计算滑动距离
3.根据滑动距离模拟滑动

识别耗时：

15 - 50毫秒

通过率：

>95%