当前位置: 首页> 娱乐> 明星 > 前后端分离项目验证码实现

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

时间:2025/7/11 15:35:54来源:https://blog.csdn.net/qh1112/article/details/140044232 浏览次数:0次

一、验证码实现流程:

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;}

关键字:前后端分离项目验证码实现

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: