Django中生成隨機驗證碼(pillow模塊的使用)

Django中生成隨機驗證碼

1、html中a標簽的設置

<img src="/get_validcode_img/" alt="">

 

2、views中的get2、views中的getvalidcode_img設置

導入文件

import json
import os
import random
from django.contrib import auth
from django.shortcuts import render, redirect, HttpResponse
from django.forms import Form
from django.forms import fields
from django.forms import widgets
from django.core.exceptions import ValidationError
from django.conf import settings
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO

 

方法配置

def get_validcode_img(request):
    color = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
    # 生成一個顏色隨機的大小為160,30的圖片
    img = Image.new(mode="RGB", size=(160, 30), color=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
    # 設置圖片的繪制顏色
    draw = ImageDraw.Draw(img, "RGB")
    # 設置圖片的繪制字體（只寫字體名，會默認在系統的Fonts下去找）
    # font_path = os.path.join(settings.BASE_DIR, "static", "font", "kumo.ttf")
    # font = ImageFont.truetype(font_path, 25)
    font = ImageFont.truetype(r'C:\Windows\Fonts\Arial.ttf', 25)
    # font = ImageFont.truetype(r'C:\中文\kumo.ttf', 25)  # 中文路徑無法識別

    # 設置圖片上的字符串
    valid_list = []
    for i in range(5):
        random_num = str(random.randint(0, 9))
        random_letter_low = chr(random.randint(65, 90))
        random_letter_upper = chr(random.randint(96, 122))
        random_char = random.choice([random_num, random_letter_low, random_letter_upper])  # 隨機選擇字符（數字，大小寫字母)
        # 通過draw.text方法，設置圖片上字符串的x,y坐標，字符串，顏色，字體（for循環5次，生成5個字符的驗證碼)
        draw.text([5+i*25, 10], random_char, (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)), font=font)
        valid_list.append(random_char)
    # 獲取一個內存中的文件句柄
    f = BytesIO()
    # 在文件句柄中寫入文件
    img.save(f, 'png')
    # 取出文件
    data = f.getvalue()
    # 轉換成字符串
    valid_str = "".join(valid_list)
    print(valid_str)

    # 把驗證碼保存在session中，當用戶出入驗證碼發送請求的時候，把用戶輸入的數據和session中的驗證碼做對比
    request.session["validcode"] = valid_str
    return HttpResponse(data)

 

三、 Ajax請求配置

$(function(){
    $("#login_btn").click(function () {
        var username = $("#username").val();
        var password = $("#password").val();
        var validcode = $("#validcode").val();

        $.ajax({
            url: "/login/",
            type: "POST",
            data : {"username":username, "password":password, "validcode":validcode},
            headers: {"X-CSRFToken": $.cookie("csrftoken")},  //配置csrftoken
            success: function (data) {
                console.log(data);
                var response = JSON.parse(data);
                if (response["is_login"]){
                    self.location.href = ("/index/")
                }else{
                    $(".error").html(response["error_msg"]).css("color","red")
                }
            }
        })
    })
})

 

四、login登錄函數配置

def login(request):
    if request.method == "GET":
        return render(request, "login.html")
    elif request.method == "POST":
        print(request.POST)
        # 1，獲取用戶輸入信息
        username = request.POST.get("username")
        password = request.POST.get("password")
        validcode = request.POST.get("validcode")
        session_validcode = request.session.get('validcode')
        # 設置ajax請求的返回數據
        login_response = {"is_login": False, "error_msg": None}
        # 首先驗證驗證碼輸入是否正確
        if validcode.upper() == session_validcode.upper():
            # 通過auth模塊，驗證用戶名和密碼是否正確
            user = auth.authenticate(username=username, password=password)
            print(user)
            if user:
                # 驗證成功則在返回數據中標志True
                login_response['is_login'] = True
                # 同時設置用戶session
                auth.login(request, user)   # request.session[is_login] = True
            else:
                login_response['error_msg'] = "用戶名或密碼錯誤"
        else:
            login_response['error_msg'] = "驗證碼錯誤"
        print(login_response)
        return HttpResponse(json.dumps(login_response))