首页 > 代码库 > WEB开发-动态验证码

WEB开发-动态验证码

2024-08-15 01:05:29   217人阅读

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标签正常显示图片

WEB开发-动态验证码


联系
我们