验证码的生命周期
在web应用中,验证码常用于登录注册。验证码本质就是一张图片。
我们来看一下验证码的生命周期:
1. 客户端请求验证码
2. 服务端渲染验证码:
- 渲染一张包含随机字符串的图片
- 随机字符串写入session
- 读取图片并返回响应
3. 客户端提交:
- 显示响应(即验证码图片)
- 获取用户输入字符串
- 提交用户输入
4. 服务端验证:
- 取出session中保存的随机字符串与用户提交的字符串进行对比
- 字符串信息一致,进行下一步处理
- 字符串信息不一致,返回错误信息
下面我们在Django中实践以上流程。
验证码实践
新建一个名为ValidCode的Django项目,并创建应用app01,配置路由如下:
from django.conf.urls import url from app01 import views urlpatterns = [ url(r'^test/$', views.test), url(r'^valid_code/$', views.valid_code), ]
定义test视图函数,当客户端访问
http://127.0.0.1:8000/test/
时,返回test.html页面;当客户端提交提交数据时,取出session中保存的验证码与用户提交的字符串进行对比:from django.shortcuts import render, HttpResponse, redirect def test(request): if request.method == 'GET': return render(request, 'test.html') code1 = request.session['valid_code'] code2 = request.POST.get('valid_code') if code1 == code2: return HttpResponse('OK') else: return redirect('/test/')
<form action="" method="post"> {% csrf_token %} <p> <label for="valid_code">验证码:</label> </p> <p> <input type="text" id="valid_code" name="valid_code"> <img src="/valid_code/" alt="validPic" width="150" height="30"><a href="#" class="refresh">刷新</a> </p> <p> <button type="submit">验证</button> </p> </form> <script> var refresh = document.getElementsByClassName('refresh')[0]; var validPic = document.getElementsByTagName('img')[0]; refresh.onclick = function () { validPic.src += "?"; //利用img标签的特性,刷新验证码 } </script>
说明:
- test.html中
<img>
标签的属性:src="/valid_code/"
,表示向http://127.0.0.1:8000/valid_code/
发起get 请求,以获取图片 - 点击
<a href="#" class="refresh">刷新</a>
标签,执行validPic.src += "?"
,以重新获取图片(刷新验证码)
- test.html中
定义valid_code视图函数,将验证码写入session中,并返回验证码:
def valid_code(request): with open('bilibili.jpg', 'rb')as f: res = f.read() valid_code = 'bilibili' request.session["valid_code"] = valid_code return HttpResponse(res)
说明:验证码本质就是一张图片,这里就先返回一张图片吧。。。
浏览器访问
http://127.0.0.1:8000/test/
:说明:显示以上页面其实有两次get请求:
- 对
/test/
发起get请求,服务端返回test.html页面; - test.html页面中
<img>
标签的属性:src="/valid_code/"
,对/valid_code/
发起get请求,服务端返回一张图片
- 对
提交验证码:输入’bilibili’,显示‘OK’,否则重定向到当前页面,略。
生成随机验证码
这样似乎就成了,不过实际应用中的验证码都是随机生成的。而上面的验证码不论怎么刷新,也不会变,服务端始终返回一张静态图片。那么有没有办法呢?有,用pillow画图模块,每次请求过来,服务端实时渲染一张包含随机字符串的图片。下面我们改写valid_code函数:
def valid_code(request):
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO # 内存管理,优化速度
import random
img = Image.new(mode='RGB', size=(120, 30),
color=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
# 创建图像对象(模式,大小,颜色)
draw = ImageDraw.Draw(img, mode='RGB') # 创建画笔(图像对象,模式)
font = ImageFont.truetype("app01/static/fonts/kumo.ttf", 28) # 读取字体(字体路径,字体大小)
code_list = []
for i in range(5):
char = random.choice([chr(random.randint(65, 90)), str(random.randint(1, 9))])
code_list.append(char)
draw.text([i * 24, 0], char, (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)),
font=font)
# 通过画笔的text方法,为图像绘制字符串(位置,文本,颜色,字体)
# [i * 24, 0] 字体坐标,i*24设置水平偏移,让每个字符分开显示
f = BytesIO() # 拿到一个内存文件句柄f
img.save(f, "png") # 保存图像对象到f
valid_code = ''.join(code_list)
request.session["valid_code"] = valid_code # 验证码写入session
return HttpResponse(f.getvalue()) # `getvalue()`方法拿到内存文件句柄的内容
说明:
- 使用前需要先安装pillow模块:pip install pillow
- 绘制的图像可以保存的磁盘上,但是速度慢,这里使用内存管理
from io import BytesIO
,优化速度 f = BytesIO()
拿到一个内存文件句柄f.getvalue()
拿到内存文件句柄的内容- 注意,Django的session信息默认存在数据库,使用session前应先执行数据库迁移,以生成django_session表
现在重新访问http://127.0.0.1:8000/test/
:
现在验证码已经是实时生成的了,并且每次点击刷新,显示一张新的图片。