zoukankan      html  css  js  c++  java
  • 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,
        //刮刮卡配置项
         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
    }
  • 相关阅读:
    【思考题】任意长度有理数乘法运算
    【排序】表插入排序算法(C语言版)
    JAVA中的反射
    JAVA中关于日期的最常见的操作
    Hibernate:基于HQL实现数据查询
    Hibernate与Mybatis对比
    使用idea实现SSM框架整合
    基于maven搭建hibernate运行环境
    MYSQL中的存储过程
    MySQL 索引
  • 原文地址:https://www.cnblogs.com/xunhuang/p/9089507.html
Copyright © 2011-2022 走看看