使用极验【行为验证】实现人机交互验证

官网：https://docs.geetest.com/sensebot/apirefer/api/web

流程与原理

待补充……

方法

1.引入极验js，调用初始化方法


require("~/plugins/geetest.js");
this.handleGtInit();

2.先和服务端进行一次验证，验证后返回相关信息，带着相关信息进行二次验证

handleGtInit(status) {let _this = this;this.gtLoadStatus = true;this.getGtInit().then(res => {_this.gt_server_status = res.gt_server_status;window.initGeetest({gt: res.gt,challenge: res.challenge,width: "100%",product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效offline: !res.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注new_captcha: true},function (catchaObj) {catchaObj.appendTo("#captcha");catchaObj.onReady(function () {if (status === "1") {_this.waitShow = false;}this.gtLoadStatus = false;});catchaObj.onSuccess(function () {_this.geetest_challenge = catchaObj.getValidate().geetest_challenge;_this.geetest_validate = catchaObj.getValidate().geetest_validate;_this.geetest_seccode = catchaObj.getValidate().geetest_seccode;if (_this.checkTelephone()) {_this.SecondCheckGt().then(res => {if (res.code === 200) {_this.dragSuccess = true; // 必须用_this, 否则在这里做的对于this的改变无效_this.showErrTips = false;} else {_this.msg = "出错啦,请稍后重试";_this.showPop = true;}});} else {_this.reLoadGtCode();return;}});catchaObj.onError(function () {this.msg = "出错啦,请稍后重试";this.showPop = true;});});});},async getGtInit() {let info = {};await getGtInitInfo(this).then(res => {let {code, message} = res;if (code !== 200) {this.this.showErrTips = true;this.errMessage = message;} else {info = res.data;}});return info;},

3.重置验证

   reLoadGtCode() {document.getElementById("captcha").innerHTML = "";this.gtLoadStatus = false;this.handleGtInit();},

4.二次验证

async SecondCheckGt() {let res = await postCheckGt(this, {challenge: this.geetest_challenge,validate: this.geetest_validate,seccode: this.geetest_seccode,gt_server_status: this.gt_server_status});let {code, message} = res;if (code !== 200) {this.this.showErrTips = true;this.errMessage = message;}return res;},

5.校验手机号

   // 校验手机号checkTelephone() {let phoneReg = "";if (this.global_num == "+86") {phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; // 验证电话号码正则} else {phoneReg = /^([0-9]+|0)$/; //手机号必须为数字}if (!phoneReg.test(this.telephone)) {this.showErrTips = true;this.errMessage = "请输入正确的手机号";return false;}return true;},

6.获取手机验证码

//图形验证码是否正确&发送短信sendMessage() {this.newPhone = this.global_num + "-" + this.telephone;return postSmsCode(this, {phone: this.newPhone,smscode_type: 2, // 2为注册,geetest_challenge: this.geetest_challenge}).then(res => {let {message, code} = res;if (code !== 200) {this.showErrTips = true;this.errMessage = message;return false;}return true;});},

7.极验封装方法geetest.js

"v0.4.7 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: 'https://',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;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 (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);function gtInit() {}export default {gtInit
}

使用极验【行为验证】实现人机交互验证相关推荐

极验接入教程纯html,在AspNetCore中使用极验做行为认证的验证流程
极验验证极验验证是一种在计算机领域用于区分自然人和机器人的,通过简单集成的方式,为开发者提供安全.便捷的云端验证服务. 与以往传统验证码不同的是,极验通过分析用户完成拼图过程中的行为特征,通过数据分 ...
人机交互验证——极验的介绍和使用
极验 1. 人机交互验证介绍什么是人机交互验证: 极验是一款人机交互页面效果系统,用户的行为没有满足要求,不给与下一步执行的机会,大致效果如下,用户如果没有把目标滑到指定区域就禁止下一步操作. 之前 ...
极验验证--滑块验证
极验验证–滑块验证本文通过通过模拟登录极验网站,完成滑块验证所用语言和相关模块 python3.6 selenium requests` PIL 极验验证码特点分析极验验证是一种在计算机领域用于 ...
selenium模拟geetest极验滑动验证
前言前一阵子打球认识了一个小学生,为了骗他钱,吹了好半天,什么盗取心上人的QQ密码,吃鸡外挂,学校饭卡无限充值,最终达成交易10块钱帮他刷QQ赞. 回家赶快百度研究了一下,原来刷赞很简单:很多网站都 ...
Android极验验证集成【滑块+文字验证】
前言: 先复制一段官网介绍产品介绍极验「行为验证」是一项可以帮助你的网站与APP识别与拦截机器程序批量自动化操作的SaaS应用.它是由极验开发的新一代人机验证产品,它不基于传统"问题-答 ...
极验第四代滑块验证码破解（四）：请求分析及加密参数破解
极验第四代滑块验证码破解(四):请求分析及加密参数破解声明一.极验请求分析 1. 滑块测试网站入口 2. 滑块验证过程抓包 3. 请求详解 3.1. adaptive-captcha-demo 3 ...
极验geetest的使用
项目中会遇到滑块验证的需求: 前端vue里 1.新建/utils/gt3.js "v0.4.8 Geetest Inc.";(function (window) {"u ...
极验行为验证的使用方法
1,官方文档 https://docs.geetest.com/install/deploy/server/python 2,使用方法(基于flask) 1,从Github: gt3-python-s ...
【源码分析】极验验证官方SDK源码分析和实现思路
前言 2016年就这么来了,新的一年,继续努力~ 最近,除了12306的验证码火起来以后,还有一个在界面上拖拽的验证码,也火了起来,就是这次要说的极验验证,在这个万众创新的时代,工具类产品能做到这样, ...

使用极验【行为验证】实现人机交互验证

流程与原理

方法

使用极验【行为验证】实现人机交互验证相关推荐

最新文章

热门文章