vue中集成阿里云滑块验证

1.在index.html页面中引入js

    <!--适用于主要访问来自中国内地地区用户的业务场景-->
    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
    <!--适用于主要访问来自非中国内地地区用户的业务场景-->
    <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"> 
    </script> -->

2.在vue.config.js中添加配置

configureWebpack: {
    externals: {
      'NoCaptcha': 'NoCaptcha'
    }
  }

3.在页面引入

import NoCaptcha from 'NoCaptcha'

<div id="__nc">
     <div id="nc"></div>
</div>

     var nc_token = ['你的appkey', (new Date()).getTime(), Math.random()].join(':');
      let nc = NoCaptcha.init({
          //声明滑动验证需要渲染的目标元素ID。
          renderTo: '#nc',
          //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
          appkey: '你的appkey', 
          //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
          scene:'你的scene',
          //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
          token: nc_token,
          //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
          trans: {"key1": "code0"},
          //语言，默认值为cn（中文）。HTML5应用类型默认支持简体中文、繁体中文、英文语言。
          language: "cn",
          //内部网络请求的超时时间。一般情况建议保持默认值（10000ms）。
          timeout: 10000,
          //允许服务器超时重复次数，默认5次。
          retryTimes: 5,
          //验证通过后，验证码组件是否自动隐藏，默认不隐藏（false）。
          bannerHidden:false,
          //是否默认不渲染，默认值false。当设置为true时，不自动渲染，需要自行调用show方法进行渲染。
          initHidden:false,
          //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
          callback: (data)=> {
            /*  前端滑动验证通过时会触发该回调参数。
            您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，
            随业务请求一同发送至您的服务端调用验签。 */
            // window.console && console.log(nc_token)
            // window.console && console.log(data.csessionid)
            // window.console && console.log(data.sig)
            //验证通过 发送验证码
            this.sendVerify(data);
          },
          error: function () {
            //console.log(s,'********失败***************')
          }
      });
      NoCaptcha.setEnabled(true);
      nc.reset();//请务必确保这里调用一次reset()方法
      NoCaptcha.upLang('cn', {
        'LOADING':"加载中...",//加载
        'SLIDER_LABEL': "请向右滑动验证",//等待滑动
        'CHECK_Y':"验证通过",//通过
        'ERROR_TITLE':"非常抱歉，这出错了...",//拦截
      });