最近做了一个包含投票功能的活动,投票的时候为了防止恶意刷票加入了阿里云的无痕验证,下面给出前端代码逻辑:
初始化配置:
//无痕验证 window.NVC_Opt = { //无痕配置 && 滑动验证、刮刮卡通用配置 appkey:'', //阿里云平台账户提供 scene:'', isH5:true, popUp:true, renderTo:'#captcha', nvcCallback:function(data){ var phone = $('.upw-telephone').val(); var params = 'a='+data+'&phone='+phone+'&activityDetailId='+Request.activityDetailId; yourRegisterRequest(params,countDown) //次方法调用后端发送验证的接口,当二次验证通过后需再次执行 // data为getNVCVal()的值,此函数为二次验证滑动或者刮刮卡通过后的回调函数 // data跟业务请求一起上传,由后端请求AnalyzeNvc接口,接口会返回100或者900 }, trans: {"key1": "code0","nvcCode":400}, language: "cn", //滑动验证长度配置 customWidth: 300, //刮刮卡配置项 200, height: 100, elements: [ '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png', '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png' ], bg_back_prepared: '//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png', bg_front: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABQCAMAAADY1yDdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURefk5w+ruswAAAAfSURBVFjD7cExAQAAAMKg9U9tCU+gAAAAAAAAAIC3AR+QAAFPlUGoAAAAAElFTkSuQmCC', obj_ok: '//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png', bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png', obj_error: '//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png', bg_back_fail: '//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png', upLang:{"cn":{ _ggk_guide: "请在屏幕上滑动,刮出两面盾牌", _ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧", _ggk_loading: "加载中", _ggk_fail: ['呀,盾牌不见了<br/>请', "javascript:NoCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'], _ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:NoCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'], _ggk_net_err: ['网络实在不给力<br/>请', "javascript:NoCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'], _ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:NoCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'] } } } //阿里云无痕验证文档建议js后边增加时间戳 var stamp = new Date().toLocaleDateString().replace(/-/g,'')+new Date().toTimeString().split(':')[0]; var script = document.createElement('script'); script.setAttribute('type','text/javascript'); script.setAttribute('src','http://g.alicdn.com/sd/nvc/1.1.112/guide.js?'+stamp); document.documentElement.appendChild(script)
无痕验证函数,后台接收阿里云无痕验证返回的code,再原数返回给前端,前端通过code判断验证状态,每个code值对应的状态文档有介绍。若code为400,唤起滑动验证,600唤起刮刮卡:
function yourRegisterRequest(params,func){ var callbackName = ('jsonp_' + Math.random()).replace('.', '') params += '&callback=' + callbackName var o_scripts = document.getElementsByTagName("script")[0] var o_s = document.createElement('script') o_scripts.parentNode.insertBefore(o_s, o_scripts); //您注册请求的业务回调 window[callbackName] = function(json) { if(json.code == 400) { //唤醒滑动验证 getNC().then(function(){ NoCaptcha.upLang('cn', { 'LOADING':"加载中...",//加载 'SLIDER_LABEL': "请向右滑动验证",//等待滑动 'CHECK_Y':"验证通过",//通过 'ERROR_TITLE':"非常抱歉,这出错了...",//拦截 'CHECK_N':"验证未通过", //准备唤醒二次验证 'OVERLAY_INFORM':"经检测你当前操作环境存在风险,请输入验证码",//二次验证 'TIPS_TITLE':"验证码错误,请重新输入"//验证码输错时的提示 }); _nvc_nc.reset(); }) } else if (json.code == 600) { //唤醒刮刮卡 getSC().then(function(){}) } else if (json.code == 100 || json.code == 200) { //验证成功 func(json); }else if(json.code == 300){ makeToast("抱歉,验证码获取已超过当天限制") } else if (json.code == 800 || json.code == 900) { //直接拦截 makeToast('本次大赛参与人数众多,请稍候尝试~') }else{ makeToast(json.msg) } } o_s.src = _url + '接口地址?' + params }