python3 登录验证码基于django框架

1. 前端页面（引入jquery与bootstrap.css）

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <form action="" method="post"> {% csrf_token %} <div class="form-group">
                    <lable for="">用户名</lable>
                    <input type="text" class="form-control" id="user">
                </div>
                <div class="form-group">
                    <lable for="">密码</lable>
                    <input type="password" class="form-control" id="password">
                </div>
                <div class="form-group">
                    <lable for="">验证码</lable>
                    <div class="row">
                        <div class="col-md-6">
                          <input type="text" class="form-control" id="validcode">
                        </div>
                        <div class="col-md-6">
                            <img src="/valid_Image/" alt="" class="valid-img">
                        </div>
                         <div class="col-md-3">
                          <input type="button" id="refresh">
                        </div>
                    </div>
                </div>
                <input type="button" class="btn btn-primary" value="登录">
                <span class="error-info"></span>
            </form>
        </div>
    </div>
</div>

<script> $(".btn-primary").click(function () { $.ajax({ url:‘‘,type:‘post‘,data:{ user:$(‘#user‘).val(),password:$(‘#password‘).val(),validcode:$(‘#validcode‘).val(),csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val(),},success:function (response) { //判断是否通过验证
                if (response.user){ $(‘.error-info‘).html(response.user).css(‘color‘,‘black‘) } else{ $(‘.error-info‘).html(response.error).css(‘color‘,‘red‘) } } }) }); //点击验证码图片异步刷新
      $(".valid-img").click(function () { {#src=$(‘.valid-img‘).prop(‘src‘)+"?";#} {#$(‘.valid-img‘).prop(‘src‘,src);#} this.src+=‘?‘; }) </script>

2. 后台python

from django.shortcuts import render,HttpResponse from django.contrib import auth #登录视图函数
def login(request): #判断请求方式
    if request.is_ajax(): #获得前端用户登陆数据
        user=request.POST.get(‘user‘) password=request.POST.get(‘password‘) validcode=request.POST.get(‘validcode‘) #创建响应数据字典
        response = {"user": None,"error": ""} #判断验证码是否一致
        if validcode.upper()==request.session.get(‘valid_text‘).upper(): #验证码一直后判断用户名与密码是否正确，如正确返回用户对象
            user_obj=auth.authenticate(usename=user,password=password) if user_obj: response[‘user‘]=user else: response[‘error‘]="用户名或者密码错误"
        #ajax请求返回一个json
        else: response[‘user‘]=‘验证码错误‘
        return JsonResponse(response) if  request.request.method==‘GET‘: return render(request,‘login.html‘) #生成验证码图片
def valid_Image(request): from PIL import Image,ImageDraw,ImageFont from io import BytesIO import random #获得随机颜色
    def get_random_color(): return(random.randint(0,255),random.randint(0,255)) #生成背景图片
    img=Image.new(‘RGB‘,(130,40),get_random_color()) #使用画笔
    draw=ImageDraw.Draw(img) #设置验证码字体（字体文件与路径需自己设置）
    font=ImageFont.truetype(‘static/Hollywood Hills Italic.ttf‘,20) #创建存储验证码字符串的变量
    valid_text=‘‘
    #生成验证码（包括数字与大小写字母）
    for i in range(5): random_Num=str(random.randint(0,9)) random_Lowchar=chr(random.randint(97,122)) random_Upchar = chr(random.randint(65,90)) random_text=random.choice([random_Num,random_Lowchar,random_Upchar]) draw.text((i*20+10,5),random_text,get_random_color(),font) valid_text+=random_text #生成验证码图片内的干扰线与噪点
    width=130 height=40
    for i in range(10): x1=random.randint(0,width) y1=random.randint(0,height) x2 = random.randint(0,width) y2 = random.randint(0,height) draw.line((x1,y1,x2,y2),fill=get_random_color()) for i in range(120): x1=random.randint(0,height) draw.point((x1,y1),fill=get_random_color()) #设置session
    request.session[‘valid_text‘]=valid_text #将生成的图片存在内存中
    f=BytesIO() img.save(f,‘jpeg‘) data=f.getvalue() f.close() #返回验证码图片
    return HttpResponse(data)