vue項目接入阿里雲智能驗證

首先是官方鏈接 https://help.aliyun.com/document_detail/122767.html?spm=5176.2020520162.0.0.5ca95fb04qNiKh 有一些介紹

1.首先在index.html裏面引入這兩個文件

 2.創建一個組件(只爲動態創建一個script標籤)，然後把//g.alicdn.com/sd/nvc/1.1.112/guide.js這個鏈接放進去

這個很重要 官方也說了 

否則在guide.js裏面會報錯 NVC_Opt is not defined

 3. 在父組件的created裏面調用 

    window.NVC_Opt = {
        //應用類型標識。它和使用場景標識（scene字段）一起決定了智能驗證的業務場景與後端對應使用的策略模型。您可以在人機驗證控制檯的配置管理頁籤找到對應的appkey字段值，請務必正確填寫。
        appkey:'CF_APP_1',
        //使用場景標識。它和應用類型標識（appkey字段）一起決定了智能驗證的業務場景與後端對應使用的策略模型。您可以在人機驗證控制檯的配置管理頁籤找到對應的scene值，請務必正確填寫。
        scene:'nvc_register_h5',
        //聲明二次驗證需要渲染的目標元素ID。
        renderTo:'#captcha',
        //業務鍵字段，可爲空。該參數可用於上線前測試，請按照代碼集成後測試部分中的方法配置該字段值。
        trans: {"key1": "code0","nvcCode":200},
        //當喚醒刮刮卡驗證作爲二次驗證時，配置需要刮出的兩個elements的圖片資源。
        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',
        //當喚醒刮刮卡驗證作爲二次驗證時，配置刮動時的前景圖像（僅支持base64數據流）。
        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", '反饋問題']
            }
        }
    }

 4.在需要用到的地方去觸發

var ic = new smartCaptcha({
              //聲明智能驗證需要渲染的目標元素ID。
              renderTo: '#sc',
              //智能驗證組件的寬度。
              width: 300,
              //智能驗證組件的高度。
              height: 42,
              //智能驗證組件初始狀態文案。
              default_txt: '點擊按鈕開始智能驗證',
              //智能驗證組件驗證通過狀態文案。
              success_txt: '驗證成功',
              //智能驗證組件驗證失敗（攔截）狀態文案。
              fail_txt: '驗證失敗，請在此點擊按鈕刷新',
              //智能驗證組件驗證中狀態文案。
              scaning_txt: '智能檢測中',
              //前端智能驗證通過時會觸發該回調參數。您可以在該回調參數中將請求標識（token）、會話ID（sessionid）、簽名串（sig）字段記錄下來，隨業務請求一同發送至您的服務端調用驗籤。
              success: function(data) {
                console.log(NVC_Opt.token)
                console.log(data.sessionId);
                console.log(data.sig);
                //這裏需要用NVC_Opt.token、data.sessionId、data.sig拿去跟後臺校驗 最後處理自己的業務邏輯
              },
        });
        ic.init();

 5.目前沒有看到驗證成功後刪除動態創建的dom元素的api 

歡迎各位點評