有关滑块验证码的一些实践

网上有很多关于滑块验证码的知识分享，我也是参考这些文章解决了项目中的问题。这里分享一下整个实践过程中遇到的一些难点并剖析下解决思路。

图片提取

滑块验证码很多时候是用webview显示的，这种情况下如何使用原生代码从webview中提取出滑块图与背景图片就是一个比较棘手的问题了。翻了N多资料后，发现比较靠谱的方法大致有这样两种：

使用NSURLProtocol拦截网络请求，拿到webview请求的图片数据。
向webview注入代码，拦截其网络请求到的图片数据。

我选择了第一种方案，原因是以前有接触过这种玩法，但具体实践过程中还是发现了这种方案的致命弱点：WKWebview的POST请求时，这种方案无法获取请求body内容，进而导致整个请求异常。比较幸运的是项目中使用了UIWebview且是GET协议，因此不会触发这个问题。

第二种方案主要思路是向JS代码层注入一段代码，拦载JS常规网络请求对象XMLHttpRequest的接口，进而获取到请求数据与返回数据。它同样存在着缺点：针对单个web api，无法适应所有的网络请求实现。该方案的具体实现可以参考这里。

图片识别

滑块图片识别这个网上有很多资料，大体上都是采用了OpenCV框架对图片进行灰度、二值化等处理后，找到符号滑块的坐标位置。这里会涉及到大量的图像识别方面的理论知识，幸运的是openCV已经将这些令人头疼的理论封装成了简单易懂的api接口。我使用的识别方案在这里，识别成功率对于整个项目来说足够了。

滑动轨迹

本来以为有了滑块坐标，模拟拖动滑块到坐标位置就可以了，后来才发现没有那么简单：原来滑块验证不仅仅检验了位置信息，还会检验用户拖动滑块的轨迹信息。用户拖动滑块的轨迹必须要符合先快后慢的原则，如何做到呢？

有资料说可以使用加速度来达成目标，前面加速度大点，后面加速度小点或者为负值。理论是可以的，关键这套算法自己实现的话很棘手：要把中学学到的那套东西捡起来，然后自己捣鼓个方程出来，我去，我还真这样做了，花了半天时间，搞到最后我自己都不清楚要什么！

速度、加速度、时间、距离

然后翻到了这份资料，对比我自己弄的那个东西，简直暴击啊！

方程式

u0=0, u1=0.75, u2=0.95, u3=1

将这个方程应用于滑块时，x表示时间，y表示为滑动的距离，这个先快后慢的问题自然而然地得到解决。

模拟拖动

最开始做的时候想把它做成一个手机系统级的后台服务，尝试了调用触动精灵底层接口、移植facebook自动化测试框架WebDriverAgent等方案，但对这些方案最后达成的效果都不甚满意。无奈之下只能接受应用级别的模拟点击方案，这个层面的实现方案很多，我选择了在PTFakeTouch开源框架的基础上封装一层的方案。源框架的实现拖动的api中没有提供时间维度，很不友好，略作封装如下：

//在指定的时间内沿X轴方向拖动，Y轴坐标值在最大、最小值之间随机波动
-(void)fakeDragTouch:(CGPoint)start endPoint:(CGPoint)end duration:(float)duration complete:(DragComplete)block
{
    NSUInteger pointId = [PTFakeMetaTouch getAvailablePointId];
    [PTFakeMetaTouch fakeTouchId:pointId AtPoint:start withTouchPhase:UITouchPhaseBegan];
    CGFloat distance = end.x - start.x;
    int minY = MIN(start.y, end.y) * 100;
    int maxY = MAX(start.y, end.y) * 100;
    int gap = maxY - minY;
    
    for (float i = 0.0f; i < duration; i += 0.001f) {
        float t = I;
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, t * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
            float dx = [self caculateProgress:t total:distance];
            float dy = (minY + arc4random() % gap) / 100.0f;
            CGPoint move = CGPointMake(start.x + dx, dy);
            [PTFakeMetaTouch fakeTouchId:pointId AtPoint:move withTouchPhase:UITouchPhaseMoved];
        });
    }
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, duration * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
        [PTFakeMetaTouch fakeTouchId:pointId AtPoint:end withTouchPhase:UITouchPhaseEnded];
        if (block != nil){
            block();
        }
    });
}

-(float)caculateProgress:(float)time total:(float)distance
{
    float u0 = 0;
    float u1 = 0.75;
    float u2 = 0.95;
    float u3 = 1;
    
    float x = time;
    float rx = 1 - x;
    float y = u0 * rx * rx * rx + 3 * u1 * rx * rx * x + 3 * u2 * rx * x * x + u3 * x * x * x;
    float progress = y * distance;
    return progress;
}

屏幕坐标适配

服务端识别到的坐标是图片坐标，要把图片坐标转换成屏幕坐标，需要考虑到屏幕的scale值，但最麻烦的是webview实现的滑块页面没有很好的方法将图片坐标转换成屏幕坐标，现在只能硬编码强行顶上了。也希望有兴趣的朋友分享经验方法。