驗(yàn)證碼再熟悉不過了,雖然用著麻煩,但可有效防止用戶利用機(jī)器人自動注冊、登錄、灌水、自動觸發(fā)發(fā)送短信驗(yàn)證碼耗費(fèi)用以及暴力破解。所謂驗(yàn)證碼,就是將一串隨機(jī)產(chǎn)生的數(shù)字或符號,生成一幅圖片, 圖片里加上一些干擾象素(防止OCR即光學(xué)字符識別),由用戶肉眼識別其中的驗(yàn)證碼信息,輸入表單提交網(wǎng)站驗(yàn)證,驗(yàn)證成功后才能使用某項(xiàng)功能。
一、添加依賴
<!-- kaptcha驗(yàn)證碼 -->
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
二、編寫controller用于生成驗(yàn)證碼
CodeController.java
package com.erbadagang.springboot.kaptcha.controller;
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;
@Controller
public class CodeController {
@Autowired
private Producer captchaProducer = null;
@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");
//生成驗(yàn)證碼
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();
}
}
}
三、驗(yàn)證碼比對工具類:
CodeUtil.java
package com.erbadagang.springboot.kaptcha.util;
import javax.servlet.http.HttpServletRequest;
/**
* 比對驗(yàn)證碼的工具類
*/
public class CodeUtil {
/**
* 將獲取到的前端參數(shù)轉(zhuǎn)為string類型
* @param request
* @param key
* @return
*/
public static String getString(HttpServletRequest request, String key) {
try {
String result = request.getParameter(key);
if(result != null) {
result = result.trim();
}
if("".equals(result)) {
result = null;
}
return result;
}catch(Exception e) {
return null;
}
}
/**
* 驗(yàn)證碼校驗(yàn)
* @param request
* @return
*/
public static boolean checkVerifyCode(HttpServletRequest request) {
//獲取生成的驗(yàn)證碼
String verifyCodeExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
//獲取用戶輸入的驗(yàn)證碼
String verifyCodeActual = CodeUtil.getString(request, "verifyCodeActual");
if(verifyCodeActual == null ||!verifyCodeActual.equals(verifyCodeExpected)) {
return false;
}
return true;
}
}
注:這個類用來比對生成的驗(yàn)證碼與用戶輸入的驗(yàn)證碼。生成的驗(yàn)證碼會自動加到session中,用戶輸入的通過getParameter獲得。注意getParameter的key值要與頁面中驗(yàn)證碼的name值一致。
四、調(diào)用驗(yàn)證碼頁面hello.html的controller
HelloWorldController.java
package com.erbadagang.springboot.kaptcha.controller;
import com.erbadagang.springboot.kaptcha.util.CodeUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
@RestController
public class HelloWorldController {
@RequestMapping("/hello")
public String hello(HttpServletRequest request) {
if (!CodeUtil.checkVerifyCode(request)) {
return "驗(yàn)證碼有誤!";
} else {
return "hello,world";
}
}
}
五、頁面
hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function refresh() {
document.getElementById('captcha_img').src="/kaptcha?"+Math.random();
}
</script>
</head>
<body>
<form action="/hello" method="post">
驗(yàn)證碼: <input type="text" placeholder="請輸入驗(yàn)證碼" name="verifyCodeActual">
<div class="item-input">
<img id="captcha_img" alt="點(diǎn)擊更換" title="點(diǎn)擊更換"
onclick="refresh()" src="/kaptcha" />
</div>
<input type="submit" value="提交" />
</form>
</body>
</html>

說明:驗(yàn)證碼本質(zhì)是一張圖片,所以用<img >標(biāo)簽,然后通過src = "/kaptcha"指向生成驗(yàn)證碼的那個controller的路由即可;通過onclick = “refresh()”調(diào)用js代碼實(shí)現(xiàn)點(diǎn)擊切換功能;<input name = "verifyCodeActual ">中要注意name的值,在CodeUtil中通過request的getParameter()方法獲取用戶輸入的驗(yàn)證碼時傳入的key值就應(yīng)該和這里的name值verifyCodeActual一致。
六、測試:
6.1 頁面地址
http://localhost:8080/pages/hello.html
6.2 輸入正確的驗(yàn)證碼

6.2.1驗(yàn)證通過:

6.3 輸入錯誤的驗(yàn)證碼:

6.3.1 驗(yàn)證未通過

底線
本文源代碼使用 Apache License 2.0開源許可協(xié)議,可從Gitee代碼地址通過git clone命令下載到本地或者通過瀏覽器方式查看源代碼。