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

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

图片提取

滑块验证码很多时候是用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实现的滑块页面没有很好的方法将图片坐标转换成屏幕坐标,现在只能硬编码强行顶上了。也希望有兴趣的朋友分享经验方法。

你可能感兴趣的:(有关滑块验证码的一些实践)