2021新教程-阿里云滑动验证集成到vue项目的方法

首先去阿里云的云盾

点击配置管理，新增配置，按照自己的需要配置一下：

点击下一步，就可以看到这样的页面

这里面有几个关键点：

1. 相关资源js文件

<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>

可以在main.js里面引用，不过不建议这样做，一般是把里面的代码复制出来，单独建一个captcha.js文件，然后把代码丢进captcha.js里面

2. 生成滑动验证的js代码

其中xxxxxxx就是上一页配置以后生成的appkey:

var nc_token = ["xxxxxxx", (new Date()).getTime(), Math.random()].join(':');
        var NC_Opt = 
        {
            renderTo: "#your-dom-id",
            appkey: "xxxxxxx",
            scene: "nc_login",
            token: nc_token,
            customWidth: 300,
            trans:{"key1":"code0"},
            elementID: ["usernameID"],
            is_Opt: 0,
            language: "cn",
            isEnabled: true,
            timeout: 3000,
            times:5,
            apimap: {
                // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                // 'get_captcha': '//b.com/get_captcha/ver3',
                // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
                // 'get_img': '//c.com/get_img',
                // 'checkcode': '//d.com/captcha/checkcode.jsonp',
                // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
                // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
                // 'umid_serUrl': 'https://g.com/service/um.json'
            },   
            callback: function (data) { 
                window.console && console.log(nc_token)
                window.console && console.log(data.csessionid)
                window.console && console.log(data.sig)
            }
        }
        var nc = new noCaptcha(NC_Opt)
        nc.upLang('cn', {
            _startTEXT: "请按住滑块，拖动到最右边",
            _yesTEXT: "验证通过",
            _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
            _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
        })

这段代码一般写在组件的mounted钩子函数里

3.最后需要一个挂载点，用来挂在生成的滑动验证组件

<div id="your-dom-id" class="nc-container"></div> <!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->

注意：其中id必须和2中的renderTo字段保持一致，不然会找不到挂载点：

最后要注意，如果是vue项目开启了ESlint，集成滑动验证码可能会报错，开发时候可以先把ESlint关了：

看看效果: