生成四個隨機數的驗證碼

1. 後端方法：

def validate_code(request):
    # 定義變數，用於畫面的背景色、寬、高
    # bgcolor = (random.randrange(256), random.randrange(256), random.randrange(256))
    bgcolor = (255,255,255)
    width = 100
    height = 25
    # 建立畫面物件
    im = Image.new('RGB', (width, height), bgcolor)
    # 建立畫筆物件
    draw = ImageDraw.Draw(im)
    # 呼叫畫筆的point()函式繪製噪點
    for i in range(0, 200):
        xy = (random.randrange(0, width), random.randrange(0, height))
        fill = (random.randrange(0, 255), random.randrange(0, 255), random.randrange(0, 255))
        draw.point(xy, fill=fill)
    # 定義驗證碼的備選值
    str1 = 'abcd123efgh456ijklmn789opqr0stuvwxyzABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'
    # 隨機選取4個值作為驗證碼
    rand_str = ''
    for i in range(0, 4):
        rand_str += str1[random.randrange(0, len(str1))]


    #儲存到sesison
    request.session["validate_code"] = rand_str

    # 構造字型物件
    # font = ImageFont.truetype(settings.FONT_STYLE, 23)
    font = ImageFont.truetype("FreeMono.ttf", 23)
    # 繪製4個字
    for i in range(4):
        # 構造字型顏色
        fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
        draw.text((5+23*i, 2), rand_str[i], font=font, fill=fontcolor)

    # 釋放畫筆
    del draw

    buf = BytesIO()
    # 將圖片儲存在記憶體中，檔案型別為png
    im.save(buf, 'png')
    # 將記憶體中的圖片資料返回給客戶端，MIME型別為圖片png
    return HttpResponse(buf.getvalue(), 'image/png')
 

ps:
這是在linux下實現的
如果是別的環境，需要在 構建字型物件的那一塊將 字型換成你的系統自帶的字型

    font = ImageFont.truetype("換字型", 23)

2.前端程式碼：

form表單：

            <div class="v_code" >
                 <input name="validate_code" placeholder="請輸入驗證碼"/>
                 <img id ="validate_code"  src="{% url 'user:validate_code' %}"/>
             </div>
 

script中設定點選方法—點選驗證碼圖片重新整理

	<script type="text/javascript">
        var validate_code=document.getElementById("validate_code")
        var url = '/user/validate_code?num='
        validate_code.onclick=function ()  {
            var num = new Date().getTime()

            url += num
            validate_code.src= url
        }

    </script>
 

3.後端再獲取前端使用者輸入的驗證碼與session中儲存的驗證碼比較：

        #獲取驗證碼
        validate = request.POST.get("validate_code", "").strip().lower()

        if validate != request.session.get("validate_code").lower():
            return redirect(reverse("user:login"))