vue 阿里雲的滑動驗證

網址：https://help.aliyun.com/document_detail/121898.html?spm=a2c4g.11186623.6.559.c58f2430eBmuaf

可直接使用

<template>
  <div>
    <div id="__nc" style="margin-left:auto;margin-right:auto;width:80%;height:100px;padding-top:100px;">
        <div id="nc"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        nc: null
      };
    },
    mounted() {
      let that = this;
      var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
      let nc = NoCaptcha.init({
        renderTo: '#nc',
        // appkey: this.appkey,//這個參數需要后台返回 應用類型標識
        // scene: this.scene,//    使用場景標識
        // token: this.token,//滑動驗證碼的主鍵
        appkey: 'CF_APP_1',
        scene: 'register',
        token: nc_token,
        trans: {"key1": "code200"},
        elementID: ["usernameID"], //通過Dom的ID屬性自動填寫trans業務鍵，可為空。為便於線上問題的排查
        is_Opt: 0, //是否自定義配置底層采集組件。如無特殊場景 使用默認值（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,  //驗證通過之后默認隱藏。默認值為false
        initHidden: false, //是否默認不渲染。默認值為false。當設置為true時，不自動渲染，需要自行調用show方法進行渲染。
        callback: function (data) {
         /*  前端滑動驗證通過時會觸發該回調參數。
          您可以在該回調參數中將請求標識（token）、會話ID（sessionid）、簽名串（sig）字段記錄下來，
          隨業務請求一同發送至您的服務端調用驗簽。 */
          console.log(data,this,'***********************');
          console.log(data.sig,data.csessionid,nc_token,'***********參數************');
          // that.verify_token = this.token;
          // that.sessionid = data.csessionid;
          // that.sig = data.sig;
          window.console && console.log(nc_token)
          window.console && console.log(data.csessionid)
          window.console && console.log(data.sig)
          // var params = {
          //   sign: data.sig,
          //   sessionId: data.csessionid,
          //   token: nc_token,
          //   scene: scene
          // };
          // axios.post("/test/test1", params).then(response => {
          //   console.log(response);
          // });
        },
        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': "驗證碼錯誤，請重新輸入"//驗證碼輸錯時的提示
      });
      this.nc = nc;
    }
  };
</script>
<style lang="scss">
/* 滑動條高度、邊框、背景色等 */
._nc .stage1 .slider {
    height: 52px;
    border-radius: 26px;
    box-shadow: 0 0 3px #999;
    background-color: #ddd;
}
/* 滑動條 */
._nc .stage1 .track div {
    border-radius: 26px;
    color: #fff;
}
/* 滑動條背景色-正常 */
._nc .stage1 .bg-green {
    background-color: #78c430;
}
/* 滑動條背景色-失敗 */
._nc .stage1 .bg-red {
    background-color: #ff5500;
}
._nc .stage1 .button {
  border-radius: 50%;
}
/* 各個狀態的icon */
// 等待滑動："icon iconfont icon-slide-arrow"
// 驗證出錯："icon no iconfont icon-close"
// 驗證通過："icon yes iconfont icon-ok"

// 攔截狀態
._nc .stage3 .title {
    font-size: 20px;  
    color: #777;
    width: 100%;
}
/* 圖標 */
// ._nc .icon {
//     width: 32px;
//     height: 32px;
//     background-image: url("//g.alicdn.com/sd/nch5/icons.png?v=2");
// }
// ._nc .stage3 .menu.refresh .icon {
//     background-position: -128px 0;
// }
// ._nc .stage3 .menu.feedback .icon {
//     background-position: -160px 0;
// }
// /* 刷新鏈接 */
// ._nc .stage3 .menu.refresh {
//     border-right: 2px solid #ccc;
// }
</style>