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这个链接放进去

Verify.vue

这个很重要 官方也说了 

否则在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 

欢迎各位点评