Django驗證碼功能

驗證碼

在用戶註冊、登錄頁面,爲了防止暴力請求,可以加入驗證碼功能,如果驗證碼錯誤,則不需要繼續處理,可以減輕業務服務器、數據庫服務器的壓力。

1)安裝包Pillow3.4.1

pip install Pillow==3.4.1

2)在booktest/views.py文件中,創建視圖verify_code。

提示1:隨機生成字符串後存入session中,用於後續判斷。

提示2:視圖返回mime-type爲image/png。

def verify_code(request):
    #引入隨機函數模塊
    import random
    #定義變量,用於畫面的背景色、寬、高
    bgcolor = (random.randrange(20, 100), random.randrange(
        20, 100), 255)
    width = 100
    height = 25
    #創建畫面對象
    im = Image.new('RGB', (width, height), bgcolor)
    #創建畫筆對象
    draw = ImageDraw.Draw(im)
    #調用畫筆的point()函數繪製噪點
    for i in range(0, 100):
        xy = (random.randrange(0, width), random.randrange(0, height))
        fill = (random.randrange(0, 255), 255, random.randrange(0, 255))
        draw.point(xy, fill=fill)
    #定義驗證碼的備選值
    str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'
    #隨機選取4個值作爲驗證碼
    rand_str = ''
    for i in range(0, 4):
        rand_str += str1[random.randrange(0, len(str1))]
    #構造字體對象,ubuntu的字體路徑爲“/usr/share/fonts/truetype/freefont”
    font = ImageFont.truetype('FreeMono.ttf', 23)
    #構造字體顏色
    fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
    #繪製4個字
    draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)
    draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)
    draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)
    draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)
    #釋放畫筆
    del draw
    #存入session,用於做進一步驗證
    request.session['verifycode'] = rand_str
    """
    python2的爲
    # 內存文件操作
    import cStringIO
    buf = cStringIO.StringIO()
    """
    # 內存文件操作-->此方法爲python3的
    import io
    buf = io.BytesIO()
    #將圖片保存在內存中,文件類型爲png
    im.save(buf, 'png')
    #將內存中的圖片數據返回給客戶端,MIME類型爲圖片png
    return HttpResponse(buf.getvalue(), 'image/png')

生成畫布驗證碼Code

3)打開booktest/urls.py文件,配置url。

url(r'^verify_code/$', views.verify_code),

4)運行服務器,在瀏覽器中輸入如下網址,即可看到。

http://127.0.0.1:8000/verify_code/

利用以上畫布代碼生成__看不請換一張__效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show_verify</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            // 添加點擊事件 鼠標浮動時變成小手
            $('#sp').css('cursor', 'pointer').click(function () {
                // 獲取到圖片的src路徑  換一個新的路徑   此代碼相當與在原來的基礎上增加數據
                $('#yzm').attr('src', $("#yzm").attr('src')+'?1')
            })
        })
    </script>
</head>
<body>
<form action="/verify_check2/" method="post">
    {% csrf_token %}
    請輸入驗證碼:<input type="text" name="verify"><br>
    <img src="/verify_code/" alt="" id="yzm"><span id="sp">看不清,換一張</span><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

def verify_check2(request):
    """驗證碼的驗證"""
    # 1.獲取post請求當中的輸入驗證碼的內容
    verify = request.POST.get('verify')
    # 2.獲取瀏覽器請求當中的session中的值
    verifycode = request.session.get('verifycode')
    # 3.判斷兩個驗證碼是否相同
    if verify == verifycode:
        return HttpResponse('ok')
    else:
        return HttpResponse('err')


def show_verify2(request):
    """顯示驗證碼界面"""
    return render(request, 'booktest/show_verify2.html')

url(r'^verify_code/$', views.verify_code),  # 配置驗證碼圖片
url(r'^show_verify2/$', views.show_verify2),  # 顯示驗證碼界面
url(r'^verify_check2/$', views.verify_check2)  # 檢測驗證碼

注意:以上內容是個人使用的隨手記錄, 就是介紹了下簡單的使用

歡迎大家來吐槽,準備好瓜子飲料礦泉水,開整!!!

---------------------------------------------------------------------------------------

搞笑一則:能動手儘量別吵吵


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章