Django登陆验证码制作

check_code.py（ 需要配置字体路径，不然汇报错，无法识别出验证码 ）

from PIL import Image
from PIL import ImageDraw
from PIL import ImageFont
import random


class ValidCodeImg:
    def __init__(self, width=125, height=34, code_count=4, font_size=32, point_count=20, line_count=3,
                 img_format='png'):
        '''
        可以生成一个经过降噪后的随机验证码的图片
        :param width: 图片宽度 单位px
        :param height: 图片高度 单位px
        :param code_count: 验证码个数
        :param font_size: 字体大小
        :param point_count: 噪点个数
        :param line_count: 划线个数
        :param img_format: 图片格式
        :return 生成的图片的bytes类型的data
        '''
        self.width = width
        self.height = height
        self.code_count = code_count
        self.font_size = font_size
        self.point_count = point_count
        self.line_count = line_count
        self.img_format = img_format

    @staticmethod
    def getRandomColor():
        '''获取一个随机颜色(r,g,b)格式的'''
        c1 = random.randint(0, 255)
        c2 = random.randint(0, 255)
        c3 = random.randint(0, 255)
        return (c1, c2, c3)

    @staticmethod
    def getRandomStr():
        '''获取一个随机字符串，每个字符的颜色也是随机的'''
        random_num = str(random.randint(0, 9))
        random_low_alpha = chr(random.randint(97, 122))
        random_upper_alpha = chr(random.randint(65, 90))
        random_char = random.choice([random_num, random_low_alpha, random_upper_alpha])
        return random_char

    def getValidCodeImg(self):
        # 获取一个Image对象，参数分别是RGB模式。宽150，高30，随机颜色
        image = Image.new('RGB', (self.width, self.height), self.getRandomColor())

        # 获取一个画笔对象，将图片对象传过去
        draw = ImageDraw.Draw(image)

        # 获取一个font字体对象参数是ttf的字体文件的目录，以及字体的大小
        font = ImageFont.truetype("C:\\Program Files\\Python36\\Lib\\site-packages\\matplotlib\\mpl-data\\fonts\\ttf\\Monaco.ttf", size=self.font_size)

        temp = []
        for i in range(self.code_count):
            # 循环5次，获取5个随机字符串
            random_char = self.getRandomStr()

            # 在图片上一次写入得到的随机字符串,参数是：定位，字符串，颜色，字体
            draw.text((10 + i * 30, -2), random_char, self.getRandomColor(), font=font)

            # 保存随机字符，以供验证用户输入的验证码是否正确时使用
            temp.append(random_char)
        valid_str = "".join(temp)

        # 噪点噪线
        # 划线
        for i in range(self.line_count):
            x1 = random.randint(0, self.width)
            x2 = random.randint(0, self.width)
            y1 = random.randint(0, self.height)
            y2 = random.randint(0, self.height)
            draw.line((x1, y1, x2, y2), fill=self.getRandomColor())

        # 画点
        for i in range(self.point_count):
            draw.point([random.randint(0, self.width), random.randint(0, self.height)], fill=self.getRandomColor())
            x = random.randint(0, self.width)
            y = random.randint(0, self.height)
            draw.arc((x, y, x + 4, y + 4), 0, 90, fill=self.getRandomColor())

        # 在内存生成图片
        from io import BytesIO
        f = BytesIO()
        image.save(f, self.img_format)
        data = f.getvalue()
        f.close()

        return data, valid_str


if __name__ == '__main__':
    img = ValidCodeImg()
    data, valid_str = img.getValidCodeImg()
    print(valid_str)

    f = open('test.png', 'wb')
    f.write(data)

forms.py

from django import forms

class LoginUserForm(forms.Form):
    username = forms.CharField(label='账 号', error_messages={'required': '账号不能为空'},
                               widget=forms.TextInput(attrs={'class': 'form-control'}))
    password = forms.CharField(label='密 码', error_messages={'required': '密码不能为空'},
                               widget=forms.PasswordInput(attrs={'class': 'form-control'}))
    valid_code = forms.CharField(label='验证码', error_messages={'required': '验证码不能为空'},
                               widget=forms.PasswordInput(attrs={'class': 'form-control'}))

view.py

from django.contrib.auth import authenticate, login
from django.contrib.auth.hashers import make_password
from django.shortcuts import redirect
from django.shortcuts import render
from django.urls import reverse
from django.views import View
from utils.check_code import ValidCodeImg
from .forms import LoginUserForm

class LoginView(View):
    def get(self, request):
        return render(request, 'account/login.html')

    def post(self, request):
        login_form = LoginUserForm(request.POST)
        if login_form.is_valid():
            username = request.POST.get('username')
            password = request.POST.get('password')
            valid_code = request.POST.get('valid_code')
            user = authenticate(username=username, password=password,valid_code=valid_code)
            if valid_code.upper() != request.session.get('valid_code').upper():
                msg = '验证码错误！'
                context = {
                    'msg': msg,
                    'login_form': login_form,
                }
                return render(request, 'account/login.html', context=context)
            if user is not None:
                if user.is_active:
                    login(request, user)
                    request.session['is_login'] = True
                    return redirect('account:index')
                else:
                    msg = '用户未激活！'
                    context = {
                        'msg': msg,
                        'login_form': login_form,
                    }
                    return render(request, 'account/login.html', context=context)
            else:
                msg = '用户名或密码错误！'
                context = {
                    'msg': msg,
                    'login_form': login_form,
                }
                return render(request, 'account/login.html', context=context)
        else:
            context = {
                'login_form': login_form,
            }
            return render(request, 'account/login.html', context=context)


