SpringBoot實(shí)現(xiàn)驗(yàn)證碼的案例分享
更新時(shí)間：2024年11月04日 08:41:26 作者：vampire-wpre
驗(yàn)證碼可以有效防止其他人對(duì)某一個(gè)特定的注冊(cè)用戶用特定的程序,破解方式進(jìn)行不斷的登錄嘗試,我們其實(shí)很經(jīng)?？吹?登錄一些網(wǎng)站其實(shí)是需要驗(yàn)證碼的,所以本文給大家分享了SpringBoot實(shí)現(xiàn)驗(yàn)證碼的案例,需要的朋友可以參考下
實(shí)現(xiàn)邏輯
1、后端功能：隨機(jī)生成驗(yàn)證碼圖片，并把交給前端、接收用戶輸入，驗(yàn)證用戶輸入的驗(yàn)證碼是否正確、
2、前端功能：顯示驗(yàn)證碼，提供輸入框供用戶輸入他們看到的驗(yàn)證碼，把用戶輸入的數(shù)據(jù)交給后端，接收后端返回的驗(yàn)證結(jié)果
前后端交互接口
后端需要完成的兩個(gè)工作：1、生成驗(yàn)證碼，2、校驗(yàn)驗(yàn)證碼的正確性
接口定義：
1、生成驗(yàn)證碼
請(qǐng)求url：/captcha/getCaptcha
響應(yīng)：返回驗(yàn)證碼的圖片
2、校驗(yàn)驗(yàn)證碼的正確性
請(qǐng)求url：/captcha/check
請(qǐng)求參數(shù):用戶輸入的驗(yàn)證碼captcha
響應(yīng)：驗(yàn)證碼正確返回true，錯(cuò)誤返回false
前端代碼
index.html
展示效果：
用戶點(diǎn)擊圖片之后，可以更新驗(yàn)證碼圖片
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>驗(yàn)證碼</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#container {
text-align: center;
background: white;
padding: 50px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
font-size: 2em;
margin-bottom: 20px;
}
#inputCaptcha {
height: 40px;
margin-right: 10px;
vertical-align: middle;
border: 1px solid #ddd;
border-radius: 4px;
padding: 0 10px;
}
#verificationCodeImg {
vertical-align: middle;
border: 1px solid #ddd;
cursor: pointer;
transition: transform 0.2s;
}
#verificationCodeImg:hover {
transform: scale(1.05);
}
#checkCaptcha {
height: 40px;
width: 120px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
#checkCaptcha:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<div id="container">
<h1>輸入驗(yàn)證碼</h1>
<div id="confirm">
<input type="text" name="inputCaptcha" id="inputCaptcha">
<img id="verificationCodeImg" src="http://127.0.0.1:8080/captcha/getCaptcha" style="cursor: pointer;"
title="看不清？換一張"/>
<input type="button" value="提交" id="checkCaptcha">
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$("#verificationCodeImg").click(function () {
$(this).hide().attr('src', 'http://127.0.0.1:8080/captcha/getCaptcha?dt=' + new Date().getTime()).fadeIn();
});
$("#checkCaptcha").click(function () {
$.ajax({
type: "post",
url: "captcha/check",
data: {
captcha: $("#inputCaptcha").val()
},
success: function (result) {
if (result) {
location.href = "success.html"
} else {
alert("驗(yàn)證碼錯(cuò)誤")
}
}
});
});
</script>
</body>
</html>
success.html，當(dāng)用戶驗(yàn)證碼輸入正確時(shí)展示的內(nèi)容
展示效果：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>驗(yàn)證成功頁</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
background: white;
padding: 50px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
color: green;
font-size: 2.5em;
margin: 0;
}
p {
color: blue;
font-size: 1.2em;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>驗(yàn)證成功</h1>
</div>
</body>
</html>
后端代碼
結(jié)構(gòu)如下：
在pom.xml中添加依賴：
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-captcha</artifactId>
<version>5.8.26</version>
</dependency>
CaptchaController類：
@RestController
@RequestMapping("/captcha")
public class CaptchaController {
//注入
@Autowired
private CaptchaProperties captchaProperties;
@Value("${captcha.session.key}")
private String key;
@Value("${captcha.session.datetime}")
private String datetime;
@RequestMapping("/getCaptcha")
public void getCaptcha(HttpServletResponse response, HttpSession session) throws IOException {
//定義圖形驗(yàn)證碼的長和寬
LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());
String code = lineCaptcha.getCode();
//設(shè)置session,把驗(yàn)證碼信息存儲(chǔ)到session中
session.setAttribute(key, code);
session.setAttribute(datetime, new Date());
//驗(yàn)證碼寫入瀏覽器
lineCaptcha.write(response.getOutputStream());
//設(shè)置ContentType
response.setContentType("image/jpeg");
//設(shè)置編碼
response.setCharacterEncoding("utf8");
//防止瀏覽器緩存驗(yàn)證碼圖片
response.setHeader("Pragma", "No-cache");
}
@RequestMapping("/check")
public boolean check(String captcha, HttpSession session) {
String code = (String) session.getAttribute(key);
if (!StringUtils.hasLength(captcha)) {
return false;
}
//從session中獲取時(shí)間
Date date = (Date) session.getAttribute(datetime);
if (date == null || System.currentTimeMillis() - date.getTime() > 60 * 1000) {
//session為null,或者session過期(超過一分鐘就算過期)
//System.currentTimeMillis() - date.getTime(): 當(dāng)前時(shí)間-請(qǐng)求時(shí)間
return false;
}
//不區(qū)分大小寫
return captcha.equalsIgnoreCase(code);
}
}
CaptchaProperties類：
@ConfigurationProperties(prefix = "captcha")
@Configuration
@Data
public class CaptchaProperties {
private Integer height;
private Integer width;
}
MySession類：
@Data
public class MySession {
private String key;
private String datetime;
}
配置文件 application.yml：
captcha:
height: 50
width: 150
session:
key: CaptchaCode
datetime: CaptchaDate
以上就是SpringBoot實(shí)現(xiàn)驗(yàn)證碼的案例分享的詳細(xì)內(nèi)容，更多關(guān)于SpringBoot驗(yàn)證碼案例的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
java后端返回?cái)?shù)據(jù)給前端時(shí)去除值為空或NULL的屬性、忽略某些屬性代碼示例
在Java開發(fā)中我們處理JSON數(shù)據(jù)時(shí)經(jīng)常會(huì)遇到空值(null)的情況,這篇文章主要給大家介紹了關(guān)于java后端返回?cái)?shù)據(jù)給前端時(shí)去除值為空或NULL的屬性、忽略某些屬性的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要給大家介紹了關(guān)于Spring中事務(wù)傳播行為的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Spring具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細(xì)介紹了Java實(shí)現(xiàn)郵件發(fā)送功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
java門禁系統(tǒng)面向?qū)ο蟪绦蛟O(shè)計(jì)
這篇文章主要為大家詳細(xì)介紹了java門禁系統(tǒng)面向?qū)ο蟪绦蛟O(shè)計(jì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
Java實(shí)現(xiàn)時(shí)間和字符串互轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了如何通過Java實(shí)現(xiàn)時(shí)間對(duì)象和字符串互相轉(zhuǎn)換,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
關(guān)于springBoot yml文件的list讀取問題總結(jié)(親測(cè))
這篇文章主要介紹了關(guān)于springBoot yml文件的list讀取問題總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-12-12
這篇文章主要介紹了maven?repository的相關(guān)知識(shí)，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
Java實(shí)現(xiàn)商品的查找、添加、出庫、入庫操作完整案例
這篇文章主要介紹了Java實(shí)現(xiàn)商品的查找、添加、出庫、入庫操作,結(jié)合完整實(shí)例形式分析了java基于面向?qū)ο蟮纳唐沸畔⑻砑?、刪除、查找等相關(guān)操作技巧,需要的朋友可以參考下2019-11-11
java實(shí)現(xiàn)波雷費(fèi)密碼算法示例代碼
這篇文章主要介紹了java實(shí)現(xiàn)波雷費(fèi)密碼算法示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
SpringBoot實(shí)現(xiàn)ImportBeanDefinitionRegistrar動(dòng)態(tài)注入
在閱讀Spring Boot源碼時(shí),看到Spring Boot中大量使用ImportBeanDefinitionRegistrar來實(shí)現(xiàn)Bean的動(dòng)態(tài)注入,它是Spring中一個(gè)強(qiáng)大的擴(kuò)展接口,本文就來詳細(xì)的介紹一下如何使用,感興趣的可以了解一下2024-02-02