vue-puzzle-vcode-dd

Vue 拼图人机验证、右滑拼图验证
用vue-puzzle-vcode,在vue-puzzle-vcode的基础上新增后端校验。

安装

  npm install vue-puzzle-vcode-dd --save

使用

  import Vcode from "vue-puzzle-vcode-dd";
 <Vcode
                    :show="isShow"
                    :pinXY="pinXY"
                    :canvasWidth="canvasWidth"
                    :canvasHeight="canvasHeight"
                    @onSuccess="onSuccess"
                    @onClose="onClose"
                    :imgs="imgs_arr"
                  />

例子

<template>
 <Vcode
                    :show="isShow"
                    :pinXY="pinXY"
                    :canvasWidth="canvasWidth"
                    :canvasHeight="canvasHeight"
                    @onSuccess="onSuccess"
                    @onClose="onClose"
                    :imgs="imgs_arr"
                  />
  <button @click="onSubmit">登录</button>
</template>

<script>
    import Vcode from "vue-puzzle-vcode-check";
  export default {
    data(){
      return {
        isShow: false, // 验证码模态框是否出现
        pinXY:[110,30],//后端传来拼图的起始坐标
        imgs_arr:[] //不传就随机图片
        canvasWidth:310,//默认310
        canvasHeight:160,//默认160
      }
    },
    components:{
      Vcode
    },
    methods:{
      onSubmit(){
        this.isShow = true;
      },
      // 用户通过了验证
      // 用户通过了验证
      onSuccess(rangeX, newX,startX) {
        console.log('验证码验证成功')
        console.log(rangeX)
        console.log(newX)
        console.log(startX)
        //把msg和newX传入后端校验
        // this.isShow = false; // 通过验证后，需要手动隐藏模态框
        /**
         * //后端校验公式  
         * //session值：pinX pinY
         * //传入值newX
         *const startWidth=50

         * const canvasWidth=310
         * var  w = startWidth + newX - startX;
         * var styleWidth=w < 50 ? 50 : w > this.canvasWidth ? this.canvasWidth : w;
         *       var x = Math.abs(
                 pinX -
                  (styleWidth - 50) +
                  20 * ((styleWidth - 50) / (canvasWidth - 50)) -
                  3
              );
              x<10 且等于前端传入的x 则成功校验
         */
        //签到成功，从后端获取签到的日期
        this.isShow = false;
      },
      // 用户点击遮罩层，应该关闭模态框
      onClose(){
        this.isShow = false;
      }
    }
  }
</script>

##后端校验公式

   
  //session值：pinX pinY
  //传入值 newX  startX
 const startWidth=50
  const canvasWidth=310
  var  w = startWidth + newX - startX;
  var styleWidth=w < 50 ? 50 : w > this.canvasWidth ? this.canvasWidth : w;
        var x = Math.abs(
         pinX -
          (styleWidth - 50) +
          20 * ((styleWidth - 50) / (canvasWidth - 50)) -
          3
      );
      x<10 且等于前端传入的x 则成功校验
 

参数

字段	类型	默认值	说明
show	Boolean	false	是否显示验证码弹框
canvasWidth	Number	310	主图区域的宽度
canvasHeight	Number	160	主图区域的高度
imgs	Array	null	自定义图片，见下方例子
successText	String	"验证通过！"	验证成功时的提示文字
failText	String	"验证失败，请重试"	验证失败时的提示文字
sliderText	String	"拖动滑块完成拼图"	下方滑动条里的文字
pinXY	String	"拼块区域的位置"	传入拼块区域的区域位置[0, 0]，这个值后端生成传入

事件

事件名	返回值	说明
onSuccess	偏差值	验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值px
onFail	偏差值	验证失败时会触发，返回值同上
onClose	null	用户点击遮罩层的回调

自定义图片

<template>
  <Vcode :imgs="[Img1, Img2]" />
</template>

<script>
import Img1 from '~/assets/img1.png';
import Img2 from '~/assets/img2.png';

export default {
  data(){
    return {
      Img1,
      Img2
    }
  }
}
</script>

• 也可以是网络图片完整URL路径，但注意图片跨域问题

说明

• 当不传递imgs字段或图片加载出错时，会自动生成随机图片
• 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框