我們其實(shí)很經(jīng)?？吹剑卿浺恍┚W(wǎng)站其實(shí)是需要驗(yàn)證碼的。使用驗(yàn)證碼是現(xiàn)在很多網(wǎng)站通行的一種方式，因?yàn)橛?jì)算機(jī)很難識(shí)別驗(yàn)證碼，所以可以識(shí)別驗(yàn)證碼的用戶就可以被認(rèn)為是人類。

今天我們講一下在 Java 中驗(yàn)證碼的使用。

驗(yàn)證碼生成

本效果是利用easy-captcha工具包實(shí)現(xiàn)，首先需要添加相關(guān)依賴到pom.xml中，代碼如下：

<dependency>
????<groupId>com.github.whvcse</groupId>
????<artifactId>easy-captcha</artifactId>
????<version>1.6.2</version>
</dependency>

驗(yàn)證碼格式

easy-captcha驗(yàn)證碼工具支持GIF、中文、算術(shù)等類型，分別通過下面幾個(gè)實(shí)例對(duì)象實(shí)現(xiàn)：

SpecCaptcha（PNG類型的靜態(tài)圖片驗(yàn)證碼）
GifCaptcha（Gif類型的圖片驗(yàn)證碼）
ChineseCaptcha（GIF類型中文圖片驗(yàn)證碼）
ArithmeticCaptcha（算術(shù)類型的圖片驗(yàn)證碼）

字符類型分為以下幾種：

TYPE_DEFAULT：數(shù)字和字母混合
TYPEONLYNUMBER：純數(shù)字
TYPEONLYCHAR：純字母
TYPEONLYUPPER：純大寫字母
TYPEONLYLOWER：純小寫字母
TYPENUMAND_UPPER：數(shù)字和大寫字母混合

后端邏輯的實(shí)現(xiàn)

package?com.yanx.controller;
?
import?com.wf.captcha.SpecCaptcha;
import?com.wf.captcha.base.Captcha;
import?org.springframework.stereotype.Controller;
import?org.springframework.web.bind.annotation.GetMapping;
import?org.springframework.web.bind.annotation.RequestParam;
import?org.springframework.web.bind.annotation.ResponseBody;
import?org.thymeleaf.util.StringUtils;
?
import?javax.servlet.http.HttpServletRequest;
import?javax.servlet.http.HttpServletResponse;
import?java.io.IOException;
?
@Controller
public?class?KapchaController?{
????@GetMapping("/kaptcha")
????public?void?defaultKaptcha(HttpServletRequest?httpServletRequest,?HttpServletResponse?httpServletResponse)?throws?IOException?{
????????httpServletResponse.setHeader("Cache-Control","no-store");
????????httpServletResponse.setHeader("Pragma","no-cache");
????????httpServletResponse.setDateHeader("Expires",0);
????????httpServletResponse.setContentType("image/gif");
?
????????//三個(gè)參數(shù)分別為寬、高、位數(shù)
????????SpecCaptcha?captcha=new?SpecCaptcha(75,30,4);
?
????????//設(shè)置類型為數(shù)字和字母混合
????????captcha.setCharType(Captcha.TYPE_DEFAULT);
?
????????//設(shè)置字體
????????captcha.setCharType(Captcha.FONT_9);
?
????????//驗(yàn)證碼存入session
????????httpServletRequest.getSession().setAttribute("verifyCode",captcha.text().toLowerCase());
?
????????//輸出圖片流
????????captcha.out(httpServletResponse.getOutputStream());
????}
?
}

這里控制器新增了defaultKaptcha()方法，該方法所攔截處理的路徑為/kaptcha

前端邏輯的實(shí)現(xiàn)

在static目錄中新建kaptcha.html頁面,代碼如下：

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>驗(yàn)證碼</title>
</head>
<body>
?<img?src="/kaptcha"?onclick="this.src='/kaptcha?t=new?Date()'">
</body>
</html>

訪問后端驗(yàn)證碼路徑/kaptcha,驗(yàn)證碼為圖片形式。onclick方法為點(diǎn)擊該標(biāo)簽時(shí)可以動(dòng)態(tài)切換顯示驗(yàn)證碼。

啟動(dòng)Spring Boot項(xiàng)目，打開瀏覽器輸入地址：

http://localhost:8080/kaptcha.html

效果如下：

驗(yàn)證碼驗(yàn)證

后端代碼

package?com.yanx.controller;
?
import?com.wf.captcha.SpecCaptcha;
import?com.wf.captcha.base.Captcha;
import?org.springframework.stereotype.Controller;
import?org.springframework.web.bind.annotation.GetMapping;
import?org.springframework.web.bind.annotation.RequestParam;
import?org.springframework.web.bind.annotation.ResponseBody;
import?org.thymeleaf.util.StringUtils;
?
import?javax.servlet.http.HttpServletRequest;
import?javax.servlet.http.HttpServletResponse;
import?javax.servlet.http.HttpSession;
import?java.io.IOException;
?
@Controller
public?class?KapchaController?{
????@GetMapping("/kaptcha")
????public?void?defaultKaptcha(HttpServletRequest?httpServletRequest,?HttpServletResponse?httpServletResponse)?throws?IOException?{
????????httpServletResponse.setHeader("Cache-Control","no-store");
????????httpServletResponse.setHeader("Pragma","no-cache");
????????httpServletResponse.setDateHeader("Expires",0);
????????httpServletResponse.setContentType("image/gif");
?
????????//三個(gè)參數(shù)分別為寬、高、位數(shù)
????????SpecCaptcha?captcha=new?SpecCaptcha(75,30,4);
?
????????//設(shè)置類型為數(shù)字和字母混合
????????captcha.setCharType(Captcha.TYPE_DEFAULT);
?
????????//設(shè)置字體
????????captcha.setCharType(Captcha.FONT_9);
?
????????//驗(yàn)證碼存入session
????????httpServletRequest.getSession().setAttribute("verifyCode",captcha.text().toLowerCase());
?
????????//輸出圖片流
????????captcha.out(httpServletResponse.getOutputStream());
????}
?
????@GetMapping("/verify")
????@ResponseBody
????public?String?verify(@RequestParam("code")?String?code,?HttpSession?session){
????????if(StringUtils.isEmpty(code)){
????????????return?"驗(yàn)證碼不能為空";
????????}
????????String?kapchaCode?=?session.getAttribute("verifyCode")+"";
????????if(StringUtils.isEmpty(kapchaCode)||!code.toLowerCase().equals(kapchaCode)){
????????????return?"驗(yàn)證碼輸入錯(cuò)誤";
????????}
????????return?"驗(yàn)證成功";
????}
}

前端代碼

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>驗(yàn)證碼驗(yàn)證</title>
</head>
<body>
?
<img?src="/kaptcha"?onclick="this.src='/kaptcha?d=new?Date()'">
?


<input?type="text"?maxlength="5"?id="code"?placeholder="請(qǐng)輸入驗(yàn)證碼"/>
<button?id="verify">驗(yàn)證</button>


<p?id="verifyResult"></p>
?
</body>
?
<script?src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script?type="text/javascript"?>
??$(function(){
??//驗(yàn)證按鈕點(diǎn)擊事件
???$('#verify').click(function(){
????var?code=$('#code').val();
????$.ajax({
??????type:'GET',//方法類型
??????url:'/verify?code='+code,
??????success:function(result){
????????$('#verifyResult').html(result);
??????},
??????error:function(){
????????alert('請(qǐng)求失敗');
??????},
????});
???});
??});
</script>
</html>