前后端滑块校验

标签：滑块前后 trackData 校验 captcha background tianai data

前端

1.创建一个滑块组件slider

点击查看代码

<template>
    <div class="slider">
      <div class="mask">
        <div class="container">
          <div class="title">
            <div class="text">
              <span>请完成下列验证后继续</span>
            </div>
            <div class="button-group">
              <img
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAE2UlEQVRoQ+1YXWwUVRT+zsw2Qktn1ljatEjjD+4WJILpg0rE4ItGn0QMyGMTE/kJTUwFElt2ZmopQWhIMNjyRKIPiH/hScXEiJEgL/4mamcwUSG2UCvuzAJt7e4cc6ddFaTMHTq70qTztnvPPef7zt899xJm+EczHD9mCfzfEZyNQNwRaD7IFSPnLy/FbZWnv99MF8P033QRSFvuDmbuJOBL20w2zzwCpnuEwWtnLIGU6X4O8IMEHLXN5OqyRcBgVg7vzK1AwX+KGM0ANQDcwAQVwAVi+oWAU6Ti46Vp7djba6lwLXBp0/2VwQ0getUx9NaSE1h1iOcMns21ss9tANeGGRTrBDrHCnrnzNV6vt1Kl4p7RAHnBr1RgBVFUbb2Z7S9YfqmVcRNVm6Nj8I+MBYGwAiXmHFMIXzkg85UkDpQQD7BwN0M3AWfloGwGsy3FIlARYu9Q/9Q/G7aNXKHPzb2U7CmYJ2dSb5VEgLMTGkr1wX4LwUGiM4T2Kpv1A8db6HR6xm9vzs3f2S88JwPbAZjAYgKBN5iG8nexV25Rwr5wqdiv5qgh37o0E/FTkCAb+r0DjPzukkv9qnzta0yPfvfYB7Yz9ofF9xDAJ4W/ytE+3wVXyHPrwd651YssLdXDcROIGV6O4XnCZQHcavw3PWMLOn0VvrghUQ8xJw4n1AxtPiequFiETdZXpsP3g1mlUAnGbyCiMafzWhzLCI/VgJBznPhncl83xQGvvkgV14852WZueJKIOSD8DuAIYIgRrcCvLwoQ8DPtpm8Mwz8RAZIfqLbDJxxHVGwBOqzTX2jzNa06R5gQjNNdKhaZlSF76MTjqmvDJeLQCDd6W1j398tCjZRoy2KmvNFMPft4aqx0dFahf6s85kEoVpivw5Mt4v0AagSRH2OofXERiA4pCxvUPR5IoSmjozhuGSkUijV5T2MvP+Z6PP1jXpNWKuMC5yMHjkCVnYvGG0A3nPM5BoZxeWSkSKQNrOfMLBKIWzoN5IHywVOxo4kAddmcApETzqG/oGM4huVEfX2puVZTHAcQ38jTI8kgWyOgXkVSmL5d5l534Qpnc76vbvcReNjfJqAy7aZDG25Nx+BzovLxv3810TI2UZSC3OGJIHypVDKcp8A8/sEcmxTT8dEoHxF3GRln/cZfQQct83ko7EQSJWxjabM7LvBhErocYzki/EQKNNBFtzuzrjDwbyUUFY6HdqJWAiUa5RIW9mNzHgNoKH1hlYf6zgd1zA3lUeXHOB5+WHvRzDXkaJstzPaK2Hev/FxmqjXNvRNMgZkZdKm28vgDSCcbWjUU7LzllQbLYK44kKjYKOdSfbJArye3D+pI66W6jP9RrUoZKkvEgGhMW25XczcHlwpFd4yXRICPJj2MzgBKN2OqbVLIZ8UikzgP5d6ol61RtsW9YIjcr7wm7cnSJvgYYOO9Ge09UTEJSUglE+SeFlEIjAW4VllslW2MMgQBTsBVum2jeqOqOAjFfG1vCLzsCX2jXOhQQE3+ozHiPD43/diwlkF6gtRcv5qHJFT6GoFN/K0KPo8KdRTv7B6v2y3mSqtpk2gqHiqx92JdRoAeIAJX0BVjq5vrz4pc0jJ1EJsBGSMlUJmlkApvBpF52wEonirFLKzESiFV6PonI1AFG+VQvYvqQFST/EC5cgAAAAASUVORK5CYII="
                @click="reset"
              />
              <img
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAB3klEQVRoQ+2Yy0oEMRBFz/hABf0Gda2gO9349W50p6Br9RsUVHxS0JEwZCaV5EZp7IFedbpyT91KUpMZI//NRq6fCeCvHZwcmBxozMC/KqFV4BP4akya53Ob68Mz0OvAPrALvAA3wJMneMWYbeAQ2AQegLtcDA+AZeMsCvQGXHeAMPFHwHo013nOCQ+AjTkZshJiqyFS4s3ty1zJegBMtE1wDKxF2XkHrgROpMRbbHP5UVFCIUYPiCbxJszrQA+IZvE1AKpyWuSmq2zisip1QOGETHytAy0Q8nVU60AOIlUKcvGtDpRA7AyHlHwbbnUghpg/RcNebmPsnVy8yoEchL3vIl4NELbYeSfiXU91ev/EVJVQLDJ1QNl7ufgeDljM1IINAMUHlbIXysVaJj58627SPJOpHUhl3tpu+8U9vhRCtQYWibeSCdtoFwgFwDLx4a+npPNMlVUrgEd87pxoWtgtACXiu0HUAtSI7wJRA9AiXg5RCqAQL4UoAVCKl0F4AXqIl0B4AGzMKbAR7cO/cbH1ClwoLrZGf7Void8bnmfgVnAbt6hXsxP7ANgC7odnaV/nKaEQYGW4Xvc2ii3j3HOVALQI6vbtBNAttc7AkwPORHUbNjnQLbXOwKN34BvKiqMxJwSPZAAAAABJRU5ErkJggg=="
                @click="close"
              />
            </div>
          </div>
          <div class="img">
            <div class="backgroup-img">
              <img
                class="inner-bg-img"
                :src="backgroupImg"
              />
            </div>
            <div
              class="move-img"
              :style="{left: `${moveX}px`}"
            >
              <img
                class="inner-mv-img"
                :src="moveImg"
              />
            </div>
          </div>
          <div class="slide">
            <div
              class="slider-mask"
              :style="{width: `${blcokLeft}px`}"
            >
              <div
                class="block"
                ref="block"
                @mousedown="start"
                :style="{left: `${blcokLeft}px`}"
              >
                <span class="yidun_slider_icon"></span>
              </div>
            </div>
          </div>
          <div
            class="loading"
            v-if="loading"
          >
            <span>loading...</span>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  // =========================================
  // 父组件需要提供的方法 名称
  // =========================================
  
  /**
   * 获取滑块图片方法
   */
  const GET_IMG_FUN = "getImg";
  /**
   * 校验滑块图片方法
   */
  const VALID_IMG_FUN = "validImg";
  /**
   * 滑块窗口关闭事件监听
   */
  const CLOST_EVENT_FUN = "close";
  
  export default {
    data() {
      return {
        /**滑块背景图片 */
        backgroupImg: "",
        /**滑块图片 */
        moveImg: "",
        /**是否已经移动滑块 */
        startMove: false,
        /**滑块移动距离 */
        blcokLeft: 0,
        /**开始滑动的x轴 */
        startX: 0,
        startY: 0,
        /**划过的百分比 */
        movePercent: 0,
        /**验证码唯一ID */
        uuid: "",
        /**滑块移动的x轴 */
        moveX: 0,
        /** 加载遮罩标识 */
        loading: false,
        // 滑动轨迹滑动时间等数据
        trackData: {
            bgImageWidth: 0,
            bgImageHeight: 0,
            sliderImageWidth: 0,
            sliderImageHeight: 0,
            startSlidingTime: null,
            entSlidingTime: null,
            trackList: []
        }
      };
    },
    props: {
      // 是否开启日志， 默认true
      log: {
        type: Boolean,
        required: false,
        default: true
      }
    },
    mounted() {
      this.getImg();
    },
    methods: {
      /**
       * 打印日志
       */
      printLog(msg, ...optionalParams) {
        if (this.log) {
          if (optionalParams && optionalParams.length > 0) {
            console.info(
              `滑块验证码[${msg}]`,
              optionalParams.length === 1 ? optionalParams[0] : optionalParams
            );
          } else {
            console.info(`滑块验证码[${msg}]`);
          }
        }
      },
  
      /**
       * 获取滑块图片
       */
      getImg() {
        this.loading = true;
        this.$emit(GET_IMG_FUN, data => {
          this.printLog(GET_IMG_FUN, data);
          this.loading = false;
          if (!data) return;
          console.log("data", data);
  
          this.backgroupImg = data.backgroundImage;
          this.moveImg = data.templateImage;
          this.uuid = data.captchaKey;
          this.trackData.bgImageWidth = data.backgroundImageWidth
          this.trackData.bgImageHeight = data.backgroundImageHeight
          this.trackData.sliderImageWidth = data.templateImageHeight
          this.trackData.sliderImageHeight = data.templateImageWidth
        });
      },
      /**
       * 校验图片
       */
      validImg() {
        this.printLog(`滑块抬起`, this.trackData);
        this.$emit(VALID_IMG_FUN, this.trackData, this.uuid, data => {
          this.printLog(VALID_IMG_FUN, data);
        //   if (data === false) {
        //     this.reset();
        //   }
        });
      },
      /**
       * 重新生成图片
       */
      reset() {
        this.getImg();
        this.moveX = 0;
        this.movePercent = 0;
        this.startX = 0;
        this.startY = 0;
        this.blcokLeft = 0;
        this.trackData.startSlidingTime = null
        this.trackData.entSlidingTime = null
        this.trackData.trackList = []
        this.trackData.bgImageWidth = 0
        this.trackData.bgImageHeight = 0
        this.trackData.sliderImageWidth = 0
        this.trackData.sliderImageHeight = 0
      },
      /**
       * 按钮关闭事件
       */
      close() {
        this.printLog("关闭按钮触发");
        this.$emit(CLOST_EVENT_FUN);
      },
      /**
       * 开始滑动
       */
      start(e) {
        this.trackData.startSlidingTime = new Date()
        this.startX = e.pageX*2.12;
        this.startY = e.pageY*2.12
        this.startMove = true;
        window.addEventListener("mousemove", this.move);
        window.addEventListener("mouseup", this.up);
        
      },
      /**
       * 滑块滑动事件
       */
      move(e) {
        if (!this.startMove) return;
        const moveX = (e.pageX*2.12 - this.startX)/2.12;
        let pageX = e.pageX*2.12
        let pageY = e.pageY*2.12
        this.trackData.trackList.push({
            x: pageX - this.startX,
            y: pageY - this.startY,
            t: (new Date().getTime() - this.trackData.startSlidingTime.getTime())
        })
        const movePercent = moveX / 280;
        if (moveX <= 0) {
          this.blcokLeft = 0;
          this.moveX = 0;
          this.movePercent = 0;
        } else if (moveX >= 0 && moveX <= 235) {
          this.blcokLeft = moveX;
          this.moveX = moveX;
          this.movePercent = movePercent;
        } else if (moveX >= 235) {
          this.blcokLeft = 235;
          this.moveX = 235;
          this.movePercent = movePercent;
        }
        console.log("movethis.trackData",this.trackData)
      },
      /**
       * 滑块鼠标抬起事件
       */
      up(e) {
        console.log("upthis.trackData",this.trackData)
        this.trackData.entSlidingTime = new Date()
        window.removeEventListener("mousemove", this.move);
        window.removeEventListener("mouseup", this.up);
        if (!this.startMove) return;
        this.startMove = false;
        this.validImg();
      }
    },
    /**
     * 销毁事件
     */
    beforeDestroy() {
      window.removeEventListener("mousemove", this.move);
      window.removeEventListener("mouseup", this.up);
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .slider-mask {
    position: absolute;
    left: 0;
    top: 0;
    height: 40px;
    border: 0 solid #1991fa;
    background: #d1e9fe;
    border-radius: 2px;
  }
  .yidun_slider_icon {
    position: absolute;
    top: 50%;
    margin-top: -6px;
    left: 50%;
    margin-left: -6px;
    width: 14px;
    height: 10px;
    background-image: url(https://cstaticdun.126.net//2.13.7/images/icon_light.4353d81.png);
    background-position: 0 -13px;
    background-size: 32px 544px;
  }
  .inner-mv-img,
  .inner-bg-img,
  .title {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }
  .slider {
    .mask {
      display: block;
      z-index: 998;
      background: rgba(0, 0, 0, 0);
      width: 310px;
      height: 280px;
    }
    .container {
      position: absolute;
      z-index: 999;
      width: 310px;
      height: 280px;
      margin: auto;
      background: rgba(255, 255, 255, 1);
      border-radius: 6px;
      box-shadow: 0px 0px 11px 0px rgba(153, 153, 153, 1);
      box-sizing: border-box;
      padding: 17px 15px;
      .title {
        font-size: 14px;
        color: #333;
        display: flex;
        justify-content: space-between;
        .button-group {
          img {
            width: 25px;
            height: 25px;
            cursor: pointer;
          }
        }
      }
      .img {
        width: 280px;
        height: 180px;
        position: relative;
        img {
          width: 100%;
        }
        .backgroup-img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
        }
        .move-img {
          width: 52.20338981px;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      .slide {
        width: 100%;
        height: 40px;
        border: 1px solid #e4e7eb;
        background-color: #f7f9fa;
        box-sizing: border-box;
        position: relative;
        &::before {
          position: absolute;
          content: "按住左边按钮移动完成上方拼图";
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          color: #999;
          width: 100%;
          height: 100%;
          text-indent: 50px;
        }
        .block {
          width: 40px;
          height: 38px;
          background-color: #fff;
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0;
          top: 0;
          cursor: pointer;
          background-size: 30px;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
      .block:hover {
        background-color: #1991fa;
      }
      .block:hover .yidun_slider_icon {
        background-image: url(https://cstaticdun.126.net//2.13.7/images/icon_light.4353d81.png);
        background-position: 0 0;
        background-size: 32px 544px;
      }
      .loading {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
      }
    }
  }
  </style>

2.在需要地方引入该组件

点击查看代码

 <!-- 前后端滑块验证 -->
    <div class="islider" v-if="sliderShow">
      <Slider
        @getImg="getImg"
        @validImg="validImg"
        @close="onClose"
        :log="true"
      ></Slider>
    </div>
	
	
   <script>
   import Slider from "@/components/Mcslider/index.vue"
   export default {
	  components: {
		Slider
	  },
	  data() {
	  	return {
			sliderShow:false
		}
	  },
	  methods:{
	  	onShow() {
			if(!this.authForm.mobile){
				return this.$message.warning("请输入手机号码")
			}
			this.sliderShow = true
			},
			onClose() {
			  this.sliderShow = false;
		},

		  // 获取滑动验证码（下方有格式截图）
		  getImg(callback) {
			  genImgSwipe().then((res) => {
				  callback(res.body);
			  }, error => {
				  callback(error);
			  });
		  },

		  // 操作滑动后返回值，并传去后端验证
		  validImg(trackData, id, callback) {
			  this.sliderData = {mobile:this.authForm.mobile,...trackData,captchaKey:id}
			  this.handleGetAuthCode(); // 获取验证码
			  callback(false);
			  this.sliderShow= false;
		  },
	  }
	 }
   </script>

后端

1.导入xml

点击查看代码

<!-- maven 导入 -->
<dependency>
    <groupId>cloud.tianai.captcha</groupId>
    <artifactId>tianai-captcha</artifactId>
    <version>1.4.1</version>
</dependency>

2.使用 ImageCaptchaGenerator生成器生成验证码

点击查看代码

package example.readme;

import cloud.tianai.captcha.common.constant.CaptchaTypeConstant;
import cloud.tianai.captcha.generator.ImageCaptchaGenerator;
import cloud.tianai.captcha.generator.common.model.dto.ImageCaptchaInfo;
import cloud.tianai.captcha.generator.impl.MultiImageCaptchaGenerator;
import cloud.tianai.captcha.resource.ImageCaptchaResourceManager;
import cloud.tianai.captcha.resource.impl.DefaultImageCaptchaResourceManager;
import cloud.tianai.captcha.validator.ImageCaptchaValidator;
import cloud.tianai.captcha.validator.impl.BasicCaptchaTrackValidator;

import java.util.Map;

public class Test {
    public static void main(String[] args) throws InterruptedException {
        ImageCaptchaResourceManager imageCaptchaResourceManager = new DefaultImageCaptchaResourceManager();
        ImageTransform imageTransform = new Base64ImageTransform();
        ImageCaptchaGenerator imageCaptchaGenerator = new MultiImageCaptchaGenerator(imageCaptchaResourceManager,imageTransform).init(true);
        /*
                生成滑块验证码图片, 可选项
                SLIDER (滑块验证码)
                ROTATE (旋转验证码)
                CONCAT (滑动还原验证码)
                WORD_IMAGE_CLICK (文字点选验证码)

                更多验证码支持 详见 cloud.tianai.captcha.common.constant.CaptchaTypeConstant
         */
        ImageCaptchaInfo imageCaptchaInfo = imageCaptchaGenerator.generateCaptchaImage(CaptchaTypeConstant.SLIDER);
        System.out.println(imageCaptchaInfo);

        // 负责计算一些数据存到缓存中，用于校验使用
        // ImageCaptchaValidator负责校验用户滑动滑块是否正确和生成滑块的一些校验数据; 比如滑块到凹槽的百分比值
        ImageCaptchaValidator imageCaptchaValidator = new BasicCaptchaTrackValidator();
        // 这个map数据应该存到缓存中，校验的时候需要用到该数据
        Map<String, Object> map = imageCaptchaValidator.generateImageCaptchaValidData(imageCaptchaInfo);
    }
}

3.使用ImageCaptchaValidator校验器验证

点击查看代码

package example.readme;

import cloud.tianai.captcha.validator.common.model.dto.ImageCaptchaTrack;
import cloud.tianai.captcha.validator.impl.BasicCaptchaTrackValidator;

import java.util.Map;

public class Test2 {
    public static void main(String[] args) {
        BasicCaptchaTrackValidator sliderCaptchaValidator = new BasicCaptchaTrackValidator();

        ImageCaptchaTrack imageCaptchaTrack = null;
        Map<String, Object> map = null;
        Float percentage = null;
        // 用户传来的行为轨迹和进行校验
        // - imageCaptchaTrack为前端传来的滑动轨迹数据
        // - map 为生成验证码时缓存的map数据
        boolean check = sliderCaptchaValidator.valid(imageCaptchaTrack, map).isSuccess();
//        // 如果只想校验用户是否滑到指定凹槽即可，也可以使用
//        // - 参数1 用户传来的百分比数据
//        // - 参数2 生成滑块是真实的百分比数据
        check = sliderCaptchaValidator.checkPercentage(0.2f, percentage);
    }
}

整体架构设计

ianai-captcha 验证码整体分为生成器(ImageCaptchaGenerator)、校验器(ImageCaptchaValidator)、资源管理器(ImageCaptchaResourceManager) 其中生成器、校验器、资源管理器等都是基于接口模式实现可插拔的，可以替换为自定义实现，灵活度高

具体可以看该插件的作者天爱有情 / tianai-captcha

标签：滑块,前后,trackData,校验,captcha,background,tianai,data
From： https://www.cnblogs.com/sisxxw/p/17611595.html

前端

1.创建一个滑块组件slider

2.在需要地方引入该组件

后端

1.导入xml

2.使用 ImageCaptchaGenerator生成器生成验证码

3.使用ImageCaptchaValidator校验器验证

整体架构设计

相关文章

赞助商

阅读排行

前后端滑块校验

前端

1.创建一个滑块组件slider

2.在需要地方引入该组件

后端

1.导入xml

2.使用 ImageCaptchaGenerator生成器生成验证码

3.使用ImageCaptchaValidator校验器 验证

整体架构设计

相关文章

赞助商

阅读排行

3.使用ImageCaptchaValidator校验器验证