前言
提示：这里可以添加本文要记录的大概内容：
captcha现在有很多，各种各样的验证码，我现在就写一个简单的
提示：以下是本篇文章正文内容，下面案例可供参考
一、初始化
首先创建一个spring项目
配置yml：
kaptcha: text-producer: character: length: 4 font: color: blue items: # admin captcha admin: path: /admin/captcha session: key: KAPTCHA_SESSION_KEY date: KAPTCHA_SESSION_DATE
这里的 key: KAPTCHA_SESSION_KEY 加上localhost就可以访问
然后再在pom.xml中加入
<dependency> <groupId>com.oopsguy.kaptcha</groupId> <artifactId>kaptcha-spring-boot-starter</artifactId> <version>1.0.0-beta-2</version> </dependency>
我把前端的代码代码也放在下面了
第一个是index.html，第二个是success.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>验证码</title> <style> #inputCaptcha { height: 30px; vertical-align: middle; } #verificationCodeImg{ vertical-align: middle; } #checkCaptcha{ height: 40px; width: 100px; } </style> </head> <body> <h1>输入验证码</h1> <div id="confirm"> <input type="text" name="inputCaptcha" id="inputCaptcha"> <img id="verificationCodeImg" src="/admin/captcha" style="cursor: pointer;" title="看不清？换一张" /> <input type="button" value="提交" id="checkCaptcha"> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script> $("#verificationCodeImg").click(function(){ $(this).hide().attr('src', '/admin/captcha?dt=' + new Date().getTime()).fadeIn(); }); $("#checkCaptcha").click(function () { $.ajax({ type:"get", url: "/admin/check", data:{ inputCaptcha: $("#inputCaptcha").val() }, success:function(result){ if(result){ //页面跳转 location.href = "success.html"; }else{ alert("验证码失败"); } } }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>验证成功页</title> </head> <body> <h1>验证成功</h1> </body> </html>
二、逻辑关系
//1. 判断输入的验证码是否为空 //2. 获取生成的验证码 //3. 比对 生成的验证码和输入的验证码是否一致 //4. 确认验证码是否过期
import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpSession; import java.util.Date; @RequestMapping("/admin") @RestController public class KaptchaController { private static final String KAPTCHA_SESSION_KEY = "KAPTCHA_SESSION_KEY"; private static final String KAPTCHA_SESSION_DATE = "KAPTCHA_SESSION_DATE"; private static final long TIME_OUT = 60*1000;//一分钟, 毫秒数 /** * 校验验证码是否正确 * @param inputCaptcha 用户输入的验证码 * @return */ @RequestMapping("/check") public boolean check(String inputCaptcha, HttpSession session){ //1. 判断输入的验证码是否为空 //2. 获取生成的验证码 //3. 比对 生成的验证码和输入的验证码是否一致 //4. 确认验证码是否过期 if (!StringUtils.hasLength(inputCaptcha)){ return false; } //生成的验证码(正确的验证码) String saveCaptcha = (String)session.getAttribute(KAPTCHA_SESSION_KEY); Date savaCaptchaDate = (Date)session.getAttribute(KAPTCHA_SESSION_DATE); if (inputCaptcha.equalsIgnoreCase(saveCaptcha)){//不区分大小写 if (savaCaptchaDate!=null || System.currentTimeMillis()-savaCaptchaDate.getTime()<TIME_OUT){ return true; } } return false; } }
三.验证
然后就可以了
