vue项目中极验验证的使用代码示例

使用vue,反应的项目获取数据,上传数据,注册,登陆等都是通过接口来完成的,接口很容易被人恶意调用,最容易被人恶意调用的接口就是注册,登陆类的接口,为了防止接口被恶意调用很多公司开发了出了很多的人机验证的工具,今天就来讲下<代码>极验验证> 　　

效果预览
　　

　　

　　

　　

　　<李>在项目中任何一个页面或vue组件都有可能需要使用到极验,并且极验在初始化时需要传递一些参数,要怎么做才能做到每一个组件都能很方便的使用极验呢?李 　　<李>极验应该在什么时候初始化?是组件一加载就初始化还是用户点击按钮后再初始化?李 　　<李>在多语言项目中,用户手动切换语言后的极验重置李 　　

　　

　　

为了在多个页面或多个组件中都能方便的使用极验,我将极验初始化的相关代码写到了<代码> mixin> 　　

geetest-mixin.js 　　 　　/* 　　极验mixin 　　*///导入极验官方给的代码 　　从“. ./共同/js/进口gt geet/geetest.gt”; 　　从“. ./api/进口{commonApi} commonApi”; 　　从“进口{mapGetters} vuex”;//自定义语言与极验语言对应表 　　const geetestLangMap={ 　　“zh_CN”:“应用”, 　　:“zh_TW zh-tw”, 　　“en_US”:“en”, 　　“ja_JP”:“ja”, 　　“ko_KR”:“柯”, 　　“ru_RU”:“俄罗斯” 　　}; 　　console.log (gt, gt)//极验默认配置 　　const geetestOptions={ 　　产品:“弹出”//极验展现形式可选值有浮动,弹出,定制绑定 　　宽度:100%, 　　朗:“zh_CN”, 　　汽车展:真的,//当产品为绑定时,如果次参数为真,则在极验加载完成后立即显示极验弹窗 　　面积:null,//极验绑定的元素,仅在产品为定制,浮动,弹出时需要传递 　　autoRefreshOnLangChange:真的,//语言改变时是否自动刷新 　　}; 　　出口const geetestMixin={ 　　数据(){ 　　返回{ 　　这些年:{ 　　geetestSuccessData: null,//极验用户行为操作成功后的数据 　　geetestObj: null,//极验对象 　　geetestLoading:假的, 　　geetestFatched:假的,//判断是否从服务器获取了极验数据 　　showGeetest:假的,//是否使用极验 　　标志:",//极验降级用的签名//极geetestRestartCountMax: 5日验重试最大此时 　　数:1 　　geetestOptions: {} 　　} 　　} 　　}， 　　计算:{ 　　…mapGetters ([' get_lang ']) 　　}， 　　看:{ 　　get_lang (lang) { 　　让选项=this.geetest.geetestOptions; 　　如果选项。autoRefreshOnLangChange,,this.geetest.geetestObj) { 　　this.initGeetest ({ 　　选项, 　　朗:lang.code 　　}); 　　} 　　} 　　}， 　　方法:{//初始化极验 　　initGeetest(选项){ 　　如果(!选项| | ({}).toString.call(选项)!==(对象对象)){ 　　console.error (“initGeetest方法的参数选择必须是一个对象!”); 　　返回; 　　} 　　让newOptions=对象。分配({},geetestOptions选项); 　　如果(newOptions。产品===暗觥眧 | newOptions。产品===岸ㄖ啤眧 | newOptions。产品===案《?,,! newOptions.area) { 　　console.error(“产品为弹出、定制、浮动时选择参数中必须有地区属性,区域属性值可以css为选择器或dom元素!”); 　　返回; 　　} 　　this.geetest。geetestOptions=newOptions; 　　this._geetestRegist_ (newOptions); 　　}，//重置极验 　　geetestReset (cb) { 　　如果(this.geetest.geetestObj) { 　　this.geetest。geetestSuccessData=https://www.yisu.com/zixun/{}; 　　this.geetest.geetestObj.reset (); 　　如果(typeof cb===昂?{ 　　cb (); 　　} 　　其他}{ 　　console.error(“极验不存在!”); 　　} 　　}，//显示极验弹窗,此方法只有在产品为绑定时才有效 　　geetestShow () { 　　如果(this.geetest.geetestObj) { 　　如果(this.geetest.geetestOptions。产品===鞍蠖ā?{ 　　this.geetest.geetestObj.verify (); 　　其他}{ 　　console.error(“极验的产品值非绑定,无法调用显示!”); 　　} 　　其他}{ 　　console.error(“极验不存在!”); 　　} 　　}，//初始化极验,内部使用 　　_initGeetestInternal_(数据、选择){ 　　让=这个; 　　我们这些年=this.geetest; 　　 　　window.initGeetest ({//以下4个配置参数为必须,不能缺少 　　gt: data.gt, 　　挑战:data.challenge, 　　离线:!数据。成功,//表示用户后台检测极验服务器是否宕机 　　new_captcha:真的,//用于宕机时表示是新验证码的宕机 　　产品:选项。产品,//产品形式,包括:浮动,弹出绑定 　　宽度:options.width, 　　朗:geetestLangMap [options.lang] 　　},函数(captchaObj) { 　　如果(geetest.geetestObj) { 　　尝试{//如果之前已经初始化过了,则线将之前生成的dom移除掉 　　geetest.geetestObj.destroy (); 　　}捕捉(e) { 　　控制台。错误(“极验销毁失败的,e); 　　} 　　} 　　这些年。geetestObj=captchaObj; 　　如果(选项。产品===暗觥眧 |选项。产品===岸ㄖ啤眧 |选项。产品===案《?){ 　　captchaObj.appendTo (options.area); 　　}//为绑定模式时极验加载完成后自动弹出极验弹窗 　　如果选项。汽车展,,选项。产品===鞍蠖ā?{ 　　captchaObj.onReady(()=比;{ 　　captchaObj.verify (); 　　}); 　　} 　　这些年。geetestSuccessData=https://www.yisu.com/zixun/{};//当用户操作后并且通过验证后的回调 　　captchaObj。onSuccess(函数(){ 　　让successData=captchaObj.getValidate (); 　　这些年。geetestSuccessData=successData; 　　控制台。日志(“用户行为验证通过数据的,successData);/* 　　这种方式不可采用,原因,作用域会被缓存 　　如果(typeof选项。回调===昂?{ 　　options.callback (successData); 　　} 　　用户行为验证通过后调用回调函数 　　*/如果(typeof。onGeetestSuccess===昂?{ 　　that.onGeetestSuccess (successData); 　　} 　　}); 　　captchaObj。onError(函数(e) { 　　控制台。错误(“极验出错了”,e); 　　}); 　　控制台。日志(“极验实例”,captchaObj); 　　}); 　　}，//调用接口,获取极验数据 　　_geetestRegist_(选项){ 　　如果(this.geetest.geetestLoading) { 　　返回; 　　} 　　this.geetest。geetestLoading=true; 　　commonApi.getGtCaptcha () 　　不要犹豫(res=比;{ 　　让数据=https://www.yisu.com/zixun/res.data;//提示后台需要控制是否开启极验,因此需要判断使===true & &成功===1才显示极限 　　this.geetest。符号=data.sign; 　　this.geetest。geetestFatched=true; 　　如果(typeof数据。使=="定义" | |(数据。使===true,,数据。成功===1)){ 　　this.geetest。showGeetest=true; 　　其他}{ 　　this.geetest。showGeetest=false; 　　this.geetest。geetestLoading=false;/*//如果极验禁用,则调用onDisableGeetest回调 　　如果(typeof选项。onDisableGeetest===昂?{ 　　options.onDisableGeetest (); 　　} *///如果极验禁用,则调用onDisableGeetest回调 　　如果(typeof。onDisableGeetest===昂?{ 　　this.onDisableGeetest (); 　　} 　　返回 　　} 　　this.geetest。geetestLoading=false; 　　这一点。_initGeetestInternal_(数据、选择); 　　}) 　　.catch ((err)=比;{ 　　控制台。null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

vue项目中极验验证的使用代码示例