使用极验【行为验证】实现人机交互验证_仙女爱吃鱼的博客-程序员宅基地

技术标签: 工具类  极验  验证  vue  geetest.js  行为验证  

官网: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.cn
    return 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 error
                    if (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 KFC
    if (userConfig.gt === '050cffef4ae57b5d5e529fea9540b0d1' ||
        userConfig.gt === '3bd38408ae4af923ed36e13819b14d42') {
    
        config.apiserver = 'yumchina.geetest.com/'; // for old js
        config.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
}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_38318244/article/details/106718951

智能推荐

Leetcode 春季赛:按字典序排列最小的等效字符串(超详细的解法!!!)_coordinate_blog的博客-程序员宅基地

给出长度相同的两个字符串:A 和 B,其中 A[i] 和 B[i] 是一组等价字符。举个例子,如果 A = "abc" 且 B = "cde",那么就有 'a' == 'c', 'b' == 'd', 'c' == 'e'。等价字符遵循任何等价关系的一般规则:自反性:‘a’ == ‘a’对称性:‘a’ == ‘b’ 则必定有 ‘b’ == ‘a’传递性:‘a’ == ‘b’ 且 ‘b’ ...

技术型创业者容易遇到的三大问题_蔡志远的博客-程序员宅基地

这是《创业杂记》的番外篇,我们一起来讨论技术型创业者容易出现的三大状况。

DataGridView很详细的用法_diemi9921的博客-程序员宅基地

DataGridiew用法总结一、DataGridView 取得或者修改当前单元格的内容:当前单元格指的是 DataGridView 焦点所在的单元格,它可以通过 DataGridView 对象的 CurrentCell 属性取得。如果当前单元格不存在的时候,返回Nothing(C#是null)// 取得当前单元格内容Console.WriteLine(DataGridView1....

ThinkPad机型Hotkey影响QQ停靠在桌面边缘时自动隐藏功能_difan5495的博客-程序员宅基地

问题现象:Windows7系统中,QQ“停靠在桌面边缘时自动隐藏”功能,应该当鼠标指针靠近隐藏处时,自动弹出全部QQ界面,但是却变成了弹完全部界面后又自动缩回隐藏了一部分。 问题原因:安装新版集成System Interface的Hotkey驱程过程中会安装一个Lenovo Auto Scroll Utility组件。可以实现窗口自动滚动。适用系统:Windows7解决方法:方法一...

(转)java创建对象的步骤_diaoyoxun8287的博客-程序员宅基地

关于对象的创建过程一般是从new指令(我说的是JVM的层面)开始的(具体请看图1),JVM首先对符号引用进行解析,如果找不到对应的符号引用,那么这个类还没有被加载,因此JVM便会进行类加载过程。符号引用解析完毕之后,JVM会为对象在堆中分配内存,HotSpot虚拟机实现的JAVA对象包括三个部分:对象头、实例字段和对齐填充字段(具体内容请看图2),其中要注意的是,实例字段包括自身定义的...

启用Code Snippet功能【转载】_dieshiji0937的博客-程序员宅基地

如果进行override操作时,提示:Code Snippet titled [Method Stub - Body] failed to load. Verify that refactoring snippets are recognized in the Code Snippet Manager and that the snippet files are valid on dis...

随便推点

Android 菜单(OptionMenu)大全 建立你自己的菜单_dielucuan8830的博客-程序员宅基地

转自:http://www.cnblogs.com/salam/archive/2011/04/04/2005329.html菜单是用户界面中最常见的元素之一,使用非常频繁,在Android中,菜单被分为如下三种,选项菜单(OptionsMenu)、上下文菜单(ContextMenu)和子菜单(SubMenu),今天这讲是OptionsMenu   一、概述  publ...

【POJ2676】Sudoku(类似于八皇后问题的DFS)_chenxiaoran666的博客-程序员宅基地_类似于八皇后的汇编问题

题面:【POJ2676】Sudoku题意:给你若干个不完整的数独(空的地方用0表示),请你把它们补全(对于每个数独只需输出一种方案)。 解析:看见这题,我自然而然地想到了八皇后问题,而这题似乎比八皇后问题还要更为简单。我们可以用a[]数组来存储每一列出现过的数字,用b[]数组来存储每一行出现过的数字,用c[]数组来存储每一大格出现过的数字,这样就可以进行搜索了。代码如下...

导入tkinter出错_hu_NB的博客-程序员宅基地_tkinter导入失败

代码如下:from tkinter import *my_gui = Tk()mainloop()报错如下:Traceback (most recent call last):File “C:/Users/96219/.PyCharm2019.1/”, line 1, in from tkinter import *ModuleNotFoundError: No module na...

微信小程序与支付宝小程序差异之组件与api_大梦_dm的博客-程序员宅基地

微信小程序与支付宝小程序大部分人都基本相同,只是在部分的时间名称,少部分api返回的数据结构上存在差异,在这里我总结了部分比较常见的差异。继续往下看!组件差异——image在微信小程序中,image组件中,可以嵌套组件,用绝对定位可以展示出来,也可以放cover-view。在支付宝小程序中,image中不管嵌套什么组件都显示不出来。期望官方后面会支持。 组件差异——cove...

PHPCMS&nbsp;V9构建模块&nbsp;-&nbsp;实例之…_jingmin的博客-程序员宅基地

原文地址:V9构建模块 - 实例之企业服务模块">PHPCMS V9构建模块 - 实例之企业服务模块作者:novalue先补一下课,没看过基本步骤的同学请看:http://blog.sina.com.cn/s/blog_8882a62601010b97.html下面开始第一个实例,企业服务模块,这是个比较简单的模块,做一个抛砖的作用。模块功能分析:企业服务,企业填写招聘申请表,管理审核

RTP协议解析和H264码流提取_zero_china的博客-程序员宅基地

一、 h264基础概念SODB: 数据比特串-->最原始的编码数据RBSP: 原始字节序列载荷-->在SODB的后面填加了结尾比特(RBSP trailing bits 一个bit“1”)若干比特“0”,以便字节对齐。EBSP: 扩展字节序列载荷– &amp;gt;在RBSP基础上填加了仿校验字节(0X03)它的原因是: 在NALU加到Annexb上时,需要填加每组NALU之前的开始码 Sta...