vue滑块验证，原理，demo

全新人机验证方式，高效拦截机器行为，业务安全第一道防线。
互联网50%以上的流量都来自机器，行为验证本质上是利用生物行为特征模型进行人机识别，用在注册登录、防刷红包优惠券、数据反爬等各种调用接口的场景。
滑动验证码对机器的判断，不只是完成拼图，前台用户是看不见的——后台针对用户产生的行为轨迹数据进行机器学习建模，结合设备指纹信息、IP风险、访问频率、地理位置、历史记录等多个维度信息，快速、准确的返回人机判定结果。
所以滑块结束后，会把相应的信息以字段拼接的形式，发送给后台校验，后台得出一个结果后返回前台，是不是允许继续。

vue上使用demo1，luosimao人机验证，免费

1.先封装一个组件ValidateCaptcha，供引入使用
<template>
  <div class="l-captcha" data-site-key="e11777fac0ab293290c12b91484c7a4f" data-callback="getResponse" data-width="100%"></div>
</template>
<script>
export default {
  name: 'validateCaptcha',
  methods: {
    dynamicLoadJs: function (url, callback) {
      var head = document.getElementsByTagName('head')[0]
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = url
      if (typeof callback === 'function') {
        script.onload = script.onreadystatechange = function () {
          if (
            !this.readyState ||
            this.readyState === 'loaded' ||
            this.readyState === 'complete'
          ) {
            callback()
            script.onload = script.onreadystatechange = null
          }
        }
      }
      head.appendChild(script)
    }
  },
  created () {
    const self = this
    this.dynamicLoadJs('//captcha.luosimao.com/static/dist/api.js')
    window.getResponse = (resp) => {
      var els = document.getElementsByName('luotest_response')
      if (els.length === 1 && els[0].value === resp) {
        self.$emit('getValidateRes', resp)
      } else {
        LUOCAPTCHA && LUOCAPTCHA.reset()
      }
    }
  }
}
</script>

2.使用地方调用
<template>
  <div>
    <el-form label-width="90px" :model="formLabelAlign" style="width: 500px">
      <el-form-item label="用户名">
        <el-input v-model="formLabelAlign.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formLabelAlign.password"></el-input>
      </el-form-item>
      <el-form-item label="滑动验证">
        <validate-captcha @getValidateRes="getValidateRes"></validate-captcha>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ValidateCaptcha from '@/components/captcha/validateCaptcha'
import axios from 'axios'

export default {
  name: 'captcha',
  components: { ValidateCaptcha },
  data () {
    return {
      formLabelAlign: {
        username: '',
        password: '',
        validateToken: ''
      }
    }
  },
  methods: {
    getValidateRes: function (val) {
      const url = this.API + '/site_verify'
      axios.post(url, {
        api_key: '98081c00e21a9dd1aafa71521373d02f',
        response: val
      }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

2.可以直接使用vue-puzzle-vcode插件，用法基本一样。