验证码的实现-图片拼图-VUE

个人解决方案，欢迎批评指正。

在网络上找了几款别人封装好的插件，最后选用vue-puzzle-vcode来实现。具体使用：

npm install vue-puzzle-vcode

代码：

详细用法参考：官方文档

由于这个是纯前端的实现，没有后端校验模块，所以我做了修改。

前后端校验的思路：

后端生成图片拼图位置的X、Y坐标（pinX、pinY），并存入session中，然后将值传给前端。前端以此做相应验证的绘制。然后用户操作后，前端获取用户移动到的最终X坐标（newX）判断验证成功，再将用户移动到的最终X坐标传入后端，后端作为校验依据。

vue-puzzle-vcode插件是随机生成拼图位置的X、Y坐标（pinX、pinY）的，我将组件新增输入参数pinXY=[pinX,pinY]。

修改vue-puzzle-vcode源码app.vue,新增传入参数pinXY，然后把pinX和pinY的赋值部分传修改成pinXY[0] pinXY[1]。最后，新增onSuccess的传出值，把this.newX加上去。然后将this.newX和校验距离x丢到后端接口，后端就以像前台一样的校验方式去通过this.newX计算x，进行校验。

image

/**
 * //后端校验公式  

 * //session值：pinX pinY

 * //传入值newX

 *const startWidth=50

 * const startX=0

 * 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 则成功校验

 */

修改完app.vue记得将cmd运行路径改为vue-puzzle-vcode下，npm install后，在npm run build 重新生成dist下面的文件，才能生效哦。

修改后引用组件：