前后端分离项目验证码实现

一、验证码实现流程：

1、后端使用工具生成二维码（包括image的字符串和code字符）；

2、使用uuid生成唯一的key值，将key和code以键值对的形式存储到redis缓存中，设置过期时间；

3、将image字符串和key值发送给前端，前端将image字符串转换成图片渲染到页面；

4、将用户输入的验证码和接收的key值一起发送给后端；

5、后端使用key从redis中读取code值，（转大小写）进行比对；

6、比对成功执行相关操作，比对失败进行相关操作；

二、代码实现

1、使用 CaptchaUtil 工具类生成二维码，存入 redis 中并返回给前端

@Service
public class CheckCodeServiceImpl implements CheckCodeService {@AutowiredRedisTemplate<String, String> redisTemplate;@Overridepublic CheckCode getCheckCode() {//  150、50为图形的长、宽。 4表示生成4位验证码，2表示干扰线是2位，并放入redisCircleCaptcha circleCaptcha = CaptchaUtil.createCircleCaptcha(150, 50, 4, 2);//code验证码String codeValue = circleCaptcha.getCode();//图片验证码String imageBase64 = circleCaptcha.getImageBase64();//添加文件头部//"data:images/png;base64,"+imageBase64  直接显示String img = "data:images/png;base64," +imageBase64;//生成唯一keyString uuid = UUID.randomUUID().toString();String key = uuid.replace("-", "");//存入redis,并设置过期时间redisTemplate.opsForValue().set(key, codeValue, 3, TimeUnit.MINUTES);//封装返回对象CheckCode checkCode = new CheckCode();checkCode.setCheckImg(img);checkCode.setCheckMessage(key);return  checkCode;}
}

2、前端接收并渲染到页面

//js代码//验证
const checkImg = ref("")const getCheckCode = async()=>{return request.get(`/checkCode/get`)
}//html代码<div class="login_span">验证码：<el-input v-model="user.checkCode" style="width: 210px;height:40px;margin-bottom:30px;" placeholder="Please input" /><el-image style="width: 100px; height: 40px;margin-left: 10px;cursor:pointer;" :src="checkImg" :fit="fit"/>
</div>

3、前端向后端发送校验请求并携带key和验证码

//登录
const user = reactive({username: "",password: "",//输入的验证码checkCode:"",//keycheckMessage:""
})async function(){const {data} = await request.post(`/auth/login`,user)
}

4、后端收到请求，进行校验

    @Overridepublic String login(LoginDto loginDto) {//验证码验证String checkCode = loginDto.getCheckCode();String queryCode = redisTemplate.opsForValue().get(loginDto.getCheckMessage());//统一为小写比较String lowerCaseCheckCode = checkCode.toLowerCase();String lowerCasequeryCode = queryCode.toLowerCase();if(!lowerCaseCheckCode.equals(lowerCasequeryCode)){throw new RuntimeException("验证码错误");}//删除验证码缓存redisTemplate.delete(loginDto.getCheckMessage());//获取认证方法进行认证String username = loginDto.getUsername();LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<User>().eq(User::getUsername, username);User user = userMapper.selectOne(queryWrapper);if(null == user){throw new RuntimeException("用户不存在");}//比较密码String passwordDb = user.getPassword();String password = loginDto.getPassword();boolean matches = passwordEncoder.matches(password, passwordDb);if(!matches){throw new RuntimeException("密码错误");}int id = user.getId();String userid = String.valueOf(id);//生成jwtString jwt = JwtUtils.createJWT(userid);//将用户信息转换成json数据String jsonString = JSON.toJSONString(user);//将用户信息存入redisredisTemplate.opsForValue().set("userId:"+userid,jsonString,30, TimeUnit.MINUTES);//返回给前端令牌return jwt;}