前后端不分离
在前后端不分离的开发模式下。验证码的实现相对简单,因为前端向服务器端请求验证码之后直接将验证码存储在sesison中,用户在浏览器输入验证码之后,直接从sesion中取出判断即可。
前后端分离
前后端分离之后,由于出现了跨域。以及分不是开发session不能共享的问题,后端一般都是直接禁用session,使用redis来代替session的功能。
实现流程
1、前端发送请求来请求验证码(base64)
2、服务器端接收到用户验证码的请求之后,使用工具类来生成验证码(base64)
3、将获取到的 验证码 对应的code 保存到 redis 中并设置该码的有效时间,一般建议使用 UUID 作为key,code 做value 来进行保存。直接将 验证码对应的 base64码 和 对应的UUID 响应给前端
4、前端输入完毕之后,发送登录请求时,将接收到的 UUID 作为参数一起携带到服务器端。
5、服务器端接收端到用户请求之后,根据携带来的UUID 从redis中取出对应的数据,再根据用户输入的code来进行判断是否相对即可
实现步骤:redis这里就不做说明了,直接使用springboot的 jedis 即可
1、引入hutool的验证码依赖
<!-- hutool -->
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.5.7</version>
</dependency>
2、自定义一个 用来保存 验证码信息的 实体类
package org.jcgl.entity;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/**
* 验证码对应实体类
*/
@Data
@NoArgsConstructor
@AllArgsConstructor
public class ImgResult {
// 该验证码对应的UUID
private String imgUUID;
// 该验证码对应的 base64 加密格式
private String img;
// 该验证码对应的具体的 码
private String code;
}
3、对应的 验证码生成工具类
package org.jcgl.util;
import cn.hutool.core.codec.Base64;
import lombok.extern.slf4j.Slf4j;
import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;
/**
* 〈一句话功能简述〉<br>
* 〈〉
*
* @author 1543057945
* @create 2019/1/11
* @since 1.0.0
*/
@Slf4j
public class CaptchaUtil {
//验证码个数
private int count=4;
//验证码宽度,且设置每个字的宽度
private int width=count*50;
//验证码高度
private int height=50;
//图片验证码key
private String code="";
//bufferedImage
private BufferedImage bufferedImage;
public CaptchaUtil() {
}
public CaptchaUtil(int count, int width, int height) {
this.count = count;
this.width = width;
this.height = height;
}
public int getCount() {
return count;
}
public String getCode()