前后端分离 图片验证码实现

123as打算 发布于 2017/03/24 10:48
阅读 1K+
收藏 0

我请教个问题,一般我们常见的图片验证码如下图,在前后端分离的架构上前端和后端是怎样实现的? 感激不尽

加载中
0
kse-music
kse-music

前端使用原生ajax,如

       var oReq = new XMLHttpRequest();
    
    oReq.open("GET", configs.RESTFUL_URL+"/common/get/captcha", true);

    oReq.responseType = "blob";
    oReq.onreadystatechange = function () {
        if (oReq.readyState == oReq.DONE) {
            var blob = oReq.response;
            var obj = {};
    
            obj.imgSrc = URL.createObjectURL(blob);
            console.log(obj.imgSrc);
        }
    }
    oReq.send(); 

后端代码主要代码 

BufferedImage image = ...;

ByteArrayOutputStream out= new ByteArrayOutputStream();

ImageIO.write(image, "jpeg", out);

rest接口直接返回out.toByteArray()就行了,别忘了设置response的Content-Type=image/jpeg

kse-music
kse-music
回复 @123as打算 : 图片上的随机数你得缓存在后台,至于你用什么缓存,看你选择了,比如:session、ehcache、redis等,然后前台把数字发过来,你再从缓存中取出来做对比
123as打算
123as打算
感谢啊,还有一个问题怎么根据用户输入的验证码去和后台传的验证码图片进行匹对?一个是文字一个是图片
返回顶部
顶部