Spring Boot實現登錄驗證碼功能的案例詳解
驗證碼的作用
驗證碼的作用:可以有效防止其他人對某一個特定的註冊用戶用特定的程序暴力破解方式進行不斷的登錄嘗試
我們其實很經常看到，登錄一些網站其實是需要驗證碼的，比如牛客，QQ等。使用驗證碼是現在很多網站通行的一種方式，這個問題是由計算機生成並且評判的，但是必須隻有人類才能解答，因為計算機無法解答驗證碼的問題，所以回答出問題的用戶就可以被認為是人類。
驗證碼一般用來防止批量註冊。
案例要求
驗證碼本質:後端程序隨機驗證碼
圖片的創建:
—java api手動創建圖片
—JavaScript 前端創建圖片
驗證碼的刷新
—添加JavaScript的點擊事件，重新請求驗證碼圖片
前端頁面準備
因為涉及到jQuery，所以需要在resources/static創建目錄，存放jQuery庫
準備login.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶登錄</title>
<!--引入jQuery -->
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<h2>用戶登錄</h2>
<form action="/login" method="post">
用戶名:<input type="text" name="username"><br><br>
密碼 :<input type="password" name="password"><br><br>
驗證碼:<input id="identify-input" type="text" name="identifyCode">
<img id="identify-img" src="/identifyImage"><br><br>
<input type="submit" value="登錄">
</form>
<!--綁定點擊事件 -->
<script>
$("#identify-img").on('click',function (){
// 點擊驗證碼那個圖片的時候，我們輸入的驗證碼那個框就會清空
$('#identify-input').val('')
//而且我們點擊驗證碼的時候，希望它可以改變驗證碼內容，其實是通過發送新請求來改變驗證碼內容
$('#identify-img').attr('src','/identifyImage?'+Math.random())
})
</script>
</body>
</html>
隨機驗證碼工具類
public class IdentifyCodeUtils {
//設置圖片寬
private int width = 95;
//設置圖片高度
private int height = 25;
//設置幹擾線數量
private int lineSize = 40;
//隨機產生數字和字母組合的字符串
private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
private Random random = new Random();
/**
* 獲得字體
*/
private Font getFont() {
return new Font("Fixedsys", Font.CENTER_BASELINE, 18);
}
/**
* 獲得顏色
*/
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);
}
/**
* 獲取驗證碼
*
* @return
*/
public String getIdentifyCode() {
StringBuffer buffer = new StringBuffer();
for (int i = 0; i < 4; i++) {
char c = randString.charAt(random.nextInt(randString.length()));
buffer.append(c);
}
return buffer.toString();
}
/**
* 生成隨機圖片
*
* @param identifyCode
* @return
*/
public BufferedImage getIdentifyImage(String identifyCode) {
//BufferedImage類是具有緩沖區的Image類，Image類是用來描述圖像信息的類
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
//產生Image對象的Graphics對象，改對象可以在圖像上進行各種繪制操作
Graphics graphics = image.getGraphics();
//圖片大小
graphics.fillRect(0, 0, width, height);
//字體大小
graphics.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));
//字體顏色
graphics.setColor(getRandColor(110, 133));
//繪制幹擾線
for (int i = 0; i <= lineSize; i++) {
drawLine(graphics);
}
//繪制隨機字符
drawString(graphics, identifyCode);
graphics.dispose();
return image;
}
/**
* 繪制字符串
*/
private void drawString(Graphics g, String identifyCode) {
for (int i = 0; i < identifyCode.length(); i++) {
g.setFont(getFont());
g.setColor(new Color(random.nextInt(101), random.nextInt(111), random
.nextInt(121)));
g.translate(random.nextInt(3), random.nextInt(3));
g.drawString(String.valueOf(identifyCode.charAt(i)), 13 * i + 20, 18);
}
}
/**
* 響應驗證碼圖片
*
* @param identifyImg
* @param response
*/
public void responseIdentifyImg(BufferedImage identifyImg, HttpServletResponse response) {
//設置響應類型，告訴瀏覽器輸出的內容是圖片
response.setContentType("image/jpeg");
//設置響應頭信息，告訴瀏覽器不用緩沖此內容
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expire", 0);
try {
//把內存中的圖片通過流動形式輸出到客戶端
ImageIO.write(identifyImg, "JPEG", response.getOutputStream());
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 繪制幹擾線
*/
private void drawLine(Graphics graphics) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(13);
int yl = random.nextInt(15);
graphics.drawLine(x, y, x + xl, y + yl);
}
}
後端控制器
@Controller
public class UserController {
@RequestMapping("/loginShow")
public String loginShow(){
return "login.html";
}
@PostMapping("/login")
public String login(String username,String password,String identifyCode,HttpSession session){
System.out.println("用戶名:"+username);
System.out.println("密碼:"+password);
System.out.println("驗證碼:"+identifyCode);
//從session中取出驗證碼
String sessionCode = (String)session.getAttribute("identifyFyCode");
if (identifyCode.equalsIgnoreCase(sessionCode)){
System.out.println("驗證碼正確");
//進行登錄判斷的邏輯大傢自己寫，這裡就不演示瞭
}else{
System.out.println("驗證碼錯誤");
//重定向到登錄畫面
return "redirect:/loginShow";
}
return "";
}
/**
* 給前端返回一個驗證碼圖片
* @return
*/
@RequestMapping("/identifyImage")
public void identifyImage(HttpServletResponse response, HttpSession session){
//創建隨機驗證碼
IdentifyCodeUtils utils = new IdentifyCodeUtils();
String identifyCode = utils.getIdentifyCode();
//session存入驗證碼
session.setAttribute("identifyCode", identifyCode);
//根據驗證碼創建圖片
BufferedImage identifyImage = utils.getIdentifyImage(identifyCode);
//回傳給前端
utils.responseIdentifyImg(identifyImage,response);
}
}
測試
當我們點擊驗證碼這個圖片的時候，它就會生成新驗證碼
並且如果我們在輸入框中如果有寫驗證碼的話，當我們點擊驗證碼圖片，它就會把輸入框內容清空(大傢自己測試)
到此這篇關於Spring Boot實現登錄驗證碼功能的案例詳解的文章就介紹到這瞭,更多相關springboot登錄驗證碼內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！