Vue集成阿裡雲做滑塊驗證的實踐

Posted on by

前言

滑塊驗證是比較常見的人機鑒別手段，但是自己做一時半會還真搞不出來，想想這玩意還挺難琢磨，怎麼識別是否是人機呢？本文介紹Vue+阿裡雲驗證做出這個小功能。

集成阿裡雲驗證

前端需要什麼

  • appkey
  • scene
  • 後端配合

引入阿裡雲驗證

public/index.html

<head>
  <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
</head>

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      AWSC: 'AWSC',
    },
  }
}

封裝一個驗證組件

思路其實很簡單，功能也單一。

  • 初始化加載阿裡雲驗證控件
  • 可刷新驗證控件

下面說兩個重點

1. 初始化放在mounted，是因為涉及到Dom加載問題，created時Dom並未加載完成會報錯。
2. Watch裡面監聽是否刷新
3.. 記得樣式自定義下

下面開始寫組件
NoCaptcha.vue

<template>
  <div>
    <div id="nc">

    </div>
  </div>
</template>

<script>
export default {
  // 驗證成功後，服務端報錯（如賬號/密碼等錯誤），需要重置滑塊
  props: {
    reload: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ic: '', // noCaptcha實例
    };
  },
  watch: {
    reload: {
      handler(newV) {
        console.log(newV);
        if (newV) {
          this.nc.reset();  // 重置滑塊
        }
      },
    },
  },
  mounted() {
    this.init(); // 初始化方法
  },
  methods: {
    init() {
      const self = this;
      // 實例化nc
      // eslint-disable-next-line no-undef
      AWSC.use('nc', function(state, module) {
        // 初始化
        self.nc = module.init({
          // 您可以在阿裡雲驗證碼控制臺的配置管理頁簽找到對應的appkey字段值，請務必正確填寫。
          appkey: 'FFFF0N00000000005CE9',
          // 您可以在阿裡雲驗證碼控制臺的配置管理頁簽找到對應的scene值，請務必正確填寫。
          scene: 'nc_login',
          // 滑塊渲染的DOM id。
          renderTo: 'nc',
          // 您可以在該回調參數中將會話ID（sessionId）、簽名串（sig）、請求唯一標識（token）字段記錄下來，隨業務請求一同發送至您的服務端調用驗簽。
          success: function(data) {
            data.scene = 'nc_login'
            self.$emit('slideCallback', data);
          },
          // 滑動驗證失敗時觸發該回調參數。
          fail: function(failCode) {
            this.$message(`滑動驗證失敗,失敗編號${failCode}`);
            console.log(failCode);
          },
          // 驗證碼加載出現異常時觸發該回調參數。
          error: function(errorCode) {
            this.$message(`驗證碼加載異常,異常編號${errorCode}`);
            console.log(errorCode);
            self.$emit('slideCallback', {cls:false});
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#nc {
  width: 100%;
  display: contents;
}
/deep/.nc-container #nc_1_wrapper {
  width: 100%;
  height: 36px;
  line-height: 36px;
  #nc_1_n1t,
  #nc_1__bg,
  #nc_1_n1z,
  #nc_1__scale_text,
  .nc-lang-cnt {
    height: 36px;
    line-height: 36px;
  }
}
</style>

使用組件

需要考慮的問題

  • 驗證控件沒加載出來的情況怎麼辦？（例如IE不支持）
  • 運維人員不需要
  • 有用戶名密碼，再去驗證自動調用登錄事件

很簡單驗證控件加載失敗會有個回調，讓後端加個參數，沒加載驗證組件，讓他知道予以通行就好

<template>
  // 其他代碼略
  <NoCaptcha @slideCallback="finishSlide" :reload="reload" />
</template>

<script>
// 其他代碼略
import NoCaptcha from '@/components/NoCaptch.vue';

data() {
  return {
    reload: false,
  }
},
method: {
  // 點擊登錄
  login() {
    // 驗證略
    this.reload = false; // 驗證通過後，重置滑塊設置為false
    // 後端登錄接口
    xx()
    .then(() => {
       // 登錄成功代碼略
    })
    .catch((err) => {
       // 其他代碼略
       this.reload = true; // 需要重置滑塊
       console.log(err || '該用戶無菜單權限，請聯系管理員'); // 錯誤提示
    });
  },
  // 完成滑動
  finishSlide(data) {
    // 按需使用返回值
    console.log('會話ID', data.sessionId)
    console.log('簽名串', data.sig)
    console.log('滑塊請求的token', data.token)
    
     if (data.cls === false) {//驗證加載失敗
        this.loginForm.cls = false
      }

      if (data.sessionId) {//非人機操作
        this.loginForm.scene = data.scene
        this.loginForm.ncToken = data.token
        this.loginForm.sig = data.sig
        this.loginForm.sessionId = data.sessionId
        delete this.loginForm.cls
      }

      if (this.loginForm.username && this.loginForm.password) {//填過用戶名密碼
        this.login()
      }
  },
}
</script>

思考

  • 如果這個控件讓前端自己做或者後端自己做，能實現嗎？
  • 這個滑動驗證機制明白嗎？
  • 這個能實現絕對安全嗎？

PS:我思考瞭一下，前端需要引入阿裡雲的sdk，這個sdk會收集用戶數據。然後滑塊滑動完成後會將這些數據進行分析判斷是否為人機。當然這算法是人傢的機密，畢竟要賺錢的嘛。其實這個滑動算法是可以模擬的，也不是絕對安全，隻是增加瞭一個步驟而已。

到此這篇關於Vue集成阿裡雲做滑塊驗證的實踐的文章就介紹到這瞭,更多相關Vue 滑塊驗證內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：