今天我們來學習登錄驗證中，如何生成隨機驗證碼？驗證碼使用基本都是找現成的組件來實現，用代碼實現這個簡單功能主要是了解了解驗證碼內部的實現。

友情鏈接

生成隨機驗證碼基本流程：http://www.cnblogs.com/yuanchenqi/articles/7468816.html

一、效果圖展示

二、代碼實現

1、首先用bootstrap布一個上圖簡單的頁面

<div class="container">
    <div class="row">
        <div class="col-md-5 col-md-offset-3"
 
>
            <h1>賬戶登錄</h1><span class="error"></span>
            <form>
                {% csrf_token %}
                <div class="form-group">
                    <label for="username">用戶名</label>
                    <input type="text" class="form-control"
 
 id="username" placeholder="username">
                </div>
                <div class="form-group">
                    <label for="password">密碼</label>
                    <input type="password" class="form-control" id="password" placeholder="password">
                </
 
div>

                <div class="row validCode">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="validCode">驗證碼</label>
                            <input type="text" class="form-control validCode_text" id="validCode"
                                   placeholder="validCode">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <img class="validCode_img" src="/get_validCode_img/" alt="" width="200px" height="50px">
                    </div>
                </div>
                <input type="button" value="登錄" class="btn btn-primary" id="subBtn">
            </form>
        </div>
    </div>
</div>

2、在視圖函數裏寫一個驗證碼

首先下載圖像處理的模塊

pip install PIL
pip install pillow

第一個無法下載的話就下載第二個他們的引用都是from PIL沒有區別 實現隨機驗證碼圖片代碼：

def get_validCode_img(request):
    from io import BytesIO  #內存
    import random
    from PIL import Image,ImageDraw,ImageFont  

    img = Image.new(mode="RGB", size=(120, 40), color=(random.randint(0,255),random.randint(0,255),random.randint(0,255)))

    draw=ImageDraw.Draw(img,"RGB")
    font=ImageFont.truetype("static/font/kumo.ttf",25)  

    valid_list=[]
    #隨機五位數字大小寫字母
    for i in range(5):
        random_num=str(random.randint(0,9))
        random_lower_zimu=chr(random.randint(65,90))
        random_upper_zimu=chr(random.randint(97,122))

        random_char=random.choice([random_num,random_lower_zimu,random_upper_zimu])
        draw.text([5+i*24,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)
    request.session["keepValidCode"]=valid_str  #存入session
    return HttpResponse(data)

三、登錄驗證

1、ajax實現驗證

<script src="/static/jquery-3.2.1.js"></script>
<script>
    $("#subBtn").click(function () {
        $.ajax({
            url: "/login/",
            type: "POST",
            data: {
                "username" : $("#username").val(),
                "password" : $("#password").val(),
                "validCode" : $("#validCode").val(),
                "csrfmiddlewaretoken" : $("[name=‘csrfmiddlewaretoken‘]").val()
            },
            success: function (data) {
                var response = JSON.parse(data);
                if (response["is_login"]) {
                    location.href = "/index/"
                }
                else {
                    $(".error").html(response["error_msg"]).css("color", "red")
                }
            }
        })
    })
</script>

2、view視圖函數

使用django中的自帶用戶驗證需要導入模塊

from django.contrib import auth

具體代碼

def log_in(request):
    if request.is_ajax():
        username=request.POST.get("username")
        password=request.POST.get("password")
        validCode=request.POST.get("validCode")
        login_response={"is_login":False,"error_msg":None}
        if validCode.upper()==request.session.get("keepValidCode").upper():
            user=auth.authenticate(username=username,password=password)
            if user:
                login_response["is_login"]=True
                request.session["IS_LOGON"] = True
                request.session["USER"] = username
                # auth.login(request,user) 與上面兩步自己寫session相同
            else:
                login_response["error_msg"] = "username or password error"
        else:
            login_response["error_msg"]=‘validCode error‘
        import json
        return HttpResponse(json.dumps(login_response))
    return render(request,"login.html")

首頁視圖函數

def index(request):
    ret=request.session.get("IS_LOGON",None)
    if ret :
       username=request.session.get("USER")
       return render(request, "index.html",{"username":username})
    return redirect("/login/")
    # if not request.user.is_authenticated():
    #     return redirect("/login/")
    # return render(request,"index.html")
    # 與上面auth.login(request,user)對應使用
    # 此時在template頁面使用{{ request.user.username }}顯示用戶直接使用不需傳值

登錄驗證隨機驗證碼的實現