首先我们要明白一个问题，传统session方式很简单，就是在生成图片的时候把验证码保存到session里面就行了，然后再把图片响应给前端，验证的时候客户端会带上sessionId和验证码，这样就直接拿到保存在session里面的图片验证码，然后比较就行，前后端的话由于状态是分离的，不能使用session保存验证码信息
作者在这里想到一种实现办法，主要就说首先我们先生成一个随机的key然后把图片转成base64的方式，在生成的过程中吧key和验证码code保存在redis上面，然后把图片和key一起响应给前端，验证的话前端拿到key暂存在页面上，将base64直接响应到img标签内，然后输入验证码传入到后端，然后接口就去用这个key拿到code比较，相同就通过验证码
代码实现
package com.zhizhuo.cms.admin.api;
import com.zhizhuo.cms.admin.common.AdminConstants;
import com.zhizhuo.cms.common.util.ImageCode;
import com.zhizhuo.cms.common.util.R;
import com.zhizhuo.cms.common.util.RedisUtils;
import com.zhizhuo.cms.common.util.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
@RequestMapping("")
@Controller
public class IndexController {
@Autowired
private RedisUtils redisUtils;
/**
* @author: 执着(zlm)
* @Date: 2020/9/27 23:30
* @Description:
*/
@GetMapping("imgCode")
@ResponseBody
public R toImgUrl(){
//画图工具类
ImageCode imageCode = new ImageCode();
//转成base64
String base64 = ImageCode.getBase64(imageCode.getImage());
//生成的随机key
String imgKey = StringUtils.uuid();
//将key和code都保存在redis，时间可以设置短一点没有问题，不要设置太短
redisUtils.set(AdminConstants.REDIS_IMG_KEY+imgKey,imageCode.getCode(),1000*10*3);
return R.ok().data("imgKey",imgKey).data("base64",base64);
}
}package com.zhizhuo.cms.common.util;
import java.util.List;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.TimeUnit;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;
/**
*
* @author yangaliang
* 基于spring和redis的redisTemplate工具类
* 针对所有的hash 都是以h开头的方法
* 针对所有的Set 都是以s开头的方法
* 针对所有的List 都是以l开头的方法
*/
@Component
public class RedisUtils {
@Autowired
private RedisTemplate<String, Object> redisTemplate;
//=============================common============================
/**
* 指定缓存失效时间
* @param key 键
* @param time 时间(秒)
* @return
*/
public boolean expire(String key,long time){
try {
if(time>0){
redisTemplate.expire(key, time, TimeUnit.SECONDS);
}
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 根据key 获取过期时间
* @param key 键 不能为null
* @return 时间(秒) 返回0代表为永久有效
*/
public long getExpire(String key){
return redisTemplate.getExpire(key,TimeUnit.SECONDS);
}
/**
* 判断key是否存在
* @param key 键
* @return true 存在 false不存在
*/
public boolean hasKey(String key){
try {
return redisTemplate.hasKey(key);
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 删除缓存
* @param key 可以传一个值 或多个
*/
@SuppressWarnings("unchecked")
public void del(String ... key){
if(key!=null&&key.length>0){
if(key.length==1){
redisTemplate.delete(key[0]);
}else{
redisTemplate.delete(CollectionUtils.arrayToList(key));
}
}
}
//============================String=============================
/**
* 普通缓存获取
* @param key 键
* @return 值
*/
public Object get(String key){
return key==null?null:redisTemplate.opsForValue().get(key);
}
/**
* 普通缓存放入
* @param key 键
* @param value 值
* @return true成功 false失败
*/
public boolean set(String key,Object value) {
try {
redisTemplate.opsForValue().set(key, value);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 普通缓存放入并设置时间
* @param key 键
* @param value 值
* @param time 时间(秒) time要大于0 如果time小于等于0 将设置无限期
* @return true成功 false 失败
*/
public boolean set(String key,Object value,long time){
try {
if(time>0){
redisTemplate.opsForValue().set(key, value, time, TimeUnit.SECONDS);
}else{
set(key, value);
}
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 递增
* @param key 键
* @param by 要增加几(大于0)
* @return
*/
public long incr(String key, long delta){
if(delta<0){
throw new RuntimeException("递增因子必须大于0");
}
return redisTemplate.opsForValue().increment(key, delta);
}
/**
* 递减
* @param key 键
* @param by 要减少几(小于0)
* @return
*/
public long decr(String key, long delta){
if(delta<0){
throw new RuntimeException("递减因子必须大于0");
}
return redisTemplate.opsForValue().increment(key, -delta);
}
//================================Map=================================
/**
* HashGet
* @param key 键 不能为null
* @param item 项 不能为null
* @return 值
*/
public Object hget(String key,String item){
return redisTemplate.opsForHash().get(key, item);
}
/**
* 获取hashKey对应的所有键值
* @param key 键
* @return 对应的多个键值
*/
public Map<Object,Object> hmget(String key){
return redisTemplate.opsForHash().entries(key);
}
/**
* HashSet
* @param key 键
* @param map 对应多个键值
* @return true 成功 false 失败
*/
public boolean hmset(String key, Map<String,Object> map){
try {
redisTemplate.opsForHash().putAll(key, map);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* HashSet 并设置时间
* @param key 键
* @param map 对应多个键值
* @param time 时间(秒)
* @return true成功 false失败
*/
public boolean hmset(String key, Map<String,Object> map, long time){
try {
redisTemplate.opsForHash().putAll(key, map);
if(time>0){
expire(key, time);
}
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 向一张hash表中放入数据,如果不存在将创建
* @param key 键
* @param item 项
* @param value 值
* @return true 成功 false失败
*/
public boolean hset(String key,String item,Object value) {
try {
redisTemplate.opsForHash().put(key, item, value);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 向一张hash表中放入数据,如果不存在将创建
* @param key 键
* @param item 项
* @param value 值
* @param time 时间(秒) 注意:如果已存在的hash表有时间,这里将会替换原有的时间
* @return true 成功 false失败
*/
public boolean hset(String key,String item,Object value,long time) {
try {
redisTemplate.opsForHash().put(key, item, value);
if(time>0){
expire(key, time);
}
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 删除hash表中的值
* @param key 键 不能为null
* @param item 项 可以使多个 不能为null
*/
public void hdel(String key, Object... item){
redisTemplate.opsForHash().delete(key,item);
}
/**
* 判断hash表中是否有该项的值
* @param key 键 不能为null
* @param item 项 不能为null
* @return true 存在 false不存在
*/
public boolean hHasKey(String key, String item){
return redisTemplate.opsForHash().hasKey(key, item);
}
/**
* hash递增 如果不存在,就会创建一个 并把新增后的值返回
* @param key 键
* @param item 项
* @param by 要增加几(大于0)
* @return
*/
public double hincr(String key, String item,double by){
return redisTemplate.opsForHash().increment(key, item, by);
}
/**
* hash递减
* @param key 键
* @param item 项
* @param by 要减少记(小于0)
* @return
*/
public double hdecr(String key, String item,double by){
return redisTemplate.opsForHash().increment(key, item,-by);
}
//============================set=============================
/**
* 根据key获取Set中的所有值
* @param key 键
* @return
*/
public Set<Object> sGet(String key){
try {
return redisTemplate.opsForSet().members(key);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
/**
* 根据value从一个set中查询,是否存在
* @param key 键
* @param value 值
* @return true 存在 false不存在
*/
public boolean sHasKey(String key,Object value){
try {
return redisTemplate.opsForSet().isMember(key, value);
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 将数据放入set缓存
* @param key 键
* @param values 值 可以是多个
* @return 成功个数
*/
public long sSet(String key, Object...values) {
try {
return redisTemplate.opsForSet().add(key, values);
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
/**
* 将set数据放入缓存
* @param key 键
* @param time 时间(秒)
* @param values 值 可以是多个
* @return 成功个数
*/
public long sSetAndTime(String key,long time,Object...values) {
try {
Long count = redisTemplate.opsForSet().add(key, values);
if(time>0) expire(key, time);
return count;
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
/**
* 获取set缓存的长度
* @param key 键
* @return
*/
public long sGetSetSize(String key){
try {
return redisTemplate.opsForSet().size(key);
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
/**
* 移除值为value的
* @param key 键
* @param values 值 可以是多个
* @return 移除的个数
*/
public long setRemove(String key, Object ...values) {
try {
Long count = redisTemplate.opsForSet().remove(key, values);
return count;
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
//===============================list=================================
/**
* 获取list缓存的内容
* @param key 键
* @param start 开始
* @param end 结束 0 到 -1代表所有值
* @return
*/
public List<Object> lGet(String key,long start, long end){
try {
return redisTemplate.opsForList().range(key, start, end);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
/**
* 获取list缓存的长度
* @param key 键
* @return
*/
public long lGetListSize(String key){
try {
return redisTemplate.opsForList().size(key);
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
/**
* 通过索引 获取list中的值
* @param key 键
* @param index 索引 index>=0时， 0 表头，1 第二个元素，依次类推；index<0时，-1，表尾，-2倒数第二个元素，依次类推
* @return
*/
public Object lGetIndex(String key,long index){
try {
return redisTemplate.opsForList().index(key, index);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
/**
* 将list放入缓存
* @param key 键
* @param value 值
* @param time 时间(秒)
* @return
*/
public boolean lSet(String key, Object value) {
try {
redisTemplate.opsForList().rightPush(key, value);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 将list放入缓存
* @param key 键
* @param value 值
* @param time 时间(秒)
* @return
*/
public boolean lSet(String key, Object value, long time) {
try {
redisTemplate.opsForList().rightPush(key, value);
if (time > 0) expire(key, time);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 将list放入缓存
* @param key 键
* @param value 值
* @param time 时间(秒)
* @return
*/
public boolean lSet(String key, List<Object> value) {
try {
redisTemplate.opsForList().rightPushAll(key, value);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 将list放入缓存
* @param key 键
* @param value 值
* @param time 时间(秒)
* @return
*/
public boolean lSet(String key, List<Object> value, long time) {
try {
redisTemplate.opsForList().rightPushAll(key, value);
if (time > 0) expire(key, time);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 根据索引修改list中的某条数据
* @param key 键
* @param index 索引
* @param value 值
* @return
*/
public boolean lUpdateIndex(String key, long index,Object value) {
try {
redisTemplate.opsForList().set(key, index, value);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 移除N个值为value
* @param key 键
* @param count 移除多少个
* @param value 值
* @return 移除的个数
*/
public long lRemove(String key,long count,Object value) {
try {
Long remove = redisTemplate.opsForList().remove(key, count, value);
return remove;
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
}生成img类
package com.zhizhuo.cms.common.util;
import cn.hutool.core.codec.Base64;
import lombok.extern.slf4j.Slf4j;
import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.font.ImageGraphicAttribute;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Random;
import java.util.concurrent.CountDownLatch;
/**
* 〈一句话功能简述〉<br>
* 〈〉
*
* @author 1543057945
* @create 2019/1/11
* @since 1.0.0
*/
@Slf4j
public class ImageCode {
//验证码个数
private int count=4;
//验证码宽度，且设置每个字的宽度
private int width=count*50;
//验证码高度
private int height=50;
//图片验证码key
private String code="";
//bufferedImage
private BufferedImage bufferedImage;
public ImageCode() {
}
public ImageCode(int count, int width, int height) {
this.count = count;
this.width = width;
this.height = height;
}
public int getCount() {
return count;
}
public String getCode() {
return code;
}
public int getWidth() {
return width;
}
public int getHeight() {
return height;
}
public void setCount(int count) {
this.count = count;
width=this.count*50;
}
public void setWidth(int width) {
this.width = width;
}
public void setHeight(int height) {
this.height = height;
}
//测试写入
public static void main(String[] args){
long startend=System.currentTimeMillis();
ImageCode imageCode=new ImageCode();
//默认验证码位数为4，我这里设为5
imageCode.setCount(5);
//得到缓冲区
BufferedImage image = imageCode.getImage();
//得到真实验证码
String code=imageCode.getCode();
long endTime=System.currentTimeMillis();
System.out.println("验证码为："+code+"\n花费时间为："+(endTime-startend)+"\n到E盘根目录下看，文件名为11.jpg");
}
public BufferedImage getImage(){
//图片缓冲区
BufferedImage image = new BufferedImage(width,height,1);
//获得笔
Graphics graphics = image.getGraphics();
//设置初始画笔为白色
graphics.setColor(new Color(255,255,254));
//画满整个图，也就是把图片先变为白色
graphics.fillRect(0,0,width,height);
Random rd=new Random();
//设置字体
Font font=new Font("宋体",Font.PLAIN,35+rd.nextInt(10));
graphics.setFont(font);
char[] chars="qweCRYHrtasdfBxy678934VTGopNUFKuighjklzSXEDLOP12cvbnmQAZWJMI50".toCharArray();
//画验证码
for (int i = 0; i <count ; i++) {
String string="";
string+=chars[rd.nextInt(chars.length)]+"";
graphics.setColor(new Color(rd.nextInt(254),rd.nextInt(254),rd.nextInt(254)));
graphics.drawString(string,55*i+rd.nextInt(10),27+rd.nextInt(15));
code+=string;
}
//干扰点
for (int i = 0; i <25*count ; i++) {
graphics.setFont(new Font("宋体",Font.PLAIN,15));
String string=".";
graphics.setColor(new Color(rd.nextInt(255),rd.nextInt(255),rd.nextInt(255)));
graphics.drawString(string,rd.nextInt(width),rd.nextInt(height));
}
//干扰线
for (int i = 0; i <count+count/2 ; i++) {
graphics.setFont(new Font("宋体",Font.PLAIN,10));
graphics.setColor(new Color(rd.nextInt(255),rd.nextInt(255),rd.nextInt(255)));
graphics.drawLine(rd.nextInt(width),rd.nextInt(height),rd.nextInt(width),rd.nextInt(height));
}
//归还笔
graphics.dispose();
//写到流里面需要用到ImageIo
//这里做的测试，在本地测试下是否画的是那回事
/*try {
ImageIO.write(image,"jpg",new FileOutputStream("E:/11.jpg"));
} catch (IOException e) {
e.printStackTrace();
}*/
this.bufferedImage=image;
return image;
}
/**
* @author: 执着(zlm)
* @Date: 2020/9/27 23:37
* @Description: 将图片缓冲区转成base64编码
*/
public static String getBase64(BufferedImage image){
String base64 = null;
try {
//输出流
ByteArrayOutputStream stream = new ByteArrayOutputStream();
ImageIO.write(image, "png", stream);
base64 = Base64.encode(stream.toByteArray());
log.info("生成的图片验证码base64:{}",base64);
} catch (IOException e) {
log.error("生成生成的图片验证码base64失败：{}",e.getMessage());
e.printStackTrace();
}
return base64;
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
