python的django实现图片验证码登录功能

无敌的宇宙

擅长邻域：Java,HTML,JavaScript,MySQL,支付，退款，图片上传

2024-08-15 14:13:06 213浏览

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" method="post" action="/login" role="form" style="width: 500px;margin:100px auto">
    {% csrf_token %}
    <div class="form-group">
        <label  class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10">
            <input value="{{inp_data.uname}}" type="text" name="uname" class="form-control"   placeholder="请输入" required>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input value="{{inp_data.upass}}" type="password" name="upass" class="form-control"   placeholder="请输入" required>
        </div>

    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">验证码</label>
        <div class="col-sm-6">
            <input   type="text" name="code" class="form-control"   placeholder="请输入" required>
        </div>
        <div class="col-sm-2">
            <img id="getimgcode"  >
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
            <p style="color: red">{{msg}}</p>
        </div>
    </div>
</form>

</body>
</html>

<script>
    getimgcode()
    function getimgcode(){
        $.get("/getimgcode",function(data,status){
            $('#getimgcode').attr('src',data)
        });
    }
    $('#getimgcode').click(function(){
        getimgcode()
    })
</script>

html session 取值   {{request.session.loginU.realname}}

图形验证码工具app01/untils/imgcodeUntil.py

import base64
import os
import random 
from PIL import Image, ImageDraw, ImageFilter,ImageFont


def get_img_and_code(width=120, height=30, char_length=5, font_file='arial.ttf', font_size=28):
    code = []
    img = Image.new(mode='RGB', size=(width, height), color=(255, 255, 0))
    draw = ImageDraw.Draw(img, mode='RGB')

    def rndChar():
        """
        生成随机字母
        :return:
        """
        return chr(random.randint(65, 90))

    def rndColor():
        """
        生成随机颜色
        :return:
        """
        return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))

    # 写文字
    font = ImageFont.truetype(font_file, font_size)
    for i in range(char_length):
        char = rndChar()
        code.append(char)
        h = random.randint(0, 4)
        draw.text([i * width / char_length, h], char, font=font, fill=rndColor())

    # 写干扰点
    for i in range(40):
        draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())

    # 写干扰圆圈
    for i in range(40):
        draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
        x = random.randint(0, width)
        y = random.randint(0, height)
        draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())

    # 画干扰线
    for i in range(5):
        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=rndColor())

    img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)
    image_base64=get_base64_img(img)
    return image_base64,''.join(code)

def get_base64_img(img):
    fname=''
    for t in range(1,10):
        fname+=str(random.randint(1,10))
    imagepath='D:/'+fname+'.png'
    with open(imagepath,'wb') as f:
        img.save(f,format='png')
    with open(imagepath, 'rb') as f:
        image = f.read()
        image_base64 = 'data:image/png;base64,'+str(base64.b64encode(image), encoding='utf-8')
    os.remove(imagepath)
    return image_base64



# if __name__ == '__main__':

views.py

from app01.untils import imgcodeUntil

def login(request ):
    if request.method=='GET':
        return render(request,"login.html" )
    uname=request.POST['uname']
    upass=request.POST['upass']
    code=request.POST['code']
    #验真码不通过时回显数据
        inp_data={'uname':uname,'upass':upass}

    servercode=request.session.get('imgcode')
    if not servercode:
        return render(request,"login.html",{'msg':'验证码已失效','inp_data':inp_data} )
    if servercode.lower()!=code.lower():
        return render(request,"login.html",{'msg':'验证码错误','inp_data':inp_data} )
    u=Users.objects.filter(upass=upass,uname=uname).first()
    if u:
        request.session['loginU']={'id':u.id,'realname':u.realname}
        #有效期7day
        request.session.set_expiry(60*60*24*7)
        return redirect('/dep/list')
    return render(request,"login.html",{'msg':'登录失败' } )


def logout(request ):
    request.session.clear()
    return redirect('/login')
 

def getimgcode(request ):
    img,code=imgcodeUntil.get_img_and_code()
    request.session['imgcode']=code
    #有效期60s
    request.session.set_expiry(60) 
    return HttpResponse(img)