利用JS插件识别抖音图片验证的几种方法

 3835

经常刷网页版的抖音,但隔一段时间就会出现验证码,有滑块和文字点选。今天尝试开发一个自动完成验证的插件,但遇到了跨域图片不能直接获得base64数据的问题。

准备插件工具: https://pan.baidu.com/s/1Dok2WKq15bnHyIVRAGDqNg?pwd=pve2 提取码: pve2

工具使用说明:

  1. post方式向http://127.0.0.1:2000提交数据
  2. {type:"ocrCode",img:图形base64}      识别文字字母等
  3. {type:"detection",img:图形base64}         识别点选文字范围
  4. {type:"slide",targetImg:滑块base64,backgroundImg:背景base64}        识别滑块
  5. {type:"clickImage",key:"窗口关键字",img:按钮base64}         点击图形按钮
  6. {type:"passKey",key:按键}                   模拟键盘按键
  7. {type:"activityWindow",window:"要激活的窗口标题关键字",key:按键【可选】}          激活窗口并按键
  8. {type:"click"}               点击鼠标
  9. {type:"clickPoint",x:X坐标,y:Y坐标}        指定坐标点击鼠标
  10. {type:"move",x:X坐标,y:Y坐标}               移动鼠标
  11. {type:"moveAndClick",x:X坐标,y:Y坐标}                       移动鼠标到指定坐标再点击
  12. {type:"write",text:"要输入的内容"}           模拟键盘输入文字

第一种:通常获取图片数据直接用canvas drawImage简单直接快速。

但在部分网站中是禁止使用canvas的,所以我就用

第二种:  使用 XMLHttpRequest异步(注意只能异步)读取blob数据转base64。

但如果图片是跨域的,第一、二种都会失效

第三种(支持跨域): 在浏览器插件的background.js中使用 XMLHttpRequest读取图片然后传给inject_script.js 。也可以用于其它数据的读取。

