美文网首页
Vue引入阿里云滑块验证

Vue引入阿里云滑块验证

作者: 拾壹丶ban | 来源:发表于2019-11-08 16:00 被阅读0次

    1.在index.html中引入相关js文件

    <!DOCTYPE html>
    <html>
    <head>
    ...<!--一些配置-->
    </head>
    <body>
    <div id="app"></div>
    
    <!-- built files will be auto injected -->
    </body>
    <!--引入js文件,注意t的版本,不同t的版本操作不同-->
    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
    
    </html>
    

    2.在组件中使用

         <div id="captcha"  class="captcha"></div>
    

    3.初始化

            let that = this;
            let nc = NoCaptcha.init({
              renderTo: '#captcha',
              appkey: this.appkey,//这个参数需要后台返回
              scene: this.scene,//这个也是
              token: this.token,//这个同理
              trans: {"key1": "code200"},
              // elementID: ["usernameID"],
              is_Opt: 0,
              language: "cn",
              timeout: 10000,
              retryTimes: 5,
              errorTimes: 5,
              inline: false,
              apimap: {
                // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
              },
              bannerHidden: false,
              initHidden: false,
              callback: function (data) {
                console.log(data);
                that.verify_token = this.token;
                that.sessionid = data.csessionid;
                that.sig = data.sig;
              },
              error: function (s) {
                console.log(s)
              }
            });
            NoCaptcha.setEnabled(true);
            nc.reset();//请务必确保这里调用一次reset()方法
            NoCaptcha.upLang('cn', {
              'LOADING': "加载中...",//加载
              'SLIDER_LABEL': "请向右滑动验证",//等待滑动
              'CHECK_Y': "验证通过",//通过
              'ERROR_TITLE': "非常抱歉,这出错了...",//拦截
              'CHECK_N': "验证未通过", //准备唤醒二次验证
              'OVERLAY_INFORM': "经检测你当前操作环境存在风险,请输入验证码",//二次验证
              'TIPS_TITLE': "验证码错误,请重新输入"//验证码输错时的提示
            });
    

    相关文章

      网友评论

          本文标题:Vue引入阿里云滑块验证

          本文链接:https://www.haomeiwen.com/subject/zkqwbctx.html