溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Spring Boot如何實現登錄驗證碼功能”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Spring Boot如何實現登錄驗證碼功能”文章能幫助大家解決問題。
驗證碼的作用:可以有效防止其他人對某一個特定的注冊用戶用特定的程序暴力破解方式進行不斷的登錄嘗試
我們其實很經常看到，登錄一些網站其實是需要驗證碼的，比如牛客，QQ等。使用驗證碼是現在很多網站通行的一種方式，這個問題是由計算機生成并且評判的，但是必須只有人類才能解答，因為計算機無法解答驗證碼的問題，所以回答出問題的用戶就可以被認為是人類。
驗證碼一般用來防止批量注冊。
驗證碼本質:后端程序隨機驗證碼
圖片的創建:
—java api手動創建圖片
—JavaScript 前端創建圖片
驗證碼的刷新
—添加JavaScript的點擊事件，重新請求驗證碼圖片
因為涉及到jQuery，所以需要在resources/static創建目錄，存放jQuery庫
<!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>
<h3>用戶登錄</h3>
<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如何實現登錄驗證碼功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
