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
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM