验证码与session的应用

每个用户独一无二的验证码可以存储在session里,这样提交到登录视图函数,就会有一把钥匙,存储个人验证码,就可以在视图函数里进行验证了.

获取动态图片

def get_valid_img(request):
    def get_random_color():
        return (random.randint(0,255),random.randint(0,255),random.randint(0,255))
    img=Image.new('RGB',(300,36),get_random_color())
    draw=ImageDraw.Draw(img)
    font=ImageFont.truetype('kumo.ttf',30)
    verificaton_code = ''
    for i in range(6):
        random_num=str(random.randint(0,9))
        random_upper_alp=chr(random.randint(65,90))
        random_lowwer_alp=chr(random.randint(97,122))
        number=random.choice([random_num,random_lowwer_alp,random_upper_alp])
        draw.text((i*30+50,0),number,get_random_color(),font)
        verificaton_code+=number
    print(verificaton_code)
    # 划线
    width=300
    heigh=36
    for i in range(6):
        x1=random.randint(0,width)
        y1=random.randint(0,heigh)
        x2=random.randint(0,width)
        y2=random.randint(0,heigh)
        draw.line((x1,y1,x2,y2),get_random_color())
    for i in range(10):
        draw.point((random.randint(0,width),random.randint(0,heigh)),get_random_color())
        x=random.randint(0,width)
        y=random.randint(0,heigh)
        draw.arc((x,y,x+5,y+5),0,100,get_random_color())
    # 存在内存
    f = BytesIO()
    img.save(f, 'png')
    data = f.getvalue()
    # 把验证码存在各自的session
    request.session['verificaton_code']=verificaton_code
    return HttpResponse(data)

登录视图函数

def login(request):
    if request.is_ajax():
        res={'user':None,'error_msg':None}
        name=request.POST.get('name')
        pwd=request.POST.get('pwd')
        validcode=request.POST.get('validcode')
        verification_code=request.session['verificaton_code']
        if validcode.upper()==verification_code.upper():
            obj=auth.authenticate(request,username=name,password=pwd)
            if obj:
                auth.login(request,obj)
                res['user']=name
            else:
                res['error_msg']='用户名或密码错误'
        else:
            res['error_msg']='验证码错误'
        return JsonResponse(res)
    else:
        return render(request,'login.html')

login页面和ajax

<body>
<div class="container" style="margin-top: 60px">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            {% csrf_token %}
            <div class="form-group">
                <label for="name">用户名</label>
                <input class="form-control" type="text" name="name" id="name">
            </div>
            <div class="form-group">
                <label for="pwd">密码</label>
                <input class="form-control" type="password" name="pwd" id="pwd">
            </div>
            <div class="form-group">
                <label for="">验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="text" class="form-control" id="validcode">
                    </div>
                    <div class="col-md-6">
                        <img width="350" height="36" src="/get_valid_img/" alt="" id="img">
                    </div>
                </div>
            </div>
            <span id="msg"></span>
            <button class="btn btn-success pull-right" id="log_btn">登录</button>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        $('#img').click(function () {
            this.src+='?';
        });
        $('#log_btn').click(function () {
            $.ajax({
                url:'',
                type:'post',
                data:{
                    name:$('#name').val(),
                    pwd:$('#pwd').val(),
                    validcode:$('#validcode').val(),
                    csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val()
                },
                success:function (res) {
                    if(res.user){
                        location.href='/index/'
                    }else{
                        $('#msg').html('');
                        $('#msg').html(res.error_msg);
                    }
                }
            })
        })
    })
</script>

验证码与session的应用

猜你喜欢