目录

一、页面需求展示

二、验证方式—按钮组件

三、手机短信验证

四、邮件验证

五、图片验证邮件验证

💟 创作不易，不妨点赞💚评论❤️收藏💙一下

一、页面需求展示

二、验证方式—按钮组件

 2.1前端

三、手机短信验证

3.1 前端

短信发送{{seconds}}秒  {{errorMsg.message}}

3.2后端

 生成短信验证码，保存在redis中

@RestController
@RequestMapping("/sms")
public class SmsController {@Resourceprivate StringRedisTemplate stringRedisTemplate ;@PostMapping("/code")public BaseResult sendSms(@RequestBody TbUser user){//获取当前毫秒值long start = System.currentTimeMillis();try {//发送短信//1.生成验证码，随机4位数String code = RandomStringUtils.randomNumeric(4);System.out.println("短信验证码：" + code);//存放在redis中stringRedisTemplate.opsForValue().set("smsPhone"+user.getTelephone(),code,1, TimeUnit.HOURS);//发送短信SendSmsResponse smsResponse = SmsUtil.sendSms(user.getTelephone(), user.getUserName(), code, "", "");if ("OK".equalsIgnoreCase(smsResponse.getCode())){return BaseResult.ok("短信发送成功，请查收！");}else {return BaseResult.error(smsResponse.getMessage());}} catch (ClientException e) {//获取结束时间毫秒值long end = System.currentTimeMillis();System.out.println(end -start);return BaseResult.error("短信发送失败！");}}}

点击登录进行短信验证码判断是否正确

@RestController
@RequestMapping("/user")
public class UserController {@Resourceprivate UserService userService ;@Resourceprivate JwtProperties jwtProperties ;@Resourceprivate StringRedisTemplate stringRedisTemplate ;@PostMapping("/login")public BaseResult login(@RequestBody TbUser user) throws Exception {//手机短信验证if (user.getCodeSms() != null) {//获取短信验证码String sms = "smsPhone" + user.getTelephone() ;String keySms = stringRedisTemplate.opsForValue().get(sms);stringRedisTemplate.delete(keySms);if (keySms == null ){return BaseResult.error("短信验证码无效！");}if (!keySms.equalsIgnoreCase(user.getCodeSms())){return BaseResult.error("短信验证码错误！");}}//登录对用户名和密码进行判断//调用userService接口中的方法login进行实现类编写，判断用户名和密码是否正确TbUser findUser = userService.login(user);if (findUser != null){//设置tokenString token = JwtUtils.generateToken(findUser, jwtProperties.getExpire(), jwtProperties.getPrivateKey());return BaseResult.ok("登录成功，欢迎"+findUser.getUserName(),findUser).append("token",token);}else {return BaseResult.error("用户名或密码不正确！");}}
}

四、邮件验证

4.1 前端

邮件发送{{seconds}}秒  {{errorMsg.message}}

4.2后端

  生成短信验证码，保存在redis中

@RestController
@RequestMapping("/email")
public class EmailController {@Resourceprivate StringRedisTemplate stringRedisTemplate ;@Resourceprivate JavaMailSender javaMailSender ;@PostMapping("/send")public BaseResult send(@RequestBody TbUser tbUser){try {//随机生成验证码String code = RandomStringUtils.randomNumeric(4);System.out.println("邮件验证码："+code);//保存到redisString key = "email"+tbUser.getUserName();stringRedisTemplate.opsForValue().set(key,code,1, TimeUnit.HOURS);//发送EmailUtils.sendEmail(javaMailSender,tbUser.getEmail(),"邮件验证码为："+code);//返回return BaseResult.ok("邮件发送成功！");} catch (Exception e) {e.getMessage();return BaseResult.error("发送邮件失败！");}}
}

点击登录进行邮件验证码判断是否正确

@RestController
@RequestMapping("/user")
public class UserController {@Resourceprivate UserService userService ;@Resourceprivate JwtProperties jwtProperties ;@Resourceprivate StringRedisTemplate stringRedisTemplate ;@PostMapping("/login")public BaseResult login(@RequestBody TbUser user) throws Exception {//邮箱验证if (user.getEmailCode() != null){//获取邮箱验证码String keyEmail = "email"+user.getUserName();String redisEmail = stringRedisTemplate.opsForValue().get(keyEmail);stringRedisTemplate.delete(keyEmail);if (redisEmail == null){return BaseResult.error("email验证码无效！");}if (!redisEmail.equalsIgnoreCase(user.getEmailCode())){return BaseResult.error("email验证码错误！");}}//登录对用户名和密码进行判断//调用userService接口中的方法login进行实现类编写，判断用户名和密码是否正确TbUser findUser = userService.login(user);if (findUser != null){//设置tokenString token = JwtUtils.generateToken(findUser, jwtProperties.getExpire(), jwtProperties.getPrivateKey());return BaseResult.ok("登录成功，欢迎"+findUser.getUserName(),findUser).append("token",token);}else {return BaseResult.error("用户名或密码不正确！");}}
}

五、图片验证邮件验证

5.1 前端

看不清？换一张{{errorMsg.message}}

5.2后端

