登录验证码是每个网站登录时的基本标配，网上也有很多相应的文章， 但是从生成验证码到 应用到自己的网站上的全步骤，并没有看到很多， 为了节约大家的时间，我把整体步骤写下来， 即拿即用哈
1. 生成随机验证码
1 #_*_coding:utf-8_*_
2
3 from PIL import Image,ImageDraw,ImageFont,ImageFilter
4
5 import random
6 import math, string
7
8
9 #字体的位置，不同版本的系统会有不同
10 font_path = '/Library/Fonts/Arial.ttf'
11 #font_path = '/Library/Fonts/Hanzipen.ttc'
12 #生成几位数的验证码
13 number = 4
14 #生成验证码图片的高度和宽度
15 size = (100,30)
16 #背景颜色，默认为白色
17 bgcolor = (255,255,255)
18 #字体颜色，默认为蓝色
19 fontcolor = (0,0,255)
20 #干扰线颜色。默认为红色
21 linecolor = (255,0,0)
22 #是否要加入干扰线
23 draw_line = True
24 #加入干扰线条数的上下限
25 line_number = (1,5)
26
27
28
29
30 def gen_text():
31 source = list(string.ascii_letters)
32 for index in range(0,10):
33 source.append(str(index))
34 return ''.join(random.sample(source,number))#number是生成验证码的位数
35
36
37 #用来绘制干扰线
38 def gene_line(draw,width,height):
39 begin = (random.randint(0, width), random.randint(0, height))
40 end = (random.randint(0, width), random.randint(0, height))
41 draw.line([begin, end], fill = linecolor)
42
43 def gene_code(save_path,filename):
44 width,height = size #宽和高
45 image = Image.new('RGBA',(width,height),bgcolor) #创建图片
46
47 font = ImageFont.truetype(font_path,25) #验证码的字体和字体大小
48 #font = ImageFont.truetype(25) #验证码的字体和字体大小
49 draw = ImageDraw.Draw(image) #创建画笔
50 #text = "我是中国人" #生成字符串
51 text = gen_text() #生成字符串
52 print(text)
53 font_width, font_height = font.getsize(text)
54 draw.text(((width - font_width) / number, (height - font_height) / number),text,\
55 font= font,fill=fontcolor) #填充字符串
56
57 if draw_line:
58 gene_line(draw, width, height)
59 gene_line(draw, width, height)
60 gene_line(draw, width, height)
61 gene_line(draw, width, height)
62
63 image = image.transform((width + 20, height +10), Image.AFFINE, (1, -0.3, 0, -0.1, 1, 0), Image.BILINEAR) # 创建扭曲
64 image = image.filter(ImageFilter.EDGE_ENHANCE_MORE) # 滤镜，边界加强
65 image.save('%s/%s.png' %(save_path,filename)) # 保存验证码图片
66 print("savepath:",save_path)
67 return text
68
69 if __name__ == "__main__":
70 gene_code('/tmp','test') #会把生成的图片存成/tmp/test.png
2. 如何应用到你的django项目中
整个验证码的流程如下
- 用户访问登录页面，你的后台程序在给用户返回登录页面时，同时生成了验证码图片
- 用户输入账户信息和验证码数字，提交表单
- 后台判断用户输入的验证码和你生成的图片信息是否一致，如果一致，就代表验证码是没有问题的
问题就卡在第3步，你在第1步生成验证码并返回给用户后，由于一会用户还需要把这个验证码提交过来，你在后台就需要拿用户输入的和你之前生成 的验证码进行对比是否相等，
所以你必须在生成验证码的同时，把验证码存下来，存到哪？ 必然是缓存，这样直接在存的同时加个超时时间 ， 就可以限定验证码有效期了。
那存入缓存时的key是设置成什么呢？为了保证验证码的安全，我采取了以下设计
3.代码实现
login视图
1 def acc_login(request):
2 err_msg = {}
3 today_str = datetime.date.today().strftime("%Y%m%d")
4 verify_code_img_path = "%s/%s" %(settings.VERIFICATION_CODE_IMGS_DIR,
5 today_str)
6 if not os.path.isdir(verify_code_img_path):
7 os.makedirs(verify_code_img_path,exist_ok=True)
8 print("session:",request.session.session_key)
9 #print("session:",request.META.items())
10 random_filename = "".join(random.sample(string.ascii_lowercase,4))
11 random_code = verify_code.gene_code(verify_code_img_path,random_filename)
12 cache.set(random_filename, random_code,30)
13
14 if request.method == "POST":
15
16 username = request.POST.get('username')
17 password = request.POST.get('password')
18 _verify_code = request.POST.get('verify_code')
19 _verify_code_key = request.POST.get('verify_code_key')
20
21 print("verify_code_key:",_verify_code_key)
22 print("verify_code:",_verify_code)
23 if cache.get(_verify_code_key) == _verify_code:
24 print("code verification pass!")
25
26 user = authenticate(username=username,password=password)
27 if user is not None:
28 login(request,user)
29 request.session.set_expiry(60*60)
30 return HttpResponseRedirect(request.GET.get("next") if request.GET.get("next") else "/")
31
32 else:
33 err_msg["error"] = 'Wrong username or password!'
34
35 else:
36 err_msg['error'] = "验证码错误!"
37
38 return render(request,'login.html',{"filename":random_filename, "today_str":today_str, "error":err_msg})
template文件
1 {% extends 'base.html' %}
2
3 {% block body %}
4 <div id="container" class="cls-container">
5
6 <!-- BACKGROUND IMAGE -->
7 <!--===================================================-->
8 <div id="bg-overlay" class="bg-img img-balloon"></div>
9
10
11 <!-- HEADER -->
12 <!--===================================================-->
13 <div class="cls-header cls-header-lg">
14 <div class="cls-brand">
15 <a class="box-inline" href="index.html">
16 <!-- <img alt="Nifty Admin" src="img/logo.png" class="brand-icon"> -->
17 <span class="brand-title">PerfectCRM <span class="text-thin">老男孩教育</span></span>
18 </a>
19 </div>
20 </div>
21 <!--===================================================-->
22
23
24 <!-- LOGIN FORM -->
25 <!--===================================================-->
26 <div class="cls-content">
27 <div class="cls-content-sm panel">
28 <div class="panel-body">
29 <p class="pad-btm">Sign In to your account</p>
30 <form method="post">{% csrf_token %}
31 <div class="form-group">
32 <div class="input-group">
33 <div class="input-group-addon"><i class="fa fa-user"></i></div>
34 <input type="text" name="username" class="form-control" placeholder="Username">
35 </div>
36 </div>
37 <div class="form-group">
38 <div class="input-group">
39 <div class="input-group-addon"><i class="fa fa-asterisk"></i></div>
40 <input type="password" name="password" class="form-control" placeholder="Password">
41 </div>
42 </div>
43 <div class="form-group">
44 <div class="input-group">
45 <div class="input-group-addon">
46 <img height="30px" src="/static/verify_code_imgs/{{ today_str }}/{{ filename }}.png">
47 </div>
48 <input style="height: 50px" type="text" name="verify_code" class="form-control" placeholder="验证码">
49 <input type="hidden" name="verify_code_key" value="{{ filename }}" >
50 </div>
51 </div>
52 <div class="row">
53 <div class="col-xs-8 text-left checkbox">
54 <label class="form-checkbox form-icon">
55 <input type="checkbox"> Remember me
56 </label>
57 </div>
58 <div class="col-xs-4">
59 <div class="form-group text-right">
60 <button class="btn btn-success text-uppercase" type="submit">Sign In</button>
61 </div>
62 </div>
63 </div>
64 {% if error %}
65 <span style="color: red">{{ error.error }}</span>
66 {% endif %}
67
68 </form>
69 </div>
70 </div>
71 <div class="pad-ver">
72 <a href="pages-password-reminder.html" class="btn-link mar-rgt">Forgot password ?</a>
73 <a href="pages-register.html" class="btn-link mar-lft">Create a new account</a>
74 </div>
75 </div>
76 <!--===================================================-->
77
78
79
80 </div>
81 <!--===================================================-->
82 <!-- END OF CONTAINER -->
83 {% endblock %}
来源：https://www.cnblogs.com/kiko0o0/p/10730083.html