前后端分离验证码方案

前后端分离的验证码解决方案：：：

逻辑是这样：
  前后端分离 登录验证码 方案
  后端生成图片 验证码字符串 uuid
  uuid为key  验证码字符串为value
  传递bs64图片 和uuid给前端
  前端在登录的时候 传递 账号 密码 验证码 uuid
  通过uuid获取 验证码 验证
 

        
            com.github.penggle
            kaptcha
            2.3.2
        

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Properties;

/**
 * @author wl
 * @date 2019-4-23
 * 生成验证码的配置
 */
@Configuration
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha producer(){
        Properties properties = new Properties();
        properties.put("kaptcha.border", "no");
        properties.put("kaptcha.textproducer.font.color", "black");
        properties.put("kaptcha.textproducer.char.space", "10");
        properties.put("kaptcha.textproducer.char.length","4");
        properties.put("kaptcha.image.height","34");
        properties.put("kaptcha.textproducer.font.size","25");

        properties.put("kaptcha.noise.impl","com.google.code.kaptcha.impl.NoNoise");
        Config config = new Config(properties);
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

    @Autowired
    private DefaultKaptcha producer;
    @Autowired
    StringRedisTemplate stringRedisTemplate;

    @ResponseBody
    @PostMapping("/captcha")
    public Result captcha()throws IOException {
        /**
         * 前后端分离 登录验证码 方案
         * 后端生成图片 验证码字符串 uuid
         * uuid为key  验证码字符串为value
         * 传递bs64图片 和uuid给前端
         * 前端在登录的时候 传递 账号 密码 验证码 uuid
         * 通过uuid获取 验证码 验证
         */
        ByteArrayOutputStream out = new ByteArrayOutputStream();
        //获取验证码
        String text = producer.createText();
        logger.info("登录验证码："+text);

        BufferedImage image = producer.createImage(text);
        ImageIO.write(image, "png", out);
        String base64bytes = Base64.encode(out.toByteArray());

        //该字符串传输至前端放入src即可显示图片，安卓可以去掉data:image/png;base64,
        String src = "data:image/png;base64," + base64bytes;

        String token = UUID.randomUUID().toString();
        Map map = new HashMap<>(2);
        map.put("token", token);
        map.put("img", src);
        stringRedisTemplate.opsForValue().set(token, text);
        return Result.succeed(map);
    }