极验geetest的使用

项目中会遇到滑块验证的需求：

前端vue里
1.新建/utils/gt3.js

"v0.4.8 Geetest Inc.";(function (window) {"use strict";if (typeof window === 'undefined') {throw new Error('Geetest requires browser environment');}var document = window.document;
var Math = window.Math;
var head = document.getElementsByTagName("head")[0];function _Object(obj) {this._obj = obj;
}_Object.prototype = {_each: function (process) {var _obj = this._obj;for (var k in _obj) {if (_obj.hasOwnProperty(k)) {process(k, _obj[k]);}}return this;}
};function Config(config) {var self = this;new _Object(config)._each(function (key, value) {self[key] = value;});
}Config.prototype = {api_server: 'api.geetest.com',protocol: 'http://',typePath: '/gettype.php',fallback_config: {slide: {static_servers: ["static.geetest.com", "dn-staticdown.qbox.me"],type: 'slide',slide: '/static/js/geetest.0.0.0.js'},fullpage: {static_servers: ["static.geetest.com", "dn-staticdown.qbox.me"],type: 'fullpage',fullpage: '/static/js/fullpage.0.0.0.js'}},_get_fallback_config: function () {var self = this;if (isString(self.type)) {return self.fallback_config[self.type];} else if (self.new_captcha) {return self.fallback_config.fullpage;} else {return self.fallback_config.slide;}},_extend: function (obj) {var self = this;new _Object(obj)._each(function (key, value) {self[key] = value;})}
};
var isNumber = function (value) {return (typeof value === 'number');
};
var isString = function (value) {return (typeof value === 'string');
};
var isBoolean = function (value) {return (typeof value === 'boolean');
};
var isObject = function (value) {return (typeof value === 'object' && value !== null);
};
var isFunction = function (value) {return (typeof value === 'function');
};
var MOBILE = /Mobi/i.test(navigator.userAgent);
var pt = MOBILE ? 3 : 0;var callbacks = {};
var status = {};var nowDate = function () {var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate();var hours = date.getHours();var minutes = date.getMinutes();var seconds = date.getSeconds();if (month >= 1 && month <= 9) {month = '0' + month;}if (day >= 0 && day <= 9) {day = '0' + day;}if (hours >= 0 && hours <= 9) {hours = '0' + hours;}if (minutes >= 0 && minutes <= 9) {minutes = '0' + minutes;}if (seconds >= 0 && seconds <= 9) {seconds = '0' + seconds;}var currentdate = year + '-' + month + '-' + day + " " + hours + ":" + minutes + ":" + seconds;return currentdate;
}var random = function () {return parseInt(Math.random() * 10000) + (new Date()).valueOf();
};var loadScript = function (url, cb) {var script = document.createElement("script");script.charset = "UTF-8";script.async = true;// 对geetest的静态资源添加 crossOriginif ( /static\.geetest\.com/g.test(url)) {script.crossOrigin = "anonymous";}script.onerror = function () {cb(true);};var loaded = false;script.onload = script.onreadystatechange = function () {if (!loaded &&(!script.readyState ||"loaded" === script.readyState ||"complete" === script.readyState)) {loaded = true;setTimeout(function () {cb(false);}, 0);}};script.src = url;head.appendChild(script);
};var normalizeDomain = function (domain) {// special domain: uems.sysu.edu.cn/jwxt/geetest/// return domain.replace(/^https?:\/\/|\/.*$/g, ''); uems.sysu.edu.cnreturn domain.replace(/^https?:\/\/|\/$/g, ''); // uems.sysu.edu.cn/jwxt/geetest
};
var normalizePath = function (path) {path = path.replace(/\/+/g, '/');if (path.indexOf('/') !== 0) {path = '/' + path;}return path;
};
var normalizeQuery = function (query) {if (!query) {return '';}var q = '?';new _Object(query)._each(function (key, value) {if (isString(value) || isNumber(value) || isBoolean(value)) {q = q + encodeURIComponent(key) + '=' + encodeURIComponent(value) + '&';}});if (q === '?') {q = '';}return q.replace(/&$/, '');
};
var makeURL = function (protocol, domain, path, query) {domain = normalizeDomain(domain);var url = normalizePath(path) + normalizeQuery(query);if (domain) {url = protocol + domain + url;}return url;
};var load = function (config, send, protocol, domains, path, query, cb) {var tryRequest = function (at) {var url = makeURL(protocol, domains[at], path, query);loadScript(url, function (err) {if (err) {if (at >= domains.length - 1) {cb(true);// report gettype errorif (send) {config.error_code = 508;var url = protocol + domains[at] + path;reportError(config, url);}} else {tryRequest(at + 1);}} else {cb(false);}});};tryRequest(0);
};var jsonp = function (domains, path, config, callback) {if (isObject(config.getLib)) {config._extend(config.getLib);callback(config);return;}if (config.offline) {callback(config._get_fallback_config());return;}var cb = "geetest_" + random();window[cb] = function (data) {if (data.status == 'success') {callback(data.data);} else if (!data.status) {callback(data);} else {callback(config._get_fallback_config());}window[cb] = undefined;try {delete window[cb];} catch (e) {}};load(config, true, config.protocol, domains, path, {gt: config.gt,callback: cb}, function (err) {if (err) {callback(config._get_fallback_config());}});
};var reportError = function (config, url) {load(config, false, config.protocol, ['monitor.geetest.com'], '/monitor/send', {time: nowDate(),captcha_id: config.gt,challenge: config.challenge,pt: pt,exception_url: url,error_code: config.error_code}, function (err) {})
}var throwError = function (errorType, config) {var errors = {networkError: '网络错误',gtTypeError: 'gt字段不是字符串类型'};if (typeof config.onError === 'function') {config.onError(errors[errorType]);} else {throw new Error(errors[errorType]);}
};var detect = function () {return window.Geetest || document.getElementById("gt_lib");
};if (detect()) {status.slide = "loaded";
}window.initGeetest = function (userConfig, callback) {var config = new Config(userConfig);if (userConfig.https) {config.protocol = 'https://';} else if (!userConfig.protocol) {config.protocol = window.location.protocol + '//';}// for KFCif (userConfig.gt === '050cffef4ae57b5d5e529fea9540b0d1' ||userConfig.gt === '3bd38408ae4af923ed36e13819b14d42') {config.apiserver = 'yumchina.geetest.com/'; // for old jsconfig.api_server = 'yumchina.geetest.com';}if(userConfig.gt){window.GeeGT = userConfig.gt}if(userConfig.challenge){window.GeeChallenge = userConfig.challenge}if (isObject(userConfig.getType)) {config._extend(userConfig.getType);}jsonp([config.api_server || config.apiserver], config.typePath, config, function (newConfig) {var type = newConfig.type;var init = function () {config._extend(newConfig);callback(new window.Geetest(config));};callbacks[type] = callbacks[type] || [];var s = status[type] || 'init';if (s === 'init') {status[type] = 'loading';callbacks[type].push(init);load(config, true, config.protocol, newConfig.static_servers || newConfig.domains, newConfig[type] || newConfig.path, null, function (err) {if (err) {status[type] = 'fail';throwError('networkError', config);} else {status[type] = 'loaded';var cbs = callbacks[type];for (var i = 0, len = cbs.length; i < len; i = i + 1) {var cb = cbs[i];if (isFunction(cb)) {cb();}}callbacks[type] = [];}});} else if (s === "loaded") {init();} else if (s === "fail") {throwError('networkError', config);} else if (s === "loading") {callbacks[type].push(init);}});};})(window);

2.mixins文件夹下

imgCode接口返回的数据


import "@/utils/gt3";
import { imgCode } from "@/api/login";
export default {data() {return {codeForm: {}, //极验codeDone: false,codeCallBack: false,//验证成功回调处理逻辑//geeType:'',//类型 注册bind 登录popup}},methods: {async getCode() {const { gt, challenge, offline, uuid } = await imgCode();this.codeForm = { uuid: uuid };initGeetest({//此部分配置来自服务端 SDKgt: gt,challenge: challenge,offline: offline,new_captcha: true,//product: this.geeType,width: "100%",},(captchaObj) => {captchaObj.appendTo("#geetest-box"); //把图形渲染到对应的dom元素中});},},
}

3.目标文件.vue里

<template><div class="dashboard-container"><div class="app-container"><div class="form-box"><el-form ref="CusruleForm" :model="cusForm"><el-form-item ref="userName" prop="userName"><el-input v-model="cusForm.userName" placeholder="请输入客户账号" /></el-form-item><el-form-item ref="password" prop="password"><el-input placeholder="请输入登录密码" v-model="cusForm.password" /></el-form-item></el-form>//这里显示极验验证<div class="geetest-box" id="geetest-box"></div></div></div></div>
</template><script>
import mixin from "@/mixins/geetest";
export default {mixins: [mixin],// 客户信息data() {return {cusForm: {userName: "",password: "",},};},created() {this.geeType = "popup";this.getCode();},methods: {test() {this.getCode();},},
};
</script>
<style lang="scss" scoped>
.geetest-box {min-height: 60px;
}
</style></style>

极验geetest的使用相关推荐

爬虫进阶教程：极验(GEETEST)验证码破解教程
原文链接及原作者:爬虫进阶教程:极验(GEETEST)验证码破解教程 | Jack Cui 一.前言爬虫最大的敌人之一是什么?没错,验证码![Geetest]作为提供验证码服务的行家,市场占有率还是 ...
python爬虫-国家企业_自动查企业工商登记信息（企业信用信息公示系统、极验Geetest与Python爬虫）...
一.引言: 信贷作业的过程就是信息搜集和验证的过程.对于企业客户,最权威的信息渠道莫过于工商登记信息,各种第三方查询工具(天眼查.启信宝.各种各样的API等等)也来源于此. 常见的问题在于,我们不仅要 ...
对极验geetest滑块验证码图片还原算法的研究
免责声明本文章所提到的技术仅用于学习用途,禁止使用本文章的任何技术进行发起网络攻击.非法利用等网络犯罪行为,一切信息禁止用于任何非法用途.若读者利用文章所提到的技术实施违法犯罪行为,其责任一概由读者 ...
geetest文件夹什么意思_极验geetest的使用
前端: $("#show-mobile-captcha").click(function () { //alert('ok'); $("#popup-captcha-mo ...
Django中使用极验Geetest滑动验证码
一,环境部署 1.创建一个django测试项目此处省略... 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github ...
Django中使用极验Geetest滑动验证码过程解析
**一,环境部署 ** 1.创建一个django测试项目二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github.co ...
给html5添加极验,Django中使用极验Geetest滑动验证码过程解析
一,环境部署 1.创建一个django测试项目二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github.com/Gee ...
Python爬虫解决极验(geetest)滑动验证码
csdn_okcheng 滑动验证码的识别介绍实现步骤: ① 初始化 ② 模拟登录填写,点开滑块验证 ③ 获取并储存有无缺口的两张图片 ④ 获取缺口位置 ⑤ 获取移动轨迹 ⑥ 按照轨迹拖动,完全验证 ...
破解极验(geetest)验证码
最近在搞爬虫的时候在好几个网站都碰到了一种叫做geetest的滑动条验证码,一直没有太好的办法只能在触发这个验证码后发个报警去手动处理一下.http://www.geetest.com/exp_emb ...

极验geetest的使用

极验geetest的使用相关推荐

最新文章

热门文章