java - 图片验证码实现原理
问题描述
**测试网站:http://con.monyun.cn:9960/acc...
在这个页面中有一个验证码。这个验证码的url是
<img src='https://www.haobala.com/aut_checkCode.hts?=0.8963835985936632' class='icd'>
如何实现点击验证码的时候更改显示图片??
说明:(1) 当你点击验证码图片的时候 ,img标签的src属性的 后面部分的数字会更改,一旦数字更改会就会引起浏览器访问新的url获取数据
(2)新的url中查询字符串只有value没有name,那么是不是说就服务器端就无法获取到这个数字值?0.8963835985936632
服务器端有办法获取这个数字值吗??
(3)假若 没有办法获取到数字值。 服务器端处理请求,返回二进制图像数据。这个时候会为图片生成一个token吗? 如果有生成那么如何传递给客户端?
(4)用户提交验证码。服务器端处理,那么如何验证用户提交的验证码是否正确?服务器端根据什么能够从redis中获取到正确的验证码?
各位说说给回复就顶!**
问题解答
回答1:谢邀, 一般来说, 验证码的工作步骤是这样的:
实际上是服务器生成了一个4位字符串, 用这4位字符串生成图片写到response中, 返回给浏览器, 并把这个4位字符串存在了当前session中.
浏览器提交后, 用提交的字符串和session中的字符串进行对比, 完成验证码的校验.
如果不用session比如可以设置到cookie中如下(key=test, value=test):
回答2:1.后面数字更改是避免浏览器缓存问题、2.不用使用任何参数,服务端会自动去按照时间锉什么的生成一个验证码(想看服务端是否能获取)
3.验证码原理就是生成一串随机数先存入session,最后生成images传给客户端给你识别,用户提交验证码答案,服务端对你得答案和session当中的随机数进行对比,一样就说明验证成功
4.如3
5.redis配合使用一般都会用到token或者session之内的,这样可以标识这个验证码到底是哪一个用户的,比如如下key
>keys *>uid_100_login_verify伪代码
获取验证码
User u=User();u.tmp_id=100;//唯一标识,传给客户端表单Random rand=new Random(种子);int v=rand.rand();//一般会生成其他得英文字母配合生成复杂的redisCli.add('uid_100_login_verify',random)//key,valueres.return(new Verify());
验证
User u=User();u.tmp_id=$POST[’tmp_id’];//获取客户端string value=redisCli.get('uid_100_login_verify');//key return valueif($POST[’verify_code’]===value){ return '验证成功';}回答3:
第一个:验证码的大致流程就是和你描述的一样的。
第二个:生成验证码是不用往后台传值的,你给的例子,后面的那串数字的改变其实是为了实现重新请求 URL 而已,一般是图片链接指向生成验证码的链接,点击后使用 js 来给连接进行改变,就是后面加一串随机数,这样浏览器检测到 src 后面的连接改变了(那串随机字符串就是这个作用),然后就会重新请求后台,获取重新生成的验证码图片。
第三个:后台返回二进制图片后,不需要生成 token ,但是需要把生成验证码的那串数字存到 session 里。要保存在服务器端,才安全,不需要返回到客户端。
第四个:用户输入提交的验证码后,就把用户提交的验证码数字,和服务端 session 里的数字进行对比。 如果一样的话,就验证通过。
至于最后把验证码放到redis里,你可以去搜索一下,如何把 session 存到 redis 里,相关的资料。
回答4:后台代码大体上是
public void genAuthImage(){
//生成token uuid //写入cookieresponse.addCookie();--->实际上是设置set-cookie头信息
//生成图片使用response写出end}前端:
前端:
chrome 检查
控制台
不确定的结论: response返回响应类型为image/jpg的时候 无法设置cookie。原因各位有看到的朋友可以解释下吗
相关文章:
1. docker gitlab 如何git clone?2. angular.js - 求一款angular插件3. docker镜像push报错4. nignx - docker内nginx 80端口被占用5. docker images显示的镜像过多,狗眼被亮瞎了,怎么办?6. objective-c - iOS开发支付宝和微信支付完成为什么跳转到了之前开发的一个app?7. PHP中的$this代表当前的类还是方法?8. 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败!9. android - 目前有哪些用Vue.js开发移动App的方案?10. font-family - 我引入CSS3自定义字体没有效果?