官方地址：

在此膜拜下。

官方上已经有了非常详细的说明，下面我做个笔记，方便以后进行查阅，毕竟少花几分钟上手，可以多看几分钟的新东西。

添加Maven

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

获取验证码的后端代码：

@GetMapping("/TestCaptcha")
public Object getTestCaptcha(){
    SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
    String verCode = specCaptcha.text().toLowerCase();
    String key = UUID.randomUUID().toString();
    redisTemplate.opsForValue().set(key, verCode, 60 * 1, TimeUnit.SECONDS);
    Map<String, String> ret = new HashMap<>();
    ret.put("key", key);
    ret.put("image", specCaptcha.toBase64());
    return ResultVo.success("success", ret);
}

逻辑：

①SpecCaptcha类生成验证码；

②将生产的key和verCode使用redisTemplate放到redis中；

前端代码：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<img id="verImg" width="130px" height="48px"/>
<script>
    var verKey;
    // 获取验证码
    $.get('http://127.0.0.1:19000/TestCaptcha', function(res) {
        verKey = res.key;
        $('#verImg').attr('src', res.data.image);
    },'json');
    console.log(verKey)
</script>
</body>
</html>

对应的请求：

将这个值设置给html的image就可以正常显示了。

这个key，就是redis里面的key。登录的时候要把这个带上。

登录验证相关的代码：

@PostMapping("/login")
public Object login(@RequestBody String request){
    Map<String, Object> userMap =  JSONObject.parseObject(request);
    if(!userMap.containsKey("verKey") || !userMap.containsKey("verCode")){
        return ResultVo.error("格式有误");
    }
    //先查验证码
    String rightValue = redisTemplate.opsForValue().get(userMap.get("verKey")).toString();
    if(rightValue == null || !rightValue.equals(userMap.get("verCode").toString().toLowerCase())){
        return ResultVo.error("验证码无效");
    }
    ......
    ......
}

Java笔记-EasyCaptcha在前后端分离项目的使用

相关文章

热门标签

最新文章