easy-captcha 实现前后端分离验证码验证

easy-captcha 实现前后端分离验证码验证

maveny引入

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

后台生成验证码：`

	/*
    创建map用于存储前端传输过来的uuid 来判断验证码
*/
public Map mapKaptcha = new HashMap();
/*
    获取验证码
 */
@GetMapping("/getverifyCode")
public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse,@RequestParam("uuid") String uuid) throws Exception {
    // 设置所有浏览器不要缓存，共三个响应头
    System.out.println("这是生成的uuid"+uuid);
    httpServletResponse.setHeader("Cache-Control", "no-store");
    httpServletResponse.setHeader("Pragma", "no-cache");
    httpServletResponse.setDateHeader("Expires", 0);
    // 设置浏览器打开方式为图片，不是默认的读取文本
    httpServletResponse.setContentType("image/gif");
    // 生成验证码对象,三个参数分别为宽、高、位数
    SpecCaptcha captcha = new SpecCaptcha(75, 30,4);
    // 设置类型为数字和字母混合
    captcha.setCharType(Captcha.TYPE_DEFAULT);
    // 设置字体
    captcha.setCharType(Captcha.FONT_2);
    // 验证码存入session
    httpServletRequest.getSession().setAttribute("verifyCode", captcha.text().toLowerCase());
    mapKaptcha.put(uuid,captcha.text().toLowerCase());
    // 输出图片流
    captcha.out(httpServletResponse.getOutputStream());
}







/*
    校验验证码
 */
@GetMapping("/verifyCode")
@ResponseBody
public String verify(@RequestParam("code") String code,@RequestParam("uuid") String uuid, HttpSession session) {
    System.out.println("这是获取的uuid:"+uuid);
    if (!StringUtils.hasLength(code)) {
        return "false";
    }
    System.out.println("oldCode:"+mapKaptcha.get(uuid));
    System.out.println("这是获取的code:"+code);
    if(mapKaptcha.get(uuid).equals(code.toLowerCase())){
        return "true";
    }
    return "false";
   /* String kaptchaCode = session.getAttribute("verifyCode") + "";
    if (!StringUtils.hasLength(kaptchaCode) || !code.toLowerCase().equals(kaptchaCode)) {
        return "验证码错误";
    }
    return "验证成功";*/
}

前端获取

<div class="layui-form-item" style="position: relative;">
	<input type="text" style="width: 170px;" placeholder="验证码" autocomplete="off" id="verifyCode1"  name="verifyCode1" class="layui-input" lay-verify="required" lay-reqtext="请输入验证码!">
	<div style="width: 170px;height: 42px; position: absolute; right: 0; top: 0;">
			<img id="img" src="" style="height: 100%;width: 100%">
	</div>
	</div>

   //获取验证码
function getverifyCode() {
    var xhr = new XMLHttpRequest()
    //var url = "http://localhost:18080/happyCaptcha/Getcaptcha?uuid="+uuid;
    var url = "http://localhost:18080/happyCaptcha/getverifyCode?uuid="+uuid
    // 2. 调用 open 函数
    xhr.open('GET',url)
    withCredentials:true,
    xhr.responseType = 'blob'
    // 3. 调用 send 函数
    xhr.send()
    // 4. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function() {
        var blob
        //判断请求成功
        //请求状态：readyState，服务器响应状态：status
        if (xhr.readyState === 4 && xhr.status === 200) {
            var src = URL.createObjectURL(xhr.response)
            document.getElementById('img').src = src
        }
    }
}

	//uuid 用于存入后台进行判断
    function uuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";

        var uuid = s.join("");
        return uuid;
    }

function getverifyCodeVerify(code) {
    var url = "http://localhost:18080/happyCaptcha/verifyCode?code="+code+"&uuid="+uuid;
    // 1. 创建 XHR 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数
    xhr.open('GET',url)
    // 3. 调用 send 函数
    //xhr.withCredentials = true;
    xhr.send()
    // 4. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function() {
        //判断请求成功
        //请求状态：readyState，服务器响应状态：status
        if (xhr.status === 200 && xhr.readyState === 4 ) {
            var data = xhr.responseText;
            if(data=="false"){
                getverifyCode();
            }
            alert(data);
        }
    }
}