以下代码示例,过抖音验证(文字点选类识别率较低,需要训练模型然后更新到识别程序中才能完善)。

  1. //识别验证码
  2. function ocrFormApi(_data) {
  3.     var _code = "本地未开启P娃儿猫验证码识别工具的web服务。";
  4.     try {
  5.         console.log("提交后台识别中...");
  6.         $.ajax({
  7.             type: "POST",
  8.             url: "http://127.0.0.1:2000/",
  9.             timeout: 2 * 1000,
  10.             async: false,
  11.             data: _data,
  12.             success: function (data) {
  13.                 _code = data;
  14.             },
  15.             error: function (_d) {
  16.                 _code = "识别错误";
  17.             }
  18.         });
  19.     } catch (e) {
  20.   
  21.     }
  22.     return _code;
  23. }
  24. //滑块操作(滑块元素ID,要滑动的距离)
  25. function mockVerify(_imgId, _distance) {
  26.     var btn = document.querySelector("#" + _imgId);
  27.     var mousedown = document.createEvent('MouseEvents');
  28.     var rect = btn.getBoundingClientRect();
  29.     var x = rect.x;
  30.     var y = rect.y;
  31.     mousedown.initMouseEvent('mousedown', true, true, window, 0,
  32.         x, y, x, y, false, false, false, false, 0, null);
  33.     btn.dispatchEvent(mousedown);
  34.   
  35.     var dx = 0;
  36.     var dy = 0;
  37.     var interval = setInterval(function () {
  38.         var mousemove = document.createEvent('MouseEvents');
  39.         var _x = x + dx;
  40.         var _y = y + dy;
  41.         mousemove.initMouseEvent('mousemove', true, true, window, 0,
  42.             _x, _y, _x, _y, false, false, false, false, 0, null);
  43.         btn.dispatchEvent(mousemove);
  44.         console.log("MOVE");
  45.         btn.dispatchEvent(mousemove);
  46.         if (_x - x >= _distance) {
  47.             clearInterval(interval);
  48.             var mouseup = document.createEvent('MouseEvents');
  49.             mouseup.initMouseEvent('mouseup', true, true, window, 0,
  50.                 _x, _y, _x, _y, false, false, false, false, 0, null);
  51.             btn.dispatchEvent(mouseup);
  52.             console.log("END");
  53.         }
  54.         else {
  55.             dx += Math.ceil(Math.random() * 50);
  56.   
  57.         }
  58.     }, 60);
  59. }
  60. //传入图像元素通过canvas转换
  61. function getImgBase64(_img) {
  62.     var canvas = document.createElement("canvas");
  63.     canvas.width = _img.naturalWidth;
  64.     canvas.height = _img.naturalHeight;
  65.     var ctx = canvas.getContext("2d");
  66.     ctx.drawImage(_img, 0, 0);
  67.     return canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
  68. }
  69. //传入图片地址(不能跨域),通过blob转换(只能异步)
  70. function getImgBase64ByUrl(_url, _success) {
  71.     var xhr = new XMLHttpRequest();
  72.     xhr.responseType = "blob";
  73.     xhr.open("POST", _url, true);
  74.     xhr.onload = function (data, textStatus, request) {// 请求完成处理函数
  75.         if (this.status === 200) {
  76.             var _blob = this.response;// 获取返回值
  77.             let _f = new FileReader();
  78.             _f.onload = function (_e) {
  79.                 console.log(_e.target.result);
  80.                 _success(_e.target.result);
  81.             }
  82.             _f.readAsDataURL(_blob);
  83.         } else {
  84.             console.log(this.status);
  85.         }
  86.     };
  87.     xhr.send();
  88. }
  89. function checkCodeOut() {
  90.     if ($("#captcha-verify-image:visible").length) {
  91.         //获取跨域图片数据(把  getImgBase64ByUrl 中的方法放到插件的background中,因为background没有跨域问题)
  92.         window.sendMessage({ type: "getDataFromUrl", data: { url: $("#captcha-verify-image:visible").attr("src"), blob: 1, type: "GET" } }, function (_base64) {
  93.             var _backgroundImg = _base64.replace("data:image/jpeg;base64,", "");
  94.             //点选文字
  95.             if ($("#verify-bar-code:visible").length) {
  96.                 window.sendMessage({ type: "getDataFromUrl", data: { url: $("#verify-bar-code:visible").attr("src"), blob: 1, type: "GET" } }, function (_base64) {
  97.                     var _targetImg = _base64.replace("data:image/jpeg;base64,", "");
  98.                     //识别出要求点选的文字
  99.                     var _data = ocrFormApi({ type: "ocrCode", img: _targetImg });
  100.                     //_data = JSON.parse(_data);
  101.                     var _txt = _data.code;
  102.                     //识别背景图上的文字及对应坐标
  103.                     _data = ocrFormApi({ type: "detection", img: _backgroundImg });
  104.                     console.log(_data)
  105.                     _data = _data.code;
  106.                     for (var _i = 0; _i < _txt.length; _i++) {
  107.                         if (_data[_txt.charAt(_i)]) {
  108.                             console.log("“" + _txt.charAt(_i) + "”字点击范围:", _data[_txt.charAt(_i)])
  109.                         } else {
  110.                             console.log("“" + _txt.charAt(_i) + "”字范围未能识别成功,请刷新。");
  111.                             $(".secsdk_captcha_refresh--text").click();
  112.                         }
  113.                     }
  114.                 });
  115.             }
  116.             //滑块
  117.             if ($(".captcha_verify_img_slide:visible").length) {
  118.                 window.sendMessage({ type: "getDataFromUrl", data: { url: $(".captcha_verify_img_slide:visible").attr("src"), blob: 1, type: "GET" } }, function (_base64) {
  119.                     var _targetImg = _base64.replace("data:image/jpeg;base64,", "");
  120.                     var _data = ocrFormApi("slide", { type: "slide", targetImg: _targetImg, backgroundImg: _backgroundImg });
  121.                     console.log("滑块需要操作的数据:", _data);
  122.                     $(".captcha_verify_img_slide:visible").attr("id", "52pj_slide");
  123.                     mockVerify("52pj_slide", _data.x);
  124.                 });
  125.             }
  126.         });
  127.         return;
  128.     }
  129.     setTimeout(checkCodeOut, 1000);
  130. }
  131. function init() {
  132.     var _l = location.href;
  133.     if (_l.indexOf("www.douyin.com") != -1) {
  134.         checkCodeOut();
  135.         return;
  136.     }
  137.     return;
  138. }
  139. if (typeof $ == 'undefined') {
  140.     var s = document.createElement("script");
  141.     s.onload = init;
  142.     s.src = "https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js";
  143.     document.getElementsByTagName("HEAD")[0].appendChild(s);
  144. } else {
  145.     init();
  146. }


本文网址:https://www.zztuku.com/detail-13757.html
站长图库 - 利用JS插件识别抖音图片验证的几种方法
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