 生成图片验证码，保存在redis中

@Controller
@RequestMapping("/verifycode")
public class VerifyCodeController {@Resourceprivate StringRedisTemplate stringRedisTemplate ;@GetMappingpublic void verifyCodeFn(String userName,HttpServletResponse response) throws Exception {//准备数据//字体只显示大写，去掉了1,0,i,o几个容易混淆的字符String VERIFY_CODES = "23456789ABCDEFGHJKLMNPQRSTUVWXYZ";int IMG_WIDTH = 72;int IMG_HEIGTH = 27;Random random = new Random();//创建图片BufferedImage image = new BufferedImage(IMG_WIDTH, IMG_HEIGTH, BufferedImage.TYPE_INT_RGB);//画板Graphics g = image.getGraphics();//填充背景g.setColor(Color.WHITE);g.fillRect(1,1,IMG_WIDTH-2,IMG_HEIGTH-2);g.setFont(new Font("楷体", Font.BOLD,25));StringBuilder sb = new StringBuilder();//写字for(int i = 1 ; i <= 4 ; i ++){//随机颜色g.setColor(new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255)));int len = random.nextInt(VERIFY_CODES.length());String str = VERIFY_CODES.substring(len,len+1);sb.append(str);g.drawString(str, IMG_WIDTH / 6 * i , 22 );}//将验证码存放到redis//设置名称login+username ,过期时间1小时stringRedisTemplate.opsForValue().set( "login" + userName , sb.toString() , 1 , TimeUnit.HOURS);// 生成随机干扰线for (int i = 0; i < 30; i++) {//随机颜色g.setColor(new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255)));int x = random.nextInt(IMG_WIDTH - 1);int y = random.nextInt(IMG_HEIGTH - 1);int x1 = random.nextInt(12) + 1;int y1 = random.nextInt(6) + 1;g.drawLine(x, y, x - x1, y - y1);}//响应到浏览器ImageIO.write(image,"jpeg", response.getOutputStream());}
}

点击登录进行图片验证码判断是否正确

@RestController
@RequestMapping("/user")
public class UserController {@Resourceprivate UserService userService ;@Resourceprivate JwtProperties jwtProperties ;@Resourceprivate StringRedisTemplate stringRedisTemplate ;@PostMapping("/login")public BaseResult login(@RequestBody TbUser user) throws Exception {//校验图片验证码if (!user.getVerifyCode().equals("")) {//获取验证码String key = "login" + user.getUserName() ;String verify = stringRedisTemplate.opsForValue().get(key);//删除验证码stringRedisTemplate.delete(key);if (verify == null) {return BaseResult.error("图片验证码无效！");}if (!verify.equalsIgnoreCase(user.getVerifyCode())) {return BaseResult.error("图片验证码错误！");}}//登录对用户名和密码进行判断//调用userService接口中的方法login进行实现类编写，判断用户名和密码是否正确TbUser findUser = userService.login(user);if (findUser != null){//设置tokenString token = JwtUtils.generateToken(findUser, jwtProperties.getExpire(), jwtProperties.getPrivateKey());return BaseResult.ok("登录成功，欢迎"+findUser.getUserName(),findUser).append("token",token);}else {return BaseResult.error("用户名或密码不正确！");}}
}

写到最后

四季轮换，已经数不清凋零了多少， 愿我们往后能向心而行，一路招摇胜！

🐋 你的支持认可是我创作的动力

💟 创作不易，不妨点赞💚评论❤️收藏💙一下

😘 感谢大佬们的支持，欢迎各位前来不吝赐教