前言
為了防止世界被破壞,為了守護世界的和平。。。說錯了,重來~
為了防止驗證系統被暴力破解,很多系統都增加了驗證碼效驗,比較常見的就是圖片二維碼,業內比較安全的是短信驗證碼,當然還有一些拼圖驗證碼,加入人工智能的二維碼等等,我們今天的主題就是前后端分離的圖片二維碼登錄方案。
基于 Spring Boot + MyBatis Plus + Vue & Element 實現的后臺管理系統 + 用戶小程序,支持 RBAC 動態權限、多租戶、數據權限、工作流、三方登錄、支付、短信、商城等功能
- 項目地址:https://github.com/YunaiV/ruoyi-vue-pro
- 視頻教程:https://doc.iocoder.cn/video/
前后端未分離的驗證碼登錄方案
傳統的項目大都是基于session交互的,前后端都在一個項目里面,比如傳統的SSH項目或者一些JSP系統,當前端頁面觸發到獲取驗證碼請求,可以將驗證碼里面的信息存在上下文中,所以登錄的時候只需要 用戶名
、密碼
、驗證碼
即可。
驗證碼生成流程如下
登錄驗證流程如下
可以發現,整個登錄流程還是依賴session上下文的,并且由后端調整頁面。
基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 實現的后臺管理系統 + 用戶小程序,支持 RBAC 動態權限、多租戶、數據權限、工作流、三方登錄、支付、短信、商城等功能
前后端分離的驗證碼登錄方案
隨著系統和業務的不停升級,前后端代碼放在一起的項目越來越臃腫,已經無法快速迭代和職責區分了,于是紛紛投入了前后端分離的懷抱,發現代碼和職責分離以后,開發效率越來越高了,功能迭代還越來越快,但是以前的驗證碼登錄方案就要更改了。
驗證碼生成流程如下
對比原來的方案,增加了redis中間件,不再是存在session里面了,但是后面怎么區分這個驗證碼是這個請求生成的呢?所以我們加入了唯一標識符來區分
登錄驗證流程如下
可以發現,基于前后端分離的分布式項目登錄方案對比原來,加了一個redis中間件和token返回,不再依賴上下文session,并且頁面調整也是由后端換到了前端
動手擼輪子
基于驗證碼的輪子還是挺多的,本文就以Kaptcha
這個項目為例,通過springboot項目集成Kaptcha
來實現驗證碼生成和登錄方案。
Kaptcha介紹
Kaptcha是一個基于SimpleCaptcha的驗證碼開源項目
我找的這個輪子是基于SimpleCaptcha二次封裝的,maven依賴如下
<dependency>
<groupId>com.github.pengglegroupId>
<artifactId>kaptchaartifactId>
<version>2.3.2version>
dependency>
新建項目并加入依賴
依賴主要有 SpringBoot、Kaptcha、Redis
pom.xml
<projectxmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0modelVersion>
<groupId>com.lzpgroupId>
<artifactId>kaptchaartifactId>
<version>1.0-SNAPSHOTversion>
<parent>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-parentartifactId>
<version>2.3.0.RELEASEversion>
<relativePath/>
parent>
<dependencies>
<dependency>
<groupId>com.github.pengglegroupId>
<artifactId>kaptchaartifactId>
<version>2.3.2version>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-data-redisartifactId>
dependency>
<dependency>
<groupId>org.apache.commonsgroupId>
<artifactId>commons-pool2artifactId>
dependency>
<dependency>
<groupId>com.alibabagroupId>
<artifactId>fastjsonartifactId>
<version>1.2.3version>
dependency>
<dependency>
<groupId>com.fasterxml.jackson.coregroupId>
<artifactId>jackson-databindartifactId>
dependency>
dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-maven-pluginartifactId>
plugin>
plugins>
build>
project>
Redis配置類RedisConfig
@Configuration
publicclassRedisConfig{
@Bean
publicRedisTemplateredisTemplate(LettuceConnectionFactoryredisConnectionFactory) {
RedisTemplateredisTemplate=newRedisTemplate();
redisTemplate.setKeySerializer(newStringRedisSerializer());
redisTemplate.setValueSerializer(newGenericJackson2JsonRedisSerializer());
redisTemplate.setHashKeySerializer(newStringRedisSerializer());
redisTemplate.setHashValueSerializer(newGenericJackson2JsonRedisSerializer());
redisTemplate.setConnectionFactory(redisConnectionFactory);
returnredisTemplate;
}
}
驗證碼配置類KaptchaConfig
@Configuration
publicclassKaptchaConfig{
@Bean
publicDefaultKaptchaproducer(){
DefaultKaptchadefaultKaptcha=newDefaultKaptcha();
Propertiesproperties=newProperties();
properties.setProperty("kaptcha.border","no");
properties.setProperty("kaptcha.border.color","105,179,90");
properties.setProperty("kaptcha.textproducer.font.color","black");
properties.setProperty("kaptcha.image.width","110");
properties.setProperty("kaptcha.image.height","40");
properties.setProperty("kaptcha.textproducer.char.string","23456789abcdefghkmnpqrstuvwxyzABCDEFGHKMNPRSTUVWXYZ");
properties.setProperty("kaptcha.textproducer.font.size","30");
properties.setProperty("kaptcha.textproducer.char.space","3");
properties.setProperty("kaptcha.session.key","code");
properties.setProperty("kaptcha.textproducer.char.length","4");
properties.setProperty("kaptcha.textproducer.font.names","宋體,楷體,微軟雅黑");
//properties.setProperty("kaptcha.obscurificator.impl","com.xxx");可以重寫實現類
properties.setProperty("kaptcha.noise.impl","com.google.code.kaptcha.impl.NoNoise");
Configconfig=newConfig(properties);
defaultKaptcha.setConfig(config);
returndefaultKaptcha;
}
驗證碼控制層CaptchaController
為了方便代碼寫一塊了,講究看
packagecom.lzp.kaptcha.controller;
importcom.google.code.kaptcha.impl.DefaultKaptcha;
importcom.lzp.kaptcha.service.CaptchaService;
importcom.lzp.kaptcha.vo.CaptchaVO;
importorg.springframework.beans.factory.annotation.Autowired;
importorg.springframework.web.bind.annotation.GetMapping;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.ResponseBody;
importorg.springframework.web.bind.annotation.RestController;
importsun.misc.BASE64Encoder;
importjavax.imageio.ImageIO;
importjava.awt.image.BufferedImage;
importjava.io.ByteArrayOutputStream;
importjava.io.IOException;
@RestController
@RequestMapping("/captcha")
publicclassCaptchaController{
@Autowired
privateDefaultKaptchaproducer;
@Autowired
privateCaptchaServicecaptchaService;
@ResponseBody
@GetMapping("/get")
publicCaptchaVOgetCaptcha()throwsIOException{
//生成文字驗證碼
Stringcontent=producer.createText();
//生成圖片驗證碼
ByteArrayOutputStreamoutputStream=null;
BufferedImageimage=producer.createImage(content);
outputStream=newByteArrayOutputStream();
ImageIO.write(image,"jpg",outputStream);
//對字節數組Base64編碼
BASE64Encoderencoder=newBASE64Encoder();
Stringstr="data:image/jpeg;base64,";
Stringbase64Img=str+encoder.encode(outputStream.toByteArray()).replace("
","").replace("
","");
CaptchaVOcaptchaVO=captchaService.cacheCaptcha(content);
captchaVO.setBase64Img(base64Img);
returncaptchaVO;
}
}
驗證碼返回對象CaptchaVO
packagecom.lzp.kaptcha.vo;
publicclassCaptchaVO{
/**
*驗證碼標識符
*/
privateStringcaptchaKey;
/**
*驗證碼過期時間
*/
privateLongexpire;
/**
*base64字符串
*/
privateStringbase64Img;
publicStringgetCaptchaKey(){
returncaptchaKey;
}
publicvoidsetCaptchaKey(StringcaptchaKey){
this.captchaKey=captchaKey;
}
publicLonggetExpire(){
returnexpire;
}
publicvoidsetExpire(Longexpire){
this.expire=expire;
}
publicStringgetBase64Img(){
returnbase64Img;
}
publicvoidsetBase64Img(Stringbase64Img){
this.base64Img=base64Img;
}
}
Redis封裝類 RedisUtils
網上隨意找的,類里面注明來源,將就用,代碼較多就不貼了,文末有代碼獲取
驗證碼方法層CaptchaService
packagecom.lzp.kaptcha.service;
importcom.lzp.kaptcha.utils.RedisUtils;
importcom.lzp.kaptcha.vo.CaptchaVO;
importorg.springframework.beans.factory.annotation.Autowired;
importorg.springframework.beans.factory.annotation.Value;
importorg.springframework.stereotype.Service;
importjava.util.UUID;
@Service
publicclassCaptchaService{
@Value("${server.session.timeout:300}")
privateLongtimeout;
@Autowired
privateRedisUtilsredisUtils;
privatefinalStringCAPTCHA_KEY="captcha";
publicCaptchaVOcacheCaptcha(Stringcaptcha){
//生成一個隨機標識符
StringcaptchaKey=UUID.randomUUID().toString();
//緩存驗證碼并設置過期時間
redisUtils.set(CAPTCHA_KEY.concat(captchaKey),captcha,timeout);
CaptchaVOcaptchaVO=newCaptchaVO();
captchaVO.setCaptchaKey(captchaKey);
captchaVO.setExpire(timeout);
returncaptchaVO;
}
}
用戶登錄對象封裝LoginDTO
packagecom.lzp.kaptcha.dto;
publicclassLoginDTO{
privateStringuserName;
privateStringpwd;
privateStringcaptchaKey;
privateStringcaptcha;
publicStringgetUserName(){
returnuserName;
}
publicvoidsetUserName(StringuserName){
this.userName=userName;
}
publicStringgetPwd(){
returnpwd;
}
publicvoidsetPwd(Stringpwd){
this.pwd=pwd;
}
publicStringgetCaptchaKey(){
returncaptchaKey;
}
publicvoidsetCaptchaKey(StringcaptchaKey){
this.captchaKey=captchaKey;
}
publicStringgetCaptcha(){
returncaptcha;
}
publicvoidsetCaptcha(Stringcaptcha){
this.captcha=captcha;
}
}
登錄控制層UserController
這塊我寫邏輯代碼了,相信大家都看的懂
packagecom.lzp.kaptcha.controller;
importcom.lzp.kaptcha.dto.LoginDTO;
importcom.lzp.kaptcha.utils.RedisUtils;
importcom.lzp.kaptcha.vo.UserVO;
importorg.springframework.beans.factory.annotation.Autowired;
importorg.springframework.web.bind.annotation.PostMapping;
importorg.springframework.web.bind.annotation.RequestBody;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/user")
publicclassUserController{
@Autowired
privateRedisUtilsredisUtils;
@PostMapping("/login")
publicUserVOlogin(@RequestBodyLoginDTOloginDTO){
Objectcaptch=redisUtils.get(loginDTO.getCaptchaKey());
if(captch==null){
//throw驗證碼已過期
}
if(!loginDTO.getCaptcha().equals(captch)){
//throw驗證碼錯誤
}
//查詢用戶信息
//判斷用戶是否存在不存在拋出用戶名密碼錯誤
//判斷密碼是否正確,不正確拋出用戶名密碼錯誤
//構造返回到前端的用戶對象并封裝信息和生成token
returnnewUserVO();
}
}
驗證碼獲取和查看
-
代碼
+關注
關注
30文章
4567瀏覽量
66998 -
Redis
+關注
關注
0文章
365瀏覽量
10529 -
SpringBoot
+關注
關注
0文章
172瀏覽量
112
原文標題:SpringBoot 分布式驗證碼登錄方案
文章出處:【微信號:芋道源碼,微信公眾號:芋道源碼】歡迎添加關注!文章轉載請注明出處。
發布評論請先 登錄
相關推薦
鴻蒙原生應用/元服務開發-Serverless賬戶驗證碼的問題
分布式軟件系統
織夢dedecms登陸提示“驗證碼不正確”的完整解決方案
10種意想不到的驗證碼風格設計
12306圖片驗證碼難倒了誰?
為什么短信驗證碼在我們生活中頻頻出現
如何高效完成HarmonyOS分布式應用測試?
怎樣去設計一個基于springboot+freemark+jpa+MySQL的在線電影訂票系統
一文解析驗證碼與打碼平臺的攻防對抗
打碼平臺是如何高效的破解市面上各家驗證碼平臺的各種形式驗證碼的?
以一個真實網站的驗證碼為例,實現了基于一下KNN的驗證碼識別
評論