SpringBoot四十四:整合EasyCaptcha(图形验证码)

EasyCaptcha简介

Java图形验证码,支持gif、中文、算术等类型,可用于Java Web、JavaSE等项目。

效果展示

SpringBoot四十四:整合EasyCaptcha(图形验证码)SpringBoot四十四:整合EasyCaptcha(图形验证码)SpringBoot四十四:整合EasyCaptcha(图形验证码)
SpringBoot四十四:整合EasyCaptcha(图形验证码)SpringBoot四十四:整合EasyCaptcha(图形验证码)SpringBoot四十四:整合EasyCaptcha(图形验证码)

算术类型:

SpringBoot四十四:整合EasyCaptcha(图形验证码)SpringBoot四十四:整合EasyCaptcha(图形验证码)SpringBoot四十四:整合EasyCaptcha(图形验证码)

中文类型:

SpringBoot四十四:整合EasyCaptcha(图形验证码)SpringBoot四十四:整合EasyCaptcha(图形验证码)SpringBoot四十四:整合EasyCaptcha(图形验证码)

内置字体:

SpringBoot四十四:整合EasyCaptcha(图形验证码)SpringBoot四十四:整合EasyCaptcha(图形验证码)SpringBoot四十四:整合EasyCaptcha(图形验证码)

maven方式引入

<dependencies>
   <dependency>
      <groupId>com.github.whvcse</groupId>
      <artifactId>easy-captcha</artifactId>
      <version>1.6.2</version>
   </dependency>
</dependencies>

在SpringMVC中使用

@Controller
public class CaptchaController {
    
    @RequestMapping("/captcha")
    public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
        CaptchaUtil.out(request, response);
    }
}

前端html代码:

<img src="/captcha" width="130px" height="48px" />

不要忘了把/captcha路径排除登录拦截,比如shiro的拦截。

判断验证码是否正确

@Controller
public class LoginController {
    
    @PostMapping("/login")
    public JsonResult login(String username,String password,String verCode){
        if (!CaptchaUtil.ver(verCode, request)) {
            CaptchaUtil.clear(request);  // 清除session中的验证码
            return JsonResult.error("验证码不正确");
        }
    }   
}

验证码类型

public class Test {
    
    public static void main(String[] args) {
        // png类型
        SpecCaptcha captcha = new SpecCaptcha(130, 48);
        captcha.text();  // 获取验证码的字符
        captcha.textChar();  // 获取验证码的字符数组
        
        // gif类型
        GifCaptcha captcha = new GifCaptcha(130, 48);
        
        // 中文类型
        ChineseCaptcha captcha = new ChineseCaptcha(130, 48);
        
        // 中文gif类型
        ChineseGifCaptcha captcha = new ChineseGifCaptcha(130, 48);
        
        // 算术类型
        ArithmeticCaptcha captcha = new ArithmeticCaptcha(130, 48);
        captcha.setLen(3);  // 几位数运算,默认是两位
        captcha.getArithmeticString();  // 获取运算的公式:3+2=?
        captcha.text();  // 获取运算的结果:5
        
        captcha.out(outputStream);  // 输出验证码
    }
}

注意:算术验证码的len表示是几位数运算,而其他验证码的len表示验证码的位数,算术验证码的text()表示的是公式的结果, 对于算术验证码,你应该把公式的结果存储session,而不是公式。

前后端分离项目的使用

前后端分离项目建议不要存储在session中,存储在redis中,redis存储需要一个key,key一同返回给前端用于验证输入:

@Controller
public class CaptchaController {
    @Autowired
    private RedisUtil redisUtil;
    
    @ResponseBody
    @RequestMapping("/captcha")
    public JsonResult captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
        SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
        String verCode = specCaptcha.text().toLowerCase();
        String key = UUID.randomUUID().toString();
        // 存入redis并设置过期时间为30分钟
        redisUtil.setEx(key, verCode, 30, TimeUnit.MINUTES);
        // 将key和base64返回给前端
        return JsonResult.ok().put("key", key).put("image", specCaptcha.toBase64());
    }
    
    @ResponseBody
    @PostMapping("/login")
    public JsonResult login(String username,String password,String verCode,String verKey){
        // 获取redis中的验证码
        String redisCode = redisUtil.get(verKey);
        // 判断验证码
        if (verCode==null || !redisCode.equals(verCode.trim().toLowerCase())) {
            return JsonResult.error("验证码不正确");
        }
    }  
}

前端使用ajax获取验证码:

<img id="verImg" width="130px" height="48px"/>

<script>
    var verKey;
    // 获取验证码
    $.get('/captcha', function(res) {
        verKey = res.key;
        $('#verImg').attr('src', res.image);
    },'json');
    
    // 登录
    $.post('/login', {
        verKey: verKey,
        verCode: '8u6h',
        username: 'admin',
        password: 'admin'
    }, function(res) {
        console.log(res);
    }, 'json');
</script>

开源地址

上一篇:Insecure CAPTCHA


下一篇:图形验证逻辑