項目原來使用的驗證碼不夠清晰,參考了上面文章之後,将驗證碼改為字元串驗證。
先看一下修改前後的效果。
修改前:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnL3kTM3UTO1MTM3ATOwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
修改後:
下面是修改後的代碼
POM(未寫出和驗證碼無關的内容)
<properties>
<kaptcha.version>2.3.2</kaptcha.version>
</properties>
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>${kaptcha.version}</version>
<exclusions>
<exclusion>
<artifactId>javax.servlet-api</artifactId>
<groupId>javax.servlet</groupId>
</exclusion>
</exclusions>
</dependency>
前端頁面部分:
<div class="row" th:if="${captchaEnabled==true}">
<div class="col-xs-6">
<input type="text" name="validateCode" class="form-control code" placeholder="驗證碼" maxlength="5" autocomplete="off" style="margin-bottom: 5px;"/>
</div>
<div class="col-xs-6">
<a href="javascript:void(0);" target="_blank" rel="external nofollow" title="點選更換驗證碼">
<img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
</a>
</div>
</div>
Controller(代碼中注釋掉的部分為原來的驗證碼邏輯,可以無視)
package com.smart.project.system.user.controller;
import java.io.IOException;
import javax.annotation.Resource;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import com.google.code.kaptcha.Producer;
import com.smart.framework.web.controller.BaseController;
import com.smart.project.system.user.utils.RandomValidateCodeUtils;
/**
* 圖檔驗證碼(支援算術形式)
*
* @author bcsmart
*/
@Controller
@RequestMapping("/captcha")
public class CaptchaController extends BaseController {
/**
* 驗證碼生成
*/
@GetMapping(value = "/captchaImage")
public ModelAndView getKaptchaImage(HttpServletRequest request, HttpServletResponse response) {
ServletOutputStream out = null;
try {
// 設定響應頭資訊,告訴浏覽器不要緩存此内容
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");
RandomValidateCodeUtils randomValidateCodeUtils = new RandomValidateCodeUtils();
// 輸出驗證碼圖檔方法
randomValidateCodeUtils.getRandCode(request, response);
// HttpSession session = request.getSession();
// String type = request.getParameter("type");
// String capStr = null;
// String code = null;
// BufferedImage bi = null;
// if ("math".equals(type)) {
// String capText = captchaProducerMath.createText();
// capStr = capText.substring(0, capText.lastIndexOf("@"));
// code = capText.substring(capText.lastIndexOf("@") + 1);
// bi = captchaProducerMath.createImage(capStr);
// } else if ("char".equals(type)) {
// capStr = code = captchaProducer.createText();
// bi = captchaProducer.createImage(capStr);
// }
// session.setAttribute(Constants.KAPTCHA_SESSION_KEY, code);
// out = response.getOutputStream();
// ImageIO.write(bi, "jpg", out);
// out.flush();
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (out != null) {
out.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
return null;
}
}
繪制驗證碼的工具類
package com.smart.project.system.user.utils;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.google.code.kaptcha.Constants;
/**
* 随機驗證碼生成工具類
*
* @author sunbin
* @since 2019年9月7日
* @version 2019年9月7日
*/
public class RandomValidateCodeUtils {
private static final Logger logger = LoggerFactory.getLogger(RandomValidateCodeUtils.class);
/**
* 随機産生數字與字母組合的字元串(去掉了易混淆字元)
*/
private String randString = "23456789abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
/**
* 圖檔寬
*/
private int width = 95;
/**
* 圖檔高
*/
private int height = 35;
/**
* 幹擾線數量
*/
private int lineSize = 20;
/**
* 随機産生字元數量
*/
private int stringNum = 4;
private Random random = new Random();
/**
* 獲得字型
*/
private Font getFont() {
return new Font("Fixedsys", Font.CENTER_BASELINE, 30);
}
/**
* 獲得顔色
*/
private Color getRandColor(int fc, int bc) {
if (fc > 255) {
fc = 255;
}
if (bc > 255) {
bc = 255;
}
int r = fc + random.nextInt(bc - fc - 16);
int g = fc + random.nextInt(bc - fc - 14);
int b = fc + random.nextInt(bc - fc - 18);
return new Color(r, g, b);
}
/**
* 生成随機圖檔
*/
public void getRandCode(HttpServletRequest request, HttpServletResponse response) {
HttpSession session = request.getSession();
// BufferedImage類是具有緩沖區的Image類,Image類是用于描述圖像資訊的類
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
// 産生Image對象的Graphics對象,改對象可以在圖像上進行各種繪制操作
Graphics g = image.getGraphics();
// 圖檔大小
g.fillRect(0, 0, width, height);
// 字型大小
g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));
// 字型顔色
g.setColor(getRandColor(110, 133));
// 繪制幹擾線
for (int i = 0; i <= lineSize; i++) {
drowLine(g);
}
// 繪制随機字元
String randomString = "";
for (int i = 1; i <= stringNum; i++) {
randomString = drowString(g, randomString, i);
}
// 将生成的随機字元串儲存到session中
session.setAttribute(Constants.KAPTCHA_SESSION_KEY, randomString);
g.dispose();
try {
// 将記憶體中的圖檔通過流的形式輸出到用戶端
ImageIO.write(image, "JPEG", response.getOutputStream());
} catch (Exception e) {
logger.error("将記憶體中的圖檔通過流的形式輸出到用戶端失敗", e);
}
}
/**
* 繪制字元串
*/
private String drowString(Graphics g, String randomString, int i) {
g.setFont(getFont());
g.setColor(new Color(random.nextInt(101), random.nextInt(111), random.nextInt(121)));
String rand = String.valueOf(getRandomString(random.nextInt(randString.length())));
randomString += rand;
g.translate(random.nextInt(3), random.nextInt(4));
g.drawString(rand, 16 * i, 25);
return randomString;
}
/**
* 繪制幹擾線
*/
private void drowLine(Graphics g) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(width);
int yl = random.nextInt(height);
g.drawLine(x, y, x + xl, y + yl);
}
/**
* 擷取随機的字元
*/
public String getRandomString(int num) {
return String.valueOf(randString.charAt(num));
}
}
參考文章 https://www.jianshu.com/p/45f9c4ffdeba