h5调用阿里云无痕验证，前端代码逻辑-程序员宅基地

最近做了一个包含投票功能的活动，投票的时候为了防止恶意刷票加入了阿里云的无痕验证，下面给出前端代码逻辑：

初始化配置：

//无痕验证
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,
    //刮刮卡配置项
    width: 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
}