vue+springboot實現登錄驗證碼
本文實例為大傢分享瞭vue+springboot實現登錄驗證碼的具體代碼,供大傢參考,具體內容如下
先看效果圖
在login頁面添加驗證碼html
在後端pom文件添加kaptcha依賴
<dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>
創建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"); // 驗證碼長度 properties.setProperty("kaptcha.textproducer.char.length", "4"); // 字體 properties.setProperty("kaptcha.textproducer.font.names", "宋體,楷體,微軟雅黑"); Config config = new Config(properties); defaultKaptcha.setConfig(config); return defaultKaptcha; } }
Controller中,生成的驗證碼存儲在瞭redis中, 用於以後作校驗(redis的配置以及依賴自行百度)
@RestController @RequestMapping("/api/user") @Api(tags = "系統用戶管理") 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"); // 生成文字驗證碼 String text = defaultKaptcha.createText(); // 生成圖片驗證碼 BufferedImage image = defaultKaptcha.createImage(text); // 這裡我們使用redis緩存驗證碼的值,並設置過期時間為60秒 redisTemplate.opsForValue().set("imageCode",text,60, TimeUnit.SECONDS); ServletOutputStream out = response.getOutputStream(); ImageIO.write(image, "jpg", out); out.flush(); out.close(); }
生成之後,在登錄界面輸入驗證碼需要進行校驗輸入的是否正確
在登錄按鈕外層加一次請求判斷,驗證輸入的驗證碼是否正確,根據返回值提示錯誤信息
@PostMapping("/compareCode") public RESULT compareCode(@RequestBody String verificationCode) { if(!redisTemplate.hasKey("imageCode")) { return RESULT.error(500,"驗證碼已過期"); } String code = redisTemplate.opsForValue().get("imageCode").toString(); if(StringUtils.equals(verificationCode,code)) { return RESULT.ok(); } else { return RESULT.error(500,"驗證碼輸入錯誤"); } }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- java實現登錄驗證碼功能
- SpringBoot 圖形驗證碼的生成和校驗
- Java 實戰項目錘煉之網上花店商城的實現流程
- Spring整合Kaptcha谷歌驗證碼工具的開發步驟
- SpringBoot使用Captcha生成驗證碼