验证码的生命周期

在web应用中，验证码常用于登录注册。验证码本质就是一张图片。

我们来看一下验证码的生命周期：客户端请求验证码

服务端渲染验证码：渲染一张包含随机字符串的图片

随机字符串写入session

读取图片并返回响应客户端提交：显示响应(即验证码图片)

获取用户输入字符串

提交用户输入服务端验证：取出session中保存的随机字符串与用户提交的字符串进行对比

字符串信息一致，进行下一步处理

字符串信息不一致，返回错误信息

下面我们在Django中实践以上流程。

验证码实践新建一个名为ValidCode的Django项目，并创建应用app01，配置路由如下：

from django.conf.urls import urlfrom 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, redirectdef 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/')

{% csrf_token %}

验证码：

刷新

验证

var refresh = document.getElementsByClassName('refresh')[0];

var validPic = document.getElementsByTagName('img')[0];

refresh.onclick = function () {

validPic.src += "?"; //利用img标签的特性，刷新验证码

}

说明：test.html中标签的属性：src="/valid_code/"，表示向http://127.0.0.1:8000/valid_code/发起get 请求，以获取图片

点击刷新标签，执行validPic.src += "?"，以重新获取图片(刷新验证码)定义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页面中标签的属性：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/：

验证码已经是实时生成的了，并且每次点击刷新，显示一张新的图片。