Springboot整合kaptcha验证码
01、通过配置类来配置kaptcha
01-01、添加kaptcha的依赖:
<!-- kaptcha验证码 --><dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>
02-01、新建KaptchaConfig配置类
package com.czr.config.code;import com.google.code.kaptcha.impl.DefaultKaptcha;import com.google.code.kaptcha.util.Config;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import java.util.Properties;@Configurationpublic class KaptchaConfig {@Beanpublic DefaultKaptcha getDefaultKaptcha(){DefaultKaptcha captchaProducer = new DefaultKaptcha();Properties properties = new Properties();properties.setProperty("kaptcha.border", "yes");properties.setProperty("kaptcha.border.color", "105,179,90");properties.setProperty("kaptcha.textproducer.font.color", "blue");properties.setProperty("kaptcha.image.width", "110");properties.setProperty("kaptcha.image.height", "40");properties.setProperty("kaptcha.textproducer.font.size", "30");properties.setProperty("kaptcha.session.key", "code");properties.setProperty("kaptcha.textproducer.char.length", "4");properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");Config config = new Config(properties);captchaProducer.setConfig(config);return captchaProducer;}}
验证码 KAPTCHA 参数详解
03-01、编写controller用于生成验证码:
package com.czr.controller.code;import com.google.code.kaptcha.Constants;import com.google.code.kaptcha.Producer;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import javax.imageio.ImageIO;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import java.awt.image.BufferedImage;@Controllerpublic class CodeController {@Autowiredprivate Producer captchaProducer ;@RequestMapping("/kaptcha")public void getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {HttpSession session = request.getSession();response.setDateHeader("Expires", 0);response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");response.addHeader("Cache-Control", "post-check=0, pre-check=0");response.setHeader("Pragma", "no-cache");response.setContentType("image/jpeg");//生成验证码String capText = captchaProducer.createText();session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);//向客户端写出BufferedImage bi = captchaProducer.createImage(capText);ServletOutputStream out = response.getOutputStream();ImageIO.write(bi, "jpg", out);try {out.flush();} finally {out.close();}}}
04-01、访问验证地址查看验证码
http://localhost:8888/kaptcha
关于验证码的业务对接和注意事项
01、验证码的作用是什么？
解决一些程序和肉机攻击的接口的一种防护机制。增加攻击的难度增加一点安全性。短信验证码，语音验证码，图片融合验证码等等02、原理
通过java的awt的图像技术，然后用随机数（字母和数字的混合）然后生成一张图片，用io流输出到浏览器过程。
03、如何实现防护呢？
在生成这个随机数的时候，会在服务器端把生成的随机数放入到session会话中，然后当用户输入验证码的时候，会从session获取比对。04、登录如何调用验证码的呢？
04-01、在login.html页面增加验证码
<div data-v-7f5e281c="" class="container" ><!----><input data-v-7f5e281c="" placeholder="验证码" id="code" type="text" maxlength="4" v-model="user.code" class="input_init container_error mas-form-input-large" /><img src="/kaptcha" alt=""><div data-v-7f5e281c="" class="slot_content"></div><div data-v-7f5e281c="" class="error_label" style="color: rgb(224, 95, 66);"><div data-v-7f5e281c="" class="icon"><svg data-v-7f5e281c="" width="1em" height="1em" viewbox="0 0 14 14" fill="none" xmlns="/2000/svg" style="font-size: 12px; transform: rotate(0deg);"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 7C12.5 10.0376 10.0376 12.5 7 12.5C3.96243 12.5 1.5 10.0376 1.5 7C1.5 3.96243 3.96243 1.5 7 1.5C10.0376 1.5 12.5 3.96243 12.5 7ZM13.5 7C13.5 10.5899 10.5899 13.5 7 13.5C3.41015 13.5 0.5 10.5899 0.5 7C0.5 3.41015 3.41015 0.5 7 0.5C10.5899 0.5 13.5 3.41015 13.5 7ZM6.0995 3.99504C6.04623 3.46229 6.46459 3 7 3C7.53541 3 7.95377 3.46229 7.9005 3.99504L7.54975 7.50248C7.52151 7.78492 7.28384 8 7 8C6.71616 8 6.47849 7.78492 6.45025 7.50249L6.0995 3.99504ZM7 10.9985C6.44706 10.9985 6 10.5554 6 9.99854C6 9.45308 6.44706 8.99854 7 8.99854C7.55294 8.99854 8 9.44172 8 9.99854C8 10.5554 7.55294 10.9985 7 10.9985Z" fill="currentcolor"></path></svg></div><div data-v-7f5e281c="" class="error_message h5">请输入验证码</div></div></div>
04-02、在login.html页面增加验证码
<img src="/kaptcha" title="看不清，点我改变！！！" onclick="this.src='/kaptcha?d='+new Date().getTime()" alt="">
为什么点击的时候：一定要增加一个随机数或者时间戳呢？
因为：浏览器对图片会进行缓存，因为验证码是一个图片，浏览器默认是根据图片的地址进行缓存的。如果你不加时间戳或者随机数，你点击直接根据地址去缓存中取，所以会拿到缓存图片，就不发生改变。
04-03、增加样式
.ksd-pr{position: relative}.ksdcode{position: absolute;right:9px;top:6px;border-radius: 12px;}
<div data-v-7f5e281c="" class="container ksdpr" ><input data-v-7f5e281c="" placeholder="验证码" id="code" type="text" maxlength="4" v-model="user.code" class="input_init container_error mas-form-input-large" /><img class="ksdcode" src="/kaptcha" title="看不清，点我改变！！！" onclick="this.src='/kaptcha?d='+new Date().getTime()" alt=""></div>
04-04、业务对接
login.js修改:
var vue = new Vue({el:"#app",data:{title:"MoMo登录",user:{account:"10000",password:"123456",code:""}},methods:{toLogin:function(){var that = this;var user = that.user;if(!user.account){alert("请输入账号")document.getElementById("account").focus();return;}if(!user.password){alert("请输入密码")document.getElementById("pwd").focus();return;}if(!user.code){alert("请输入验证码")document.getElementById("code").focus();return;}axios.post("/logined",user).then(function(res){if(res.data == "success"){window.location.href = "/";}else if(res.data=="failcode"){alert("你的验证码输入有误");document.getElementById("code").value = "";document.getElementById("code").focus();document.getElementById("ksdimgcode").src = "/kaptcha?d="+new Date().getTime();}else{alert("输入账号密码有误");document.getElementById("pwd").value = "";document.getElementById("pwd").focus();}})}}});
后台代码部分：
/*** 处理登录逻辑** @param userVo* @param session* @return*/@ResponseBody@PostMapping("/logined")public String logined(@RequestBody UserVo userVo, HttpSession session) {//1: 根据账号去查询用户信息LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper<>();lambdaQueryWrapper.eq(User::getTelephone, userVo.getAccount());User user = userService.getOne(lambdaQueryWrapper);// 2: 如果用户存在直接抛异常if (user == null) {return "fail";}// 3: 比较验证码？String userinputcode = userVo.getCode();String sessioncode = (String) session.getAttribute(Constants.KAPTCHA_SESSION_KEY);// 4：采用equalsIgnoreCase忽略大小写比较，不论你输入大写还小写还是全大写还全小写都可以，只要值相同都相同boolean codeFlag = userinputcode.equalsIgnoreCase(sessioncode);if (!codeFlag) {// 如果不相同，直接返回return "failcode";}// 5：把用户输入的密码进行加密String inputpwd = MD5Util.md5slat(userVo.getPassword());// 6：然后把用户输入的密码进行加密和数据库已经加密的密码进行比较，如果一致，就说明是正确的。if (user.getPassword().equals(inputpwd)) {// 7: 正确的话，就把登录的用户信息放到session中。session.setAttribute(KConstants.SESSION_USER, user);return "success";}// 8：不一致用户密码不存在return "fail";}
