WEB开发-动态验证码

Posted 2020-08-11 做时间的好朋友

1.基于Python编程语言实现，其他语言大同小异

---

 

2.登录界面login.html

1 <form action=‘/login/‘>
2     <input type=‘text‘ name=‘username‘ />
3     <input type=‘password‘ name=‘password‘ />
4     <input type=‘text‘ name=‘yanzhengma‘ />
5     <img src="/get_yanzhengma/" onclick="ChangeYanzhengma();"></img>
6     <input type=‘submit‘ name=‘登录‘ />
7 </form>

里面涉及到2个后端视图函数login和get_yanzhengma

---

 

3.后端视图函数

 1 #-*- coding=utf-8 -*-
 2 from PIL import Image,ImageDraw,ImageFont
 3 
 4 def login(request):
 5     return render_to_response(‘login.html‘)
 6     
 7     
 8 def yanzhengma(request):
 9     #text为产生的4位随机字符串
10     text = rndChar()
11     #图片处理程序，将文本做成图片
12     im = Image.new("RGB", (130, 35), (255, 255, 255))
13     dr = ImageDraw.Draw(im)
14     font = ImageFont.truetype("arial.tff", 24)
15     # arial.tff 这个从windows fonts copy一个过来
16     dr.text((10, 5), text, font=font, fill="#000000")
17     # im.show()
18     #创建一个io对象
19     stream = io.BytesIO()
20     #将图片对象im保存到stream对象里
21     im.save(stream, "png")
22     #stream.getvalue()图片二级制内容，再通过HttpResponse封装，返回给前端页面
23     return HttpResponse(stream.getvalue())

---

4.备注：

（1）img标签的src属性，去这个/get_yanzhengma/去取图片

（2）get_yanzhengma函数执行

（3）通过random模块生成随机码，4个字母

（4）通过PIL模块将随机数字转换为图片对象im

（5）创建一个BytesIO对象，内存对象，可以存储二进制的东西

（6）将图片对象保存到BytesIO对象中，此处在内存里

#话说为什么要将图片对象保存到BytesIO对象中而不是直接写到硬盘里存为图片文件呢？因为这样就保证了在同一个时刻，不同用户访问到的验证码是不一样的，而且都是存储在内存中的。

#如果写成验证码图片文件到硬盘里，有可能B页面显示的验证码是ABCD，但是B用户还没提交，A用户这会访问，刷新了验证码，把验证码变更为DCBA了，B页面里看到的还是ABCD，导致一直输不对验证码；无法保证2个用户的验证码图片冲突问题

#后端验证码的随机值是存储在session中的，每次用户GET请求，服务器上生成随机验证码存储在session中，并给页面返回，如果用户提交的验证码和后端session中记录的一致通过，如果不一致，重新刷新验证码，用户重新进行提交

#用户点击验证码图片刷新功能，暂未实现；用户点击验证码图片，ajax流程-后端服务器去重新生成验证码，session变更，重新传递给前端，验证码图片变更

（7）BytesIO对象的getvalue()方法返回二进制内容

（8）django提供的HttpResponse封装二进制内容为识别的东西传递给前端

（7）前端img标签正常显示图片