SpringBoot integrated sliding puzzle, click text behavior verification code

Preface

Behavior verification code (slide puzzle, click on text), front and back end (java) interaction complete example with source code

 

premise

Install Redis   https://blog.csdn.net/javanbme/article/details/111591083

 

Full back-end example

1. Introduce dependencies

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>com.anji-plus</groupId>
    <artifactId>spring-boot-starter-captcha</artifactId>
    <version>1.2.8</version>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.70</version>
</dependency>

2. Add yml configuration

  application.yml

server:
  port: 8080

#指定滑动验证码类型  滑动：blockpuzzle 点选：clickword
spring:
  profiles:
    active: blockpuzzle

  application-blockpuzzle.yml

#滑动验证码配置
aj:
  captcha:
    jigsaw: classpath:images/jigsaw   #底图路径，不配置将使用默认图片
    cache-type: redis   # 缓存local/redis...
    cache-number: 1000  # 缓存的阈值,达到这个值，清除缓存
    timing-clear: 300   # 定时清除过期缓存(单位秒),设置为0代表不执行
    type: blockpuzzle   # 验证码类型
    water-mark:       #水印文字
    slip-offset: 5      # 校验滑动拼图允许误差偏移量(默认5像素)
    aes-status: true    # aes加密坐标开启或者禁用(true|false)
    interference-options: 2 # 滑动干扰项(0/1/2)
    history-data-clear-enable: true #历史数据是否清除
    req-frequency-limit-enable: true # 接口请求次数一分钟限制是否开启 true|false
    req-get-lock-limit: 5       # 验证失败5次，get接口锁定
    req-get-lock-seconds: 300   # 验证失败后，锁定时间间隔,s
    req-get-minute-limit: 20    # get接口一分钟内请求数限制
    req-check-minute-limit: 20  # check接口一分钟内请求数限制



# redis配置
spring:
  redis:
    host: localhost
    port: 6379
    password:
    timeout: 5000

  application-clickword.yml

#点选文字验证码配置
aj:
  captcha:
    jigsaw: classpath:images/jigsaw
    pic-click: classpath:images/pic-click  #底图路径，不配置将使用默认图片
    cache-type: redis # 缓存local/redis...
    cache-number: 1000  # 缓存的阈值,达到这个值，清除缓存
    timing-clear: 300   # 定时清除过期缓存(单位秒),设置为0代表不执行
    type: clickword
    slip-offset: 5      # 校验滑动拼图允许误差偏移量(默认5像素)
    aes-status: true    # aes加密坐标开启或者禁用(true|false)
    # https://tool.chinaz.com/tools/unicode.aspx 中文转Unicode
    font-type: \u5b8b\u4f53  # 汉字统一使用Unicode,保证程序通过@value读取到是中文，可通过这个在线转换
    water-mark: #水印文字
    interference-options: 2 # 滑动干扰项(0/1/2)
    history-data-clear-enable: true #历史数据是否清除
    req-frequency-limit-enable: true # 接口请求次数一分钟限制是否开启 true|false
    req-get-lock-limit: 5       # 验证失败5次，get接口锁定
    req-get-lock-seconds: 300   # 验证失败后，锁定时间间隔,s
    req-get-minute-limit: 20    # get接口一分钟内请求数限制
    req-check-minute-limit: 20  # check接口一分钟内请求数限制




# redis配置
spring:
  redis:
    host: localhost
    port: 6379
    password:
    timeout: 5000

3. Verification code cache implementation class

@Service
public class CaptchaCacheServiceRedisImpl implements CaptchaCacheService {

    @Autowired
    private StringRedisTemplate stringRedisTemplate;

    @Override
    public void set(String key, String value, long expiresInSeconds) {
        stringRedisTemplate.opsForValue().set(key, value, expiresInSeconds, TimeUnit.SECONDS);
    }

    @Override
    public boolean exists(String key) {
        return stringRedisTemplate.hasKey(key);
    }

    @Override
    public void delete(String key) {
        stringRedisTemplate.delete(key);
    }

    @Override
    public String get(String key) {
        return stringRedisTemplate.opsForValue().get(key);
    }