class GetValidImg(View):
    def get(self, request):
        obj = ValidCodeImg()
        img_data, valid_code = obj.getValidCodeImg()
        request.session['valid_code'] = valid_code
        return HttpResponse(img_data)

urls.py

from django.contrib import admin
from django.urls import path
from account.views import *

app_name = 'account'

urlpatterns = [
    path('admin/', admin.site.urls),
    path(' ', index, name='index'),
    path('login/', LoginView.as_view(), name='login'),
    path('logout/', logout, name='logout'),
    path('get_valid_img', GetValidImg.as_view(),name='get_valid_img')
]

html模板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
        <title>登录</title>
        <meta content="Admin Dashboard" name="description" />
        <meta content="ThemeDesign" name="author" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <link rel="shortcut icon" href="/static/login/images/faviicon.png">

        <link href="/static/login/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="/static/login/css/icons.css" rel="stylesheet" type="text/css">
        <link href="/static/login/css/style.css" rel="stylesheet" type="text/css">

    </head>


    <body>

        <!-- Begin page -->
        <div class="accountbg"></div>
        <div class="wrapper-page" style="width: 350px;">

            <div class="card" style="height: 450px">
                <div class="card-body" style="padding: 0.25rem;">

                    <h3 class="text-center mt-0 m-b-15">
                        <a href="../index.html" class="logo logo-admin"><img src="/static/login/images/logo.png" height="60" alt="logo"></a>
                    </h3>

                    <h4 class="text-muted text-center font-18"><b>Login</b></h4>

                    <div class="p-3">
                        <form class="form-horizontal m-t-20" role="form" method="post">
                            {% csrf_token %}
                            <!-- 用户名或者邮箱 -->
                            <div class="form-group row">
                                <div class="col-12">
                                    <input class="form-control" type="text" name="username" required="" placeholder="账号或邮箱" />
                                </div>
                            </div>
                            <!-- 密码 -->
                            <div class="form-group row">
                                <div class="col-12">
                                    <input class="form-control" type="password" name="password" required="" placeholder="密码">
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-7">
                                    <input class="form-control" id="valid-inp" name="valid_code" type="text" placeholder="请输入验证码" autocomplete="off">
                                </div>
                                <div>
                                    <img src="{% url 'account:get_valid_img' %}" title="点击再换一张" id="captcha" onclick="refresh_captcha(this)">
                                </div>
                            </div>

                            <div class="form-group text-center row m-t-20">
                                <div class="col-12">
                                    <button class="btn btn-primary btn-block waves-effect waves-light" type="submit">登录</button>
                                </div>
                            </div>

                            <div class="form-group m-t-10 mb-0 row" style="margin-top: -15px">
                                <div class="col-sm-7 m-t-20">
                                    <a href="{% url 'account:forget_pwd' %}" class="text-muted"><i class="mdi mdi-lock"></i> 忘记密码?</a>
                                </div>
                                <div class="col-sm-5 m-t-20">
                                    <a href="{% url 'account:register' %}" class="text-muted"><i class="mdi mdi-account-circle"></i> 注册</a>
                                </div>
                            </div>
                            <p class="text-muted text-center"></p>
                              <!-- 错误提示 -->
                              {% if msg %}
                                <p style="color: red; margin-top: 10px;text-align: center">{{ msg }}</p>
                              {% else %}
                                <p style="color: red; margin-top: 10px;text-align: center">{{ login_form.errors.captcha|cut:'<ul class="errorlist"><li>' }}</p>
                              {% endif %}

                        </form>
                            <p class="m-t">
                            </p>

                    </div>

                </div>
            </div>
        </div>



        <!-- jQuery  -->
        <script src="/static/login/js/jquery.min.js"></script>
        <script src="/static/login/js/popper.min.js"></script>
        <script src="/static/login/js/bootstrap.min.js"></script>
        <script src="/static/login/js/modernizr.min.js"></script>
        <script src="/static/login/js/detect.js"></script>
        <script src="/static/login/js/fastclick.js"></script>
        <script src="/static/login/js/jquery.slimscroll.js"></script>
        <script src="/static/login/js/jquery.blockUI.js"></script>
        <script src="/static/login/js/waves.js"></script>
        <script src="/static/login/js/jquery.nicescroll.js"></script>
        <script src="/static/login/js/jquery.scrollTo.min.js"></script>

        <!-- App js -->
        <script src="/static/login/js/app.js"></script>

        <script>
            function refresh_captcha(obj) {
                obj.src = '/account/get_valid_img/?temp='+Math.random()
            }
        </script>
    </body>
</html>