vue+springboot實(shí)現(xiàn)登錄驗(yàn)證碼
本文實(shí)例為大家分享了vue+springboot實(shí)現(xiàn)登錄驗(yàn)證碼的具體代碼,供大家參考,具體內(nèi)容如下
先看效果圖
在login頁面添加驗(yàn)證碼html
在后端pom文件添加kaptcha依賴
<dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>
創(chuàng)建KaptchaConfig工具類
package com.brilliance.module.system.controller.util; import com.google.code.kaptcha.impl.DefaultKaptcha; import com.google.code.kaptcha.util.Config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import java.util.Properties; @Configuration public class KaptchaConfig { @Bean public DefaultKaptcha getDefaultKaptcha() { DefaultKaptcha defaultKaptcha = new DefaultKaptcha(); Properties properties = new Properties(); // 圖片寬 properties.setProperty("kaptcha.image.width", "180"); // 圖片高 properties.setProperty("kaptcha.image.height", "50"); // 圖片邊框 properties.setProperty("kaptcha.border", "yes"); // 邊框顏色 properties.setProperty("kaptcha.border.color", "105,179,90"); // 字體顏色 properties.setProperty("kaptcha.textproducer.font.color", "blue"); // 字體大小 properties.setProperty("kaptcha.textproducer.font.size", "40"); // session key properties.setProperty("kaptcha.session.key", "code"); // 驗(yàn)證碼長(zhǎng)度 properties.setProperty("kaptcha.textproducer.char.length", "4"); // 字體 properties.setProperty("kaptcha.textproducer.font.names", "宋體,楷體,微軟雅黑"); Config config = new Config(properties); defaultKaptcha.setConfig(config); return defaultKaptcha; } }
Controller中,生成的驗(yàn)證碼存儲(chǔ)在了redis中, 用于以后作校驗(yàn)(redis的配置以及依賴自行百度)
@RestController @RequestMapping("/api/user") @Api(tags = "系統(tǒng)用戶管理") public class SysUserController extends AbstractController{ @Autowired private SysUserService sysUserService; @Autowired private DefaultKaptcha defaultKaptcha; @Autowired RedisTemplate redisTemplate; @GetMapping("/createImageCode") public void createImageCode(HttpServletRequest request, HttpServletResponse response) throws IOException { response.setHeader("Cache-Control", "no-store, no-cache"); response.setContentType("image/jpeg"); // 生成文字驗(yàn)證碼 String text = defaultKaptcha.createText(); // 生成圖片驗(yàn)證碼 BufferedImage image = defaultKaptcha.createImage(text); // 這里我們使用redis緩存驗(yàn)證碼的值,并設(shè)置過期時(shí)間為60秒 redisTemplate.opsForValue().set("imageCode",text,60, TimeUnit.SECONDS); ServletOutputStream out = response.getOutputStream(); ImageIO.write(image, "jpg", out); out.flush(); out.close(); }
生成之后,在登錄界面輸入驗(yàn)證碼需要進(jìn)行校驗(yàn)輸入的是否正確
在登錄按鈕外層加一次請(qǐng)求判斷,驗(yàn)證輸入的驗(yàn)證碼是否正確,根據(jù)返回值提示錯(cuò)誤信息
@PostMapping("/compareCode") public RESULT compareCode(@RequestBody String verificationCode) { if(!redisTemplate.hasKey("imageCode")) { return RESULT.error(500,"驗(yàn)證碼已過期"); } String code = redisTemplate.opsForValue().get("imageCode").toString(); if(StringUtils.equals(verificationCode,code)) { return RESULT.ok(); } else { return RESULT.error(500,"驗(yàn)證碼輸入錯(cuò)誤"); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- springboot實(shí)現(xiàn)攔截器之驗(yàn)證登錄示例
- SpringBoot + SpringSecurity 短信驗(yàn)證碼登錄功能實(shí)現(xiàn)
- Springboot實(shí)現(xiàn)驗(yàn)證碼登錄
- SpringBoot登錄驗(yàn)證碼實(shí)現(xiàn)過程詳解
- SpringBoot Security前后端分離登錄驗(yàn)證的實(shí)現(xiàn)
- springboot短信驗(yàn)證碼登錄功能的實(shí)現(xiàn)
- SpringBoot連接Microsoft SQL Server實(shí)現(xiàn)登錄驗(yàn)證
相關(guān)文章
vue面試??贾甤omputed是如何實(shí)現(xiàn)的
對(duì)于每天都在用的計(jì)算屬性(computed),小編猜大家肯定也想窺探其奧妙與原理對(duì)吧,所以這篇文章就來講講computed是如何實(shí)現(xiàn)的吧,感興趣的小伙伴可以學(xué)習(xí)一下2023-08-08VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題
這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06Vue中@click.stop與@click.prevent解讀
Vue中,`@click.stop`用于阻止事件冒泡,而`@click.prevent`用于阻止事件的默認(rèn)行為,這兩個(gè)方法在處理事件時(shí)非常有用2025-02-02Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文)
這篇文章主要介紹了Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09五種Vue實(shí)現(xiàn)加減乘除運(yùn)算的方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了五種Vue實(shí)現(xiàn)加減乘除運(yùn)算的方法,文中的示例代碼簡(jiǎn)潔易懂,對(duì)我們深入了解vue有一定的幫助,需要的可以了解下2023-08-08使用vue-router beforEach實(shí)現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選功能
這篇文章主要介紹了vue使用vue-router beforEach實(shí)現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選,本篇文章默認(rèn)您已經(jīng)會(huì)使用 webpack 或者 vue-cli 來進(jìn)行環(huán)境的搭建,并且具有一定的vue基礎(chǔ)。需要的朋友可以參考下2018-06-06vue2前端使用axios發(fā)起post請(qǐng)求后端(springboot)接收不到值解決辦法
這篇文章主要介紹了vue2前端使用axios發(fā)起post請(qǐng)求后端(springboot)接收不到值解決辦法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-03-03