vue 集成阿里雲滑動驗證

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

　　

<template>
  <div>
    <!--No-Captcha渲染的位置，其中 class 中必須包含 nc-container-->
    <div
      id="slide"
      class="nc-container"
    />
  </div>
</template>
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
<script>
export default {
  data() {
    return {
      nc:'' // noCaptcha實例的值
    }
  },
  mounted() {
    // 初始化方法
    this.init()
  },
  methods: {
    init() {
      const self = this
      // 生成的隨機token
      const nc_token = [
        'FFFF0N00000000009699', // appkey(自己填寫)
        new Date().getTime(),
        Math.random()
      ].join(':')
      // 參數
      const NC_Opt = {
        // id的值
        renderTo: '#slide',// 聲明滑動驗證需要渲染的目標元素ID
        appkey: 'FFFF0N00000000009699', // appkey(自己填寫)
        scene: 'nc_login', // 場景值(當前pc登陸) 滑動驗證碼的主鍵，請勿將該字段定義為固定值。確保每個用戶每次打開頁面時，其token值都是不同的。系統默認的格式為：”您的appkey”+”時間戳”+”隨機數”。
        token: nc_token, // 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）字段記錄下來，隨業務請求一同發送至您的服務端調用驗簽。
          // 在這里可以拿到返回的數據
          const param = {
            token: nc_token,
            sessionId: data.csessionid,
            sig: data.sig,
            scene: 'nc_login'
          }
          // 傳給父組件  這里我是封裝的組件 把值傳出去了 然后請求接口
          self.$emit('handleSlideAly', param)
        }
      }
      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>'
      })
    },
    // 重置方法  api 
    reset(){
      this.nc.reset()
    }
  }

}
</script>

<style lang="less" scoped>
/deep/.nc-container .nc_scale {
  height: 42px;
}
/deep/.nc-container .nc_scale span {
  line-height: 42px;
  height: 42px;
}
</style>

　　參考鏈接：

滑動驗證-功能概述：https://help.aliyun.com/document_detail/121893.html?spm=5176.2020520162.0.0.4c4c5fb0Yh1s6S

 

前端接入代碼集成：https://help.aliyun.com/document_detail/121963.html?spm=5176.2020520162.0.0.4c4c5fb0Yh1s6S