java 图形验证码， 前后台实现

  图形验证码可以用在短信验证码前面，作短信防刷。  发送短信前调用图形验证码接口，获取该设备的图形验证码，用户在前端填写好图形上的string信息后，作为参数请求后台，如果和后台存储图形验证码上的信息一致，就返回短信验证码，否则返回“图形验证码不正确”。后台可以将图形验证码上的信息存储在session中，或者存储在token中。这里采用redis token实现。

   获取验证码： 前端发送带有网卡信息的唯一标识请求， 可以使用网卡+时间作为请求参数； 后台接口生成一个Image信息，和一个与Image上面信息相同的String str2 ，并将Image信息返回给前端，前端做为图形验证码展示，同时将该String信息 str2存储在token中。

   验证验证码： 验证时，前端将图片上的信息读取成 str1  作为接口请求参数传给后台，后台在去取token里面的值str2 作验证。 

实现：

  一个可以生成Image信息和与Image上面字符相同string的工具类：

public class VerifyUtil {
    // 验证码字符集
    private static final char[] chars = {
            '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
            'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
            'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'};
    // 字符数量
    private static final int SIZE = 4;
    // 干扰线数量
    private static final int LINES = 5;
    // 宽度
    private static final int WIDTH = 80;
    // 高度
    private static final int HEIGHT = 40;
    // 字体大小
    private static final int FONT_SIZE = 30;

    /**
     * 生成随机验证码及图片
     * Object[0]：验证码字符串；
     * Object[1]：验证码图片。
     */
    public static Object[] createImage() {
        StringBuffer sb = new StringBuffer();
        // 1.创建空白图片
        BufferedImage image = new BufferedImage(
                WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
        // 2.获取图片画笔
        Graphics graphic = image.getGraphics();
        // 3.设置画笔颜色
        graphic.setColor(Color.LIGHT_GRAY);
        // 4.绘制矩形背景
        graphic.fillRect(0, 0, WIDTH, HEIGHT);
        // 5.画随机字符
        Random ran = new Random();
        for (int i = 0; i < SIZE; i++) {
            // 取随机字符索引
            int n = ran.nextInt(chars.length);
            // 设置随机颜色
            graphic.setColor(getRandomColor());
            // 设置字体大小
            graphic.setFont(new Font(
                    null, Font.BOLD + Font.ITALIC, FONT_SIZE));
            // 画字符
            graphic.drawString(
                    chars[n] + "", i * WIDTH / SIZE, HEIGHT * 2 / 3);
            // 记录字符
            sb.append(chars[n]);
        }
        // 6.画干扰线
        for (int i = 0; i < LINES; i++) {
            // 设置随机颜色
            graphic.setColor(getRandomColor());
            // 随机画线
            graphic.drawLine(ran.nextInt(WIDTH), ran.nextInt(HEIGHT),
                    ran.nextInt(WIDTH), ran.nextInt(HEIGHT));
        }
        // 7.返回验证码和图片
//        return new Object[]{sb.toString(), image};

        ByteArrayOutputStream baos = new ByteArrayOutputStream();
//        BufferedImage image = imageCaptchaService.getImageChallengeForID(request.getRequestedSessionId());
        try {
            ImageIO.write(image, "jpeg", baos);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return new Object[]{sb.toString(), baos.toByteArray()};

    }

    /**
     * 随机取色
     */
    public static Color getRandomColor() {
        Random ran = new Random();
        Color color = new Color(ran.nextInt(256),
                ran.nextInt(256), ran.nextInt(256));
        return color;
    }
}

后台 controller:

获取验证码接口   使用前端登录Ip的mac地址作为入参：

@ApiOperation(value = "获取图形验证码")
    @GetMapping("/test/img/{macCode}")
    public byte[] getByte(@PathVariable String macCode){
        Object[] objs = VerifyUtil.createImage();
        String randomStr = (String) objs[0];
        log.info("randomStr  result: "+randomStr);
        redisService.delete("USER:IMG:" + macCode);
        redisService.save("USER:IMG:" + macCode, randomStr);  // 存储到redis中，后续用于作验证
        return (byte[]) objs[1];
    }

验证接口：

    @PostMapping("/verify")
    public Response<String> sendCaptcha(@Validated @RequestBody SmsRequest smsRequest) {
       // 验证 图形验证码
        if(captchaRequest.getImageCode().equals(redisService.select("USER:IMG"+ smRequest.getMacCode()))){
                return smsService.getSms(smsRequest.getPhone); // 获取短信
        }else{
                return Response.ofError(ERRORCODE.CODE_ERROR); // 验证码错误
                redisService.delete(RedisKeys.USER_CAPTCHA_MACADDRESS + captchaRequest.getMacCode());
        }
    }

 

启动SpringBootApplication后 ，访问Swagger，如下：

前端：

 前端可以使用<img src="http://localhost:8001/open/captcha/img/21432"/>  去显示验证码图片

 

 

 

git地址：

https://github.com/lilelife/webapp.git