Django生成登录图形验证码

1.图形验证码

• 使用Django生成登录图形验证码，并且存入缓存中；
• 前端点击图片触发验证码生成，前端验证码输入，通过ajax与后端数据交互；
• 后端接收前端传递验证码，到缓存查找如果找到以及验证码一致通过验证

验证码生成逻辑
- 生成随机字符串
- 不同字体
- 生成干扰线，防止机器采集识别绕过验证码
- 画布、画笔
- 生成返回字符串图片

1.1 配置Django缓存

• settings配置文件，设置Redis作为图片验证码缓存

# 配置Django缓存Redis
CACHES = {
    "default": {
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://192.168.3.251:6379/1",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient"
        }
    }
}

1.2 生成图形验证码

• 图形验证码文件，init.py写入生成图形代码

• 废话不说了，直接上代码，返回值文本 图片 两种类型
• 修改验证码数量；画布大小；字体大小，修改Captcha类属性

import random
import string
# Image：一个画布
# ImageDraw：一个画笔
# ImageFont:画笔的字体
from PIL import Image, ImageDraw, ImageFont
# pip install pillow

# Captcha验证码


class Captcha(object):
    # 生成几位数的验证码
    number = 5
    # 验证码图片的宽度和高度
    size = (100,40)
    # 验证码字体大小
    fontsize = 25
    # 加入干扰线的条数
    line_number = 2

    # 构建一个验证码源文本
    SOURCE = list(string.ascii_letters)
    for index in range(0, 10):
        SOURCE.append(str(index))


    # 用来绘制干扰线
    @classmethod
    def __gene_line(cls,draw,width,height):
        begin = (random.randint(0, width), random.randint(0, height))
        end = (random.randint(0, width), random.randint(0, height))
        draw.line([begin, end], fill = cls.__gene_random_color(),width=2)


    # 用来绘制干扰点
    @classmethod
    def __gene_points(cls,draw,point_chance,width,height):
        chance = min(100, max(0, int(point_chance))) # 大小限制在[0, 100]
        for w in range(width):
            for h in range(height):
                tmp = random.randint(0, 100)
                if tmp > 100 - chance:
                    draw.point((w, h), fill=cls.__gene_random_color())


    # 生成随机的颜色
    @classmethod
    def __gene_random_color(cls, start=0, end=255):
        random.seed()
        return (random.randint(start,end), random.randint(start,end), random.randint(start,end))


    # 随机选择一个字体
    @classmethod
    def __gene_random_font(cls):
        fonts = [
            'Courgette-Regular.ttf',
            'LHANDW.TTF',
            'Lobster-Regular.ttf',
            'verdana.ttf'
        ]
        font = random.choice(fonts)
        return 'utils/captcha/'+font


    # 用来随机生成一个字符串(包括英文和数字)
    @classmethod
    def gene_text(cls, number):
        # number是生成验证码的位数
        return ''.join(random.sample(cls.SOURCE, number))


    #生成验证码
    @classmethod
    def gene_graph_captcha(cls):
        # 验证码图片的宽和高
        width, height = cls.size   # fffff  red  rgb()
        # 创建图片
        # R：Red（红色）0-255
        # G：G（绿色）0-255
        # B：B（蓝色）0-255
        # A：Alpha（透明度）
        image = Image.new('RGBA', (width, height), cls.__gene_random_color(0, 100))
        # 验证码的字体
        font = ImageFont.truetype(cls.__gene_random_font(), cls.fontsize)
        # 创建画笔
        draw = ImageDraw.Draw(image)
        # 生成字符串
        text = cls.gene_text(cls.number)
        # 获取字体的尺寸
        font_width, font_height = font.getsize(text)
        # 填充字符串
        draw.text(((width - font_width) / 2, (height - font_height) / 2),text,font= font,fill=cls.__gene_random_color(150, 255))
        # 绘制干扰线
        for x in range(0, cls.line_number):
            cls.__gene_line(draw, width, height)
        # 绘制噪点
        cls.__gene_points(draw, 10, width, height)
        return (text, image)

1.3 Django视图写入逻辑代码

• 图片是一个流数据，也就是存到一个管道中，不像字符串用容器保存，
• 需要使用IO模块BytesIO：from io import BytesIO

def image_captcha(request):
    text, image = Captcha.gene_graph_captcha()
    # 实例化管道,保存图片流数据
    out = BytesIO()
    # 图片保存管道中,png格式
    image.save(out, 'png')
    # 读取得时候指针回零0
    out.seek(0)
    # 把图片返回到浏览器上，通过response对象返回浏览器上
    response = HttpResponse(content_type='image/png')
    # 从管道把图片读取出来
    response.write(out.read())
    response['Content-length'] = out.tell()
    cache.set(text.lower(), text.lower(), 5*60)
    return response

• 在urls写入路由

from django.urls import path
from . import views

app_name = 'cmsauth'
urlpatterns = [
	...
    path('image_captcha/', views.image_captcha, name='image_captcha'),
	...
]

1.4 前端界面配置

• 前端生成图形验证码地方，使用url反向解析 {% url ‘cmsauth:image_captcha’ %}

                            <div class="input-group">
                                <div class="short-input-group">
                                    <input type="text" class="form-control" name="img_captcha" placeholder="图形验证码">
                                </div>
                                <div class="input-group-addon">

                                    <img src="{% url 'cmsauth:image_captcha' %}" alt="" class="img-captcha" style="cursor:pointer;">
                                </div>
                            </div>

• 在ajax配置数据提交位置

qfajax.post({
            'url':'/account/register/',
            'data':{
                'telephone':telephone,
                'username':username,
                'image_captcha':imageCaptcha,
                'password1':password1,
                'password2':password2,
            },
            //result存放服务器返回的结果
            'success':function (result) {
                alert(result.code)
            }
        })

1.5 效果图