SpringBoot整合EasyCaptcha實(shí)現(xiàn)圖形驗(yàn)證碼功能
簡介
EasyCaptcha:https://github.com/ele-admin/EasyCaptcha
Java圖形驗(yàn)證碼,支持gif、中文、算術(shù)等類型,可用于Java Web、JavaSE等項(xiàng)目。
添加依賴
<dependency> <groupId>com.github.whvcse</groupId> <artifactId>easy-captcha</artifactId> <version>1.6.2</version> </dependency>
需求分析
前后端分離,前端使用 Vue3 開發(fā),后端使用 Spring Boot 開發(fā)。組件首次掛載時(shí),獲取驗(yàn)證碼。點(diǎn)擊圖片刷新獲取驗(yàn)證碼,驗(yàn)證碼存儲到 Redis 數(shù)據(jù)庫中。
代碼實(shí)現(xiàn)
前端
api
/** * 后端響應(yīng)的驗(yàn)證碼參數(shù)格式 */ export interface CaptchaResponse { /** * redis中的驗(yàn)證碼緩存key */ captchaKey: string; /** * 驗(yàn)證碼圖片Base64字符串 */ captchaBase64: string; }
/** * 獲取驗(yàn)證碼api */ export function getCaptchaApi(): AxiosPromise<CaptchaResponse> { return request({ url: '/auth/captcha', method: 'get' }) }
vue組件
<el-form-item prop="verCode"> <el-input placeholder="驗(yàn)證碼" size="large" style="width: 67%;" :prefix-icon="Aim" v-model="loginForm.verCode"> </el-input> <div class="login-code"> <el-image :src="captchaResponse.captchaBase64" style="height: 38px;" @click="getCaptcha" title="刷新圖片驗(yàn)證碼"> <template #error> <div class="image-slot"> <el-icon color="#A1A4AB"><icon-picture /></el-icon> </div> </template> </el-image> </div> </el-form-item> <script setup lang='ts'> /** * 后端響應(yīng)的驗(yàn)證碼參數(shù) */ const captchaResponse = ref<CaptchaResponse>({ captchaKey: '', // redis中的驗(yàn)證碼緩存key captchaBase64: '', // 驗(yàn)證碼圖片Base64字符串 }) /** * 獲取圖片驗(yàn)證碼 */ function getCaptcha() { getCaptchaApi().then((response) => { captchaResponse.value = response.data }).catch((error) => { return Promise.reject(error) }) } /** * 組件掛載時(shí),獲取圖片驗(yàn)證碼 */ onMounted(() => { getCaptcha() }) </script>
后端
package com.lcloud.controller; import com.lcloud.dto.UserLoginDTO; import com.lcloud.response.Response; import com.lcloud.service.AuthService; import com.lcloud.vo.CaptchaVO; import com.lcloud.vo.UserLoginVO; import com.wf.captcha.SpecCaptcha; import io.swagger.v3.oas.annotations.Operation; import io.swagger.v3.oas.annotations.tags.Tag; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.web.bind.annotation.*; import java.util.UUID; @Slf4j @RestController @RequestMapping("/auth") @Tag(name = "授權(quán)管理") public class AuthController { @Autowired private RedisTemplate<String, Object> redisTemplate; /** * 獲取圖片驗(yàn)證碼 * * @return 圖片驗(yàn)證碼的key和base64編碼字符串 * @throws Exception 拋出異常 */ @GetMapping("/captcha") @Operation(summary = "獲取圖片驗(yàn)證碼") public Response<CaptchaVO> captcha() throws Exception { // 設(shè)置圖片驗(yàn)證碼的屬性(寬、高、長度、字體) SpecCaptcha specCaptcha = new SpecCaptcha(100, 38, 4); specCaptcha.setFont(1); // 圖片驗(yàn)證碼轉(zhuǎn)換成base64編碼字符串 String captchaBase64 = specCaptcha.toBase64(); // 圖片驗(yàn)證碼結(jié)果 String key = UUID.randomUUID().toString(); //log.info("key: {}", key); String verCode = specCaptcha.text().toLowerCase(); // (key,value)=》(uuid,verCode)存入redis redisTemplate.opsForValue().set(key, verCode); // 返回圖片驗(yàn)證碼的key和base64編碼字符串 CaptchaVO captchaVO = CaptchaVO.builder().captchaKey(key).captchaBase64(captchaBase64).build(); return Response.success(captchaVO); } }
測試
以上就是SpringBoot整合EasyCaptcha實(shí)現(xiàn)圖形驗(yàn)證碼功能的詳細(xì)內(nèi)容,更多關(guān)于SpringBoot EasyCaptcha驗(yàn)證碼的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
SpringBoot結(jié)合JWT實(shí)現(xiàn)用戶登錄、注冊、鑒權(quán)
用戶登錄、注冊及鑒權(quán)是我們基本所有系統(tǒng)必備的,也是很核心重要的一塊,本文主要介紹了SpringBoot結(jié)合JWT實(shí)現(xiàn)用戶登錄、注冊、鑒權(quán),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2023-05-05Spring中SmartLifecycle和Lifecycle的作用和區(qū)別
這篇文章主要介紹了Spring中SmartLifecycle和Lifecycle的作用和區(qū)別,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03IDEA通過git回滾到某個提交節(jié)點(diǎn)或某個版本的操作方法
這篇文章主要介紹了IDEA通過git回滾到某個提交節(jié)點(diǎn)或某個版本的方法,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07Spring Boot分段處理List集合多線程批量插入數(shù)據(jù)的解決方案
大數(shù)據(jù)量的List集合,需要把List集合中的數(shù)據(jù)批量插入數(shù)據(jù)庫中,本文給大家介紹Spring Boot分段處理List集合多線程批量插入數(shù)據(jù)的解決方案,感興趣的朋友跟隨小編一起看看吧2024-04-04Mybatis插件+注解實(shí)現(xiàn)數(shù)據(jù)脫敏方式
這篇文章主要介紹了Mybatis插件+注解實(shí)現(xiàn)數(shù)據(jù)脫敏方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09SpringBoot集成quartz實(shí)現(xiàn)定時(shí)任務(wù)
這篇文章主要介紹了如何使用SpringBoot整合Quartz,并將定時(shí)任務(wù)寫入庫中(持久化存儲),還可以任意對定時(shí)任務(wù)進(jìn)行如刪除、暫停、恢復(fù)等操作,需要的可以了解下2023-09-09SpringDataJpa多表操作的實(shí)現(xiàn)
開發(fā)過程中會有很多多表的操作,他們之間有著各種關(guān)系,本文主要介紹了SpringDataJpa多表操作的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11