vue 集成阿里云滑动验证

这里用的是项目地址需要换一下哦

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

getAliKey 是获取接口key的哦，自行换成自己的哦。
let res = await this.getAliKey();
            if (res.data.afs) {
                this.accesskey = res.data.afs.accesskey;
                this.scene = res.data.afs.scene;
            } 
            let that = this;
            var nc_token = [this.accesskey, (new Date()).getTime(), Math.random()].join(":");
            const NC_Opt = {
                // id的值
                renderTo: "#nc",
                appkey: that.accesskey,
                scene: that.scene,
                token: nc_token,
                customWidth: '100%', // 滑动条的宽度
                trans: { key1: 'code0' }, // //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
                elementID: ['usernameID'],
                is_Opt: 0,
                language: 'cn', // 中文
                isEnabled: true,// 是否启用。一般情况，保持默认值（true）即可
                timeout: 3000,// 内部网络请求的超时时间。一般情况建议保持默认值（3000ms）。
                times: 5,// 允许服务器超时重复次数，默认5次。超过重复次数后将触发报错。
                callback: function(data) {
                // 前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
                // 在这里可以拿到返回的数据
                    that.Token = nc_token;
                    that.SessionId = data.csessionid;
                    that.Sig = data.sig;
                }
            }
            this.nc = new noCaptcha(NC_Opt)
            // 用于自定义文案。详细配置方法请参见自定义文案与多语言文档。
            this.nc.upLang('cn', {
                _startTEXT: "请按住滑块，拖动到最右边",
                _yesTEXT: "验证通过",
                _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
                _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
            })