    @Override
    public Long increment(String key, long val) {
        return stringRedisTemplate.opsForValue().increment(key,val);
    }

    @Override
    public String type() {
        return "redis";
    }

}

4. Cross-domain configuration (local startup)

@WebFilter(filterName = "CorsFilter ")
@Configuration
public class CorsFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public  void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws ServletException, IOException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        response.setContentType("application/json; charset=utf-8");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET,PUT, OPTIONS, DELETE");//http请求方式
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, token");
        filterChain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }
}

5. META-INF/service

Create the file com.anji.captcha.service.CaptchaCacheService

Content add the fully qualified name of the implementation class com.javanbme.captcha.service.impl.CaptchaCacheServiceRedisImpl (fill in your own class path)

6. controller

@Slf4j
@RestController
@RequestMapping("/auth")
public class LoginController {

    @Autowired
    private CaptchaService captchaService;


    @PostMapping("/get")
    public ResponseModel get(@RequestBody CaptchaVO captchaVO) {
        return captchaService.get(captchaVO);
    }

    @PostMapping("/check")
    public ResponseModel check(@RequestBody CaptchaVO captchaVO) {

        ResponseModel check = captchaService.check(captchaVO);
        //repCode  0000  无异常，代表成功
        //repCode  9999  服务器内部异常
        //repCode  0011  参数不能为空
        //repCode  6110  验证码已失效，请重新获取
        //repCode  6111  验证失败
        //repCode  6112  获取验证码失败,请联系管理员
        log.info("code={},msg={}",check.getRepCode(),check.getRepMsg());
        return check;
    }

}

 7. Project structure

 

Front end example

1. The content is a bit too much to post part

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
        <title>verify插件demo</title>
		<link rel="stylesheet" type="text/css" href="css/verify.css">
		
		<script>
			(function () {
			  if (!window.Promise) {
				document.writeln('<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"><' + '/' + 'script>');
			  }
			})();
		</script>
		<style>
			.btn{
				border: none;
				outline: none;
				width: 300px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				cursor: pointer;
				background-color: #409EFF;
				color: #fff;
				font-size: 16px;
				letter-spacing: 1em;
			}
		</style>
    </head>
    <body>
		<div class="box">
			<h1>verify---anji</h1>
			<p>前后端联合交互的验证码插件</p>
			
			<br><br>
	
			<h3>滑动嵌入式（slider-embed）</h3>
			<div id="mpanel1" >
			</div>
			<h3>滑动弹出式（slider-popup）</h3>
			<button class="btn" id='btn'>点击我</button>
			<div id="mpanel2" style="margin-top:50px;">
			</div>
		</div>
		<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js" ></script>
		<script src="./js/crypto-js.js"></script>
		<script src="./js/ase.js"></script>
        <script src="js/verify.js" ></script>
        
        <script>
			// 初始化验证码  嵌入式
        	$('#mpanel1').slideVerify({
				baseUrl:'http://localhost:8080',  //local-spring-boot;
				mode:'fixed',
				imgSize : {       //图片的大小对象
		        	width: '400px',
		        	height: '200px',
				},
				barSize:{
					width: '400px',
					height: '40px',
				},
		        ready : function() {  //加载完毕的回调
		    	},
		        success : function(params) { //成功的回调
					// 返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
					console.log(params,"params");
		        },
		        error : function() {        //失败的回调
		        }
			});
			
			// // 初始化验证码  弹出式
			$('#mpanel2').slideVerify({
				baseUrl:'http://localhost:8080',  //服务器请求地址, 默认地址为安吉服务器;
				mode:'pop',     //展示模式
				containerId:'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
				imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
					width: '400px',
					height: '200px',
				},
				barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
					width: '400px',
					height: '40px',
				},
				beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
					var flag = true;
					//实现: 参数合法性的判断逻辑, 返回一个boolean值
					return flag
				},
				ready : function() {},  //加载完毕的回调
				success : function(params) { //成功的回调
					// params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
					// 例如: login($.extend({}, params))  
				},
				error : function() {}        //失败的回调
			});
        </script>
    </body>
 
</html>

2. Project structure

 

final effect

 

 

Sample source code of front and back end

 https://download.csdn.net/download/javanbme/15610755