python3 로그인 인증 코드 (프레임 기반 장고)

1. 첫 페이지 (및 혼입 JQuery와 bootstrap.css)

< DIV 클래스 = "컨테이너" > 
    < DIV 클래스 = "로우" > 
        < DIV 클래스 = "COL-MD-8 COL-MD-오프셋 2" > 
            < 폼 작업 = "" 방식 = "POST" > 
                {%의 csrf_token %} 
                < DIV 클래스 = "폼 기" > 
                    < lable가 대 = "" >用户名</ lable가 > 
                    < 입력 유형 = "텍스트" 클래스 = "폼 제어 " ID ="사용자 " > 
                </DIV > 
                < DIV 클래스 = "폼 기" > 
                    < lable가 대 "=" >密码</ lable가 > 
                    < 입력 타입 = "비밀번호" 클래스 = "폼 제어" ID = "비밀번호" > 
                </ DIV > 
                < DIV 클래스 = "폼 기" > 
                    < lable가 대 = "" >验证码</ lable가 > 
                    < DIV 클래스 "="행> 
                        < DIV의 클래스= "COL-MD-6" > 
                          < 입력 유형 = "텍스트" 클래스 = "폼 제어" ID = "validcode" > 
                        </ DIV > 
                        < DIV 클래스 = "COL-MD-6" > 
                            < IMG SRC = " / valid_Image / " ALT =" " 클래스 ="유효 IMG " > 
                        </ DIV > 
                         < DIV 클래스 ="COL-MD-3 " > 
                          < 입력 타입 ="버튼 "   ID ="새로 고침 "> 
                        </ DIV > 
                    </ DIV >
                </ DIV > 
                < 입력 타입 = "버튼" 클래스 = "BTN BTN - 우선" 값 = "登录" > 
                < 스팬 클래스 = "오류 정보" > </ 스팬 > 
            </ 형성 > 
        </ DIV > 
    </ DIV > 
</ DIV >

<script> 
    $ ( ".btn-차"()을 클릭합니다. 함수 () { 
        $ 아약스 ({ 
            URL : '' , 
            유형 : '포스트' , 
            데이터 : { 
                $ (: 사용자 #user '' () .val를 ) 
                암호 : $ ( '에는 #Password' .val ()) 
                validcode : $ ( '#validcode' ) .val () 
                csrfmiddlewaretoken : $ ( "[이름 = 'csrfmiddlewaretoken']" ) (.val) 
            } , 
            성공 :함수 (대응) {
                 // 여부를 확인 결정 
                한다면(response.user) { 
                    $ ( '에는 .error-정보'). html로 (response.user) .CSS ( '색', '블랙' ) 
                } 
                다른 { 
                    $ ( '에는 .error-정보'). html로 (응답. 에러) .CSS ( '컬러', '적색' ) 
                } 
            } 
        }) 

    }); 
      // 点击验证码图片异步刷新 
      . $ ( ". 유효-IMG") (클릭 기능 () { 
          {#src . = $ ( '. 유효-IMG가') ( 'SRC')를 소품 + "?" # } 
          {# $ ( . '- IMG .valid이') ( 'SRC'소품 , SRC)를 #}
           이 하려면 .src + = '?' ;

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)