5分鐘教你使用java搞定網站登錄驗證碼

更新時間：2023年04月04日 10:32:06 作者：了不起?Java技術指北

這篇文章主要為大家介紹了使用java搞定網站登錄驗證碼的快速實現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

我們其實很經常看到，登錄一些網站其實是需要驗證碼的。使用驗證碼是現(xiàn)在很多網站通行的一種方式，因為計算機很難識別驗證碼，所以可以識別驗證碼的用戶就可以被認為是人類。

今天我們講一下在 Java 中驗證碼的使用。

驗證碼生成

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

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

驗證碼格式

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

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

字符類型分為以下幾種：

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

后端邏輯的實現(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");
?
????????//三個參數分別為寬、高、位數
????????SpecCaptcha?captcha=new?SpecCaptcha(75,30,4);
?
????????//設置類型為數字和字母混合
????????captcha.setCharType(Captcha.TYPE_DEFAULT);
?
????????//設置字體
????????captcha.setCharType(Captcha.FONT_9);
?
????????//驗證碼存入session
????????httpServletRequest.getSession().setAttribute("verifyCode",captcha.text().toLowerCase());
?
????????//輸出圖片流
????????captcha.out(httpServletResponse.getOutputStream());
????}
?
}

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

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

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

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

訪問后端驗證碼路徑/kaptcha,驗證碼為圖片形式。onclick方法為點擊該標簽時可以動態(tài)切換顯示驗證碼。

啟動Spring Boot項目，打開瀏覽器輸入地址：

http://localhost:8080/kaptcha.html

效果如下：

驗證碼驗證

后端代碼

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");
?
????????//三個參數分別為寬、高、位數
????????SpecCaptcha?captcha=new?SpecCaptcha(75,30,4);
?
????????//設置類型為數字和字母混合
????????captcha.setCharType(Captcha.TYPE_DEFAULT);
?
????????//設置字體
????????captcha.setCharType(Captcha.FONT_9);
?
????????//驗證碼存入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?"驗證碼不能為空";
????????}
????????String?kapchaCode?=?session.getAttribute("verifyCode")+"";
????????if(StringUtils.isEmpty(kapchaCode)||!code.toLowerCase().equals(kapchaCode)){
????????????return?"驗證碼輸入錯誤";
????????}
????????return?"驗證成功";
????}
}

前端代碼

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


<input?type="text"?maxlength="5"?id="code"?placeholder="請輸入驗證碼"/>
<button?id="verify">驗證</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(){
??//驗證按鈕點擊事件
???$('#verify').click(function(){
????var?code=$('#code').val();
????$.ajax({
??????type:'GET',//方法類型
??????url:'/verify?code='+code,
??????success:function(result){
????????$('#verifyResult').html(result);
??????},
??????error:function(){
????????alert('請求失敗');
??????},
????});
???});
??});
</script>
</html>