项目中在登录注册环节肯定会用到验证码校验，Springboot整合Thymeleaf验证码校验之前已经做过了，那么现在Springboot和Vue前后端分离项目中该如何使用呢。
实现思路：
-
后端利用工具类生成验证码code，将验证码code以key，value的形式利用域对象ServletContext存入session中，同时生成验证码图片将图片进行base64编码，编码过后的字符串和key一起返回给前端处理。
-
vue生命周期创建是就获取验证码，并将后端传来的key和编码后的字符串绑定data，并解码赋值给src以显示验证码图片。注册时将用户输入的验证码code和后端传来的key作为参数请求后端注册api。
-
后端接受到用户输入的验证码code和key，利用key通过域对象ServletContext取出session中的对应的验证码code，不分大小写比较用户输入验证码和生成验证码是否相同，相同则注册，否则验证码错误！
代码实现
验证码工具类：
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
import javax.imageio.ImageIO;
public class CreateImageCode {
// 图片的宽度。
private int width = 160;
// 图片的高度。
private int height = 40;
// 验证码字符个数
private int codeCount = 4;
// 验证码干扰线数
private int lineCount = 20;
// 验证码
private String code = null;
// 验证码图片Buffer
private BufferedImage buffImg = null;
Random random = new Random();
public CreateImageCode() {
creatImage();
}
public CreateImageCode(int width, int height) {
this.width = width;
this.height = height;
creatImage();
}
public CreateImageCode(int width, int height, int codeCount) {
this.width = width;
this.height = height;
this.codeCount = codeCount;
creatImage();
}
public CreateImageCode(int width, int height, int codeCount, int lineCount) {
this.width = width;
this.height = height;
this.codeCount = codeCount;
this.lineCount = lineCount;
creatImage();
}
// 生成图片
private void creatImage() {
int fontWidth = width / codeCount;// 字体的宽度
int fontHeight = height - 5;// 字体的高度
int codeY = height - 8;
// 图像buffer
buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = buffImg.getGraphics();
//Graphics2D g = buffImg.createGraphics();
// 设置背景色
g.setColor(getRandColor(200, 250));
g.fillRect(0, 0, width, height);
// 设置字体
//Font font1 = getFont(fontHeight);
Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
g.setFont(font);
// 设置干扰线
for (int i = 0; i < lineCount; i++) {
int xs = random.nextInt(width);
int ys = random.nextInt(height);
int xe = xs + random.nextInt(width);
int ye = ys + random.nextInt(height);
g.setColor(getRandColor(1, 255));
g.drawLine(xs, ys, xe, ye);
}
// 添加噪点
float yawpRate = 0.01f;// 噪声率
int area = (int) (yawpRate * width * height);
for (int i = 0; i < area; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
buffImg.setRGB(x, y, random.nextInt(255));
}
String str1 = randomStr(codeCount);// 得到随机字符
this.code = str1;
for (int i = 0; i < codeCount; i++) {
String strRand = str1.substring(i, i + 1);
g.setColor(getRandColor(1, 255));
// g.drawString(a,x,y);
// a为要画出来的东西，x和y表示要画的东西最左侧字符的基线位于此图形上下文坐标系的 (x, y) 位置处
g.drawString(strRand, i*fontWidth+3, codeY);
}
}
// 得到随机字符
private String randomStr(int n) {
String str1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
String str2 = "";
int len = str1.length() - 1;
double r;
for (int i = 0; i < n; i++) {
r = (Math.random()) * len;
str2 = str2 + str1.charAt((int) r);
}
return str2;
}
// 得到随机颜色
private Color getRandColor(int fc, int bc) {// 给定范围获得随机颜色
if (fc > 255)
fc = 255;
if (bc > 255)
bc = 255;
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
/**
* 产生随机字体
*/
private Font getFont(int size) {
Random random = new Random();
Font font[] = new Font[5];
font[0] = new Font("Ravie", Font.PLAIN, size);
font[1] = new Font("Antique Olive Compact", Font.PLAIN, size);
font[2] = new Font("Fixedsys", Font.PLAIN, size);
font[3] = new Font("Wide Latin", Font.PLAIN, size);
font[4] = new Font("Gill Sans Ultra Bold", Font.PLAIN, size);
return font[random.nextInt(5)];
}
// 扭曲方法
private void shear(Graphics g, int w1, int h1, Color color) {
shearX(g, w1, h1, color);
shearY(g, w1, h1, color);
}
private void shearX(Graphics g, int w1, int h1, Color color) {
int period = random.nextInt(2);
boolean borderGap = true;
int frames = 1;
int phase = random.nextInt(2);
for (int i = 0; i < h1; i++) {
double d = (double) (period >> 1)
* Math.sin((double) i / (double) period
+ (6.2831853071795862D * (double) phase)
/ (double) frames);
g.copyArea(0, i, w1, 1, (int) d, 0);
if (borderGap) {
g.setColor(color);
g.drawLine((int) d, i, 0, i);
g.drawLine((int) d + w1, i, w1, i);
}
}
}
private void shearY(Graphics g, int w1, int h1, Color color) {
int period = random.nextInt(40) + 10; // 50;
boolean borderGap = true;
int frames = 20;
int phase = 7;
for (int i = 0; i < w1; i++) {
double d = (double) (period >> 1)
* Math.sin((double) i / (double) period
+ (6.2831853071795862D * (double) phase)
/ (double) frames);
g.copyArea(i, 0, 1, h1, 0, (int) d);
if (borderGap) {
g.setColor(color);
g.drawLine(i, (int) d, i, 0);
g.drawLine(i, (int) d + h1, i, h1);
}
}
}
public void write(OutputStream sos) throws IOException {
ImageIO.write(buffImg, "png", sos);
sos.close();
}
public BufferedImage getBuffImg() {
return buffImg;
}
public String getCode() {
return code.toLowerCase();
}
//使用方法
/*public void getCode3(HttpServletRequest req, HttpServletResponse response,HttpSession session) throws IOException{
// 设置响应的类型格式为图片格式
response.setContentType("image/jpeg");
//禁止图像缓存。
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
CreateImageCode vCode = new CreateImageCode(100,30,5,10);
session.setAttribute("code", vCode.getCode());
vCode.write(response.getOutputStream());
}*/
}
后端生成验证码
/**
* 生成验证码
*
* @throws IOException
*/
@GetMapping("getImage")
public Map<String, String> getImage(HttpServletRequest request) throws IOException {
Map<String, String> result = new HashMap<>();
CreateImageCode createImageCode = new CreateImageCode();
//获取验证码
String securityCode = createImageCode.getCode();
//验证码存入session
String key = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());
request.getServletContext().setAttribute(key, securityCode);
//生成图片
BufferedImage image = createImageCode.getBuffImg();
//进行base64编码
ByteArrayOutputStream bos = new ByteArrayOutputStream();
ImageIO.write(image, "png", bos);
String string = Base64Utils.encodeToString(bos.toByteArray());
result.put("key", key);
result.put("image", string);
return result;
}
后端注册
/**
* 用户注册
*
* @param code
* @param user
* @return
*/
@PostMapping("register")
public Result register(String code, String key, @RequestBody User user, HttpServletRequest request) {
Result result = new Result();
log.info("接收的验证码: " + code);
log.info("接收的验证码的key: " + key);
log.info("接收到user对象: " + user);
//验证验证码
String keyCode = (String) request.getServletContext().getAttribute(key);
log.info(keyCode);
try {
//不考虑大小写比较生成的验证码和输入的验证码是否相同
if (code.equalsIgnoreCase(keyCode)) {
//注册用户
userService.register(user);
result.setMsg("注册成功!!!");
} else {
throw new RuntimeException("验证码错误!!!");
}
} catch (Exception e) {
e.printStackTrace();
result.setMsg(e.getMessage()).setState(false);
}
return result;
}
前端vue展示并调用后端api
<img :src="src" id="img-vcode" @click="getImage" :key="key">
<label>
<div class="label-text">验证码：</div>
<input type="text" v-model="code" name="vcode" style="width: 100px">
</label>
<script>
const app = new Vue({
el: "#app",
data:{
user:{},
code:"",
src:"",
key:"",
},
methods:{
saveUserInfo(){ //注册
console.log(this.user.username + this.user.password + this.user.email);
console.log(this.code);
if(!this.user.username){
alert('用户名不能为空!!!!');
return;
}
if(!this.user.password){
alert('密码不能为空!!!!');
return;
}
//发送axios
axios.post("http://localhost:321/user/register?code="+this.code+"&key="+this.key,this.user).then((res)=>{
console.log(res);
if(res.data.state){
alert(res.data.msg+",点击确定跳转到登录页面!!!");
location.href='./login.html';
}else{
alert(res.data.msg);
}
});
},
getImage(){ //获取验证码
_this = this;
axios.get("http://localhost:321/user/getImage").then((res)=>{
console.log(res.data.key);
_this.src = "data:image/png;base64,"+res.data.image;//base64解码
_this.key = res.data.key;
});
}
},
created(){
this.getImage();//获取验证码
}
});
</script>