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),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,width)
        y1=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)

猜你喜欢

转载自www.cnblogs.com/wangdamao/p/11564355.html