slider-captcha-vue

Slidecaptcha

简介

一款配合后端jar包使用的滑动验证码校验组件。该版本适用于vue2。react版本请访问地址：https://www.npmjs.com/package/gobestsoft-component-slider-captcha；后端jar包地址在文末。

引用方式

npm i gobestsoft-components-slider-captcha-vue

使用方式

如果需要全局引用，可以在 main.js主文件中同时引用组件和样式,同时必须使用 Vue.use(组件名) 注册该组件

import sliderCaptch from 'slider-captcha-vue'
import 'slider-captcha-vue/lib/silder-captcha.css'
Vue.use(sliderCaptch)

如果只是在某个文件中引用，只需在文件中按需引用，并且调用 Vue.use(组件名) 注册即可，同时需要在相应的css文件中 import 'slider-captcha-vue/lib/silder-captcha.css'

使用参数以及示例

使用示例

<template>
  <div id="app">
    <slider-captcha @getImage="getImage" @onFinish="onFinish" />
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      status: false,
      sliderSrc: '',
      src: '',
      y: 0,
    }
  },
  methods: {
    async getImage(callback) {
      const _res = await axios.get("http://localhost:8087/gen")
      if (_res.status === 200) {
        callback(_res.data)
      }
    },
    async onFinish(data, callback) {
      try {
        const res = await axios.post("http://localhost:8087/login", {
          form: { username: 'demo', password: 'demo' },
          ...data
        }, [
          {
            headers: {
              "Content-Type": "application/json",
            }
          }
        ])
        console.log(res)
        callback({ success: res?.data === true })
      } catch {
        callback({ success: false })
      }

    },
    onRefresh() {
      console.log('onRefresh')
    }
  },
  mounted() {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

参数说明

onFinish:(data,callback)=>{callback({success:boolean})}

onFinish 为拖拽结束之后的回调函数。

其中data 为组件暴露出来的参数，配合jar包使用，只需将其直接传入，示例中的form参数为具体的业务场景参数，在此不做考虑。

在onFinish中必须调用 callback() ,并且参数传入一个对象{success:true} 为成功，{success:false} 为失败，以此来通知组件是否验证成功。

``getImage:(callback)=>{callback({...data})}`

getImage 为获取背景图片以及滑块图片的方法。

必须在callback中将data传入，其中data必需的结构为：

{
    id:string; // 图片id；
    captcha:{
       backgroundImage:'bgUrl'; // 背景图片的地址
       templateImage:'templateUrl'; // 滑块图片的地址
    }
}

补充说明

后端jar包引用方法

mvn clean package
java -jar target/slidercaptcha-backend-0.0.1-SNAPSHOT.jar

接入方法

引入tianai-captcha包

<dependency>
    <groupId>cloud.tianai.captcha</groupId>
    <artifactId>tianai-captcha-springboot-starter</artifactId>
    <version>1.4.1</version>
</dependency>

Controller 新增验证图片生成接口

    /**
     * 生成验证码
     * @return
     */
    @GetMapping("/gen")
    @CrossOrigin
    public CaptchaResponse gen() {
        return imageCaptchaApplication.generateCaptcha(CaptchaTypeConstant.SLIDER) ;
    }

需要验证码的接口上，增加@Captcha注解。且对该接口参数做包装，示例如下：

 /**
     * 需要验证码校验的业务方法
     * 1. 添加@Captcha 注解，默认滑动验证
     * 2. 请求方法为Post
     * 3. 请求参数包装
     * @param imageCaptchaTrack
     * @return
     */
    @PostMapping("/login")
    @Captcha
    @CrossOrigin
    public boolean checkCaptcha(@RequestBody CaptchaRequest<UserRequest> imageCaptchaTrack) {
        // 如果验证码失败，该方法体不会进来
        UserRequest user = imageCaptchaTrack.getForm();
        if ("demo".equals(user.getUsername()) && "demo".equals(user.getPassword())){
            // 登录成功
            return true;
        }
        return false;
    }