SpringBoot结合DefaultKaptcha实现验证码的功能

1、在pom文件中依赖注入Kaptcha依赖关系,如下:

<dependency>
	<groupId>com.github.penggle</groupId>
	<artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

2、创建验证码的配置文件:kaptcha.properties(名字可以随便起)

##### Kaptcha Information
kaptcha.width=150
kaptcha.height=42
kaptcha.border=no
kaptcha.textproducer.font.size=40
kaptcha.textproducer.char.space=10
kaptcha.textproducer.font.names=\u4EFF\u5B8B,\u5FAE\u8F6F\u96C5\u9ED1
kaptcha.textproducer.char.string=1234567890
kaptcha.textproducer.char.length=4
kaptcha.background.clear.from=92,189,170
kaptcha.background.clear.to=255,255,255

kaptcha属性的配置可以根据自己的需要进行修改,有关具体的配置可以参考

https://blog.csdn.net/du_zilin/article/details/77367978

3、创建验证码生成工具类NumCodeUtil

package com.mmall.common.util;

import java.util.Properties;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;

@Component("numCodeUtil")
public class NumCodeUtil {
	
	private static Properties props = new Properties();
	
	@Bean
	public DefaultKaptcha defaultKaptcha() throws Exception {
		// 创建DefaultKaptcha对象
		DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
		
		// 读取配置文件
		try {
			props.load(NumCodeUtil.class.getClassLoader()
                .getResourceAsStream("kaptcha.properties"));
		}catch (Exception e) {
			e.printStackTrace();
		}

		// 将Properties文件设到DefaultKaptcha对象中
		defaultKaptcha.setConfig(new Config(props));
		return defaultKaptcha;
	} 
}

​

​

4、在控制层利用流的技术生成验证码图片

​
package com.mmall.common.base.controller;

import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.google.code.kaptcha.impl.DefaultKaptcha;

/**
 * 获取验证码
 * @author SunTao
 * @since 2018-12-13
 */
@Controller("CodeController")
@RequestMapping("/code")
public class CodeController extends BaseController {
	@Autowired
	private DefaultKaptcha defaultKaptcha;
	
	@RequestMapping(value="/numCode", method=RequestMethod.GET)
	public void getNumCode(HttpServletResponse response) throws Exception {
		// 创建字节数组用于存放图片信息
		byte[] numCodeImgByte = null;
		// 获得二进制输出流
		ByteArrayOutputStream baos = new ByteArrayOutputStream();
		try {
			// 通过DefaultKaptcha获得随机验证码
			String successCode = defaultKaptcha.createText();
			// 将生成的验证码存放在session中
			session.setAttribute("successCode", successCode);
			// 使用生成的验证码字符串,完成图片的生成
			BufferedImage bi = defaultKaptcha.createImage(successCode);
			// 将图片写入到流中
			ImageIO.write(bi, "jpg", baos);
		} catch (IOException e) {
			System.err.println("将图片写入到输入流出现错误!");
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		// 使用HttpServletResponse将图片写入到浏览器中
		numCodeImgByte = baos.toByteArray();
		
		// 通过response设定响应请求类型
		// no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用     缓存。
		response.setHeader("Cache-Control","no-store");
		// no-cache指示请求或响应消息不能缓存
		response.setHeader("Pragma","no-cache");
		/* expires是response的一个属性,它可以设置页面在浏览器的缓存里保存的时间 ,超过设定的时        间后就过期 。过期后再次
		 * 浏览该页面就需要重新请求服务器发送页面数据,如果在规定的时间内再次访问次页面 就不需从服务器传送 直接从缓存中读取。
		 * */
		response.setDateHeader("Expires", 0);
		// servlet接受request请求后接受图片形式的响应
		response.setContentType("image/jpeg");
		
		//通过response获得输出流
		ServletOutputStream sos = response.getOutputStream();
		sos.write(numCodeImgByte);
		sos.close();
	} 
}

​

到这里,验证码的基本功能就实现了,可以发出"/code/numCode"请求获取验证码,如下图:

 

  • 12
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
实现验证功能可以分为前端和后端两部分。 前端部分: 在 Vue3 中,可以使用第三方库如 vue-ant-design、vue-element-admin 等提供的验证码组件,或者使用原生 HTML5 canvas 绘制验证码。以下是一个使用 canvas 绘制验证码的示例: 1. 在 template 中添加 canvas 标签: ```html <canvas ref="canvas" @click="drawCode"></canvas> ``` 2. 在 script 中定义绘制验证码的方法: ```javascript export default { name: 'VerificationCode', data() { return { code: '' } }, methods: { drawCode() { let canvas = this.$refs.canvas let ctx = canvas.getContext('2d') let width = canvas.width let height = canvas.height // 绘制背景色 ctx.fillStyle = '#eee' ctx.fillRect(0, 0, width, height) // 绘制验证码 let code = '' let charArr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'.split('') for (let i = 0; i < 4; i++) { let char = charArr[Math.floor(Math.random() * charArr.length)] code += char ctx.font = 'bold 20px Arial' ctx.fillStyle = '#333' ctx.fillText(char, 20 + i * 20, 25) } this.code = code } } } ``` 3. 调用 drawCode 方法生成验证码。 后端部分: 在 Spring Boot 中,可以使用第三方库 kaptcha 来生成验证码。以下是一个使用 kaptcha 生成验证码的示例: 1. 添加依赖: ```xml <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency> ``` 2. 在 Controller 中添加生成验证码的方法: ```java @GetMapping("/captcha") public void captcha(HttpServletResponse response, HttpSession session) throws Exception { // 创建 kaptcha 对象 DefaultKaptcha kaptcha = new DefaultKaptcha(); // 设置配置 Properties props = new Properties(); props.put("kaptcha.border", "no"); props.put("kaptcha.textproducer.font.color", "black"); props.put("kaptcha.image.width", "100"); props.put("kaptcha.image.height", "40"); props.put("kaptcha.textproducer.font.size", "30"); kaptcha.setConfig(new Config(props)); // 生成验证码 String text = kaptcha.createText(); session.setAttribute("captcha", text); // 输出图片 BufferedImage image = kaptcha.createImage(text); OutputStream out = response.getOutputStream(); ImageIO.write(image, "jpg", out); out.close(); } ``` 3. 在前端页面中使用 img 标签获取验证码图片: ```html <img src="/captcha" alt="验证码" @click="refreshCode"> ``` 4. 在提交表单时把用户输入的验证码和 session 中的验证码进行比较,判断是否正确。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值