1. 程式人生 > >Django框架登入驗證及產生隨機驗證碼的例項

Django框架登入驗證及產生隨機驗證碼的例項

1:views檢視程式碼

# 登入驗證
def login(request):
    # 使用ajax請求可以使用判斷
    # if request.is_ajax():
    if request.method == 'POST':
        user = request.POST.get('user')
        pwd = request.POST.get('pwd')
        code = request.POST.get('code')
        ret = {'status': False, 'msg': None}
        print
(code) print(user, pwd) print(request.session.get('valid_code')) if request.session.get('valid_code').upper() == code.upper(): user = auth.authenticate(username=user, password=pwd) if user: auth.login(request, user) ret[
'status'] = True ret['msg'] = '/index/' else: ret['msg'] = '使用者名稱或密碼錯誤' else: ret['msg'] = '驗證碼錯誤' return JsonResponse(ret) return render(request, 'login.html')

2:views檢視中產生隨機驗證碼

# 獲取驗證碼
def get_valid_img(request):
    
# 方法一 # with open('hmbb.png','rb')as f: # data = f.read() # 方法二 import PIL from PIL import Image, ImageDraw, ImageFont import random # 獲取隨機顏色的函式 def get_random_color(): return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255) # 生成一個圖片物件 image = Image.new('RGB', (250, 40), get_random_color()) # 將生成的圖片儲存在磁碟上 # f = open('valid_code.png','wb') # image.save(f,'png') # # with open('valid_code.png','rb')as f: # data = f.read() # 生成一個圖片畫筆物件 draw_obj = ImageDraw.Draw(image) ''' draw.text() 向image中寫內容 draw.line() 向image中畫線 draw.point() 向image中畫點 ''' # 載入字型檔案, 得到一個字型物件 font_obj = ImageFont.truetype('static/font/kumo.ttf', 28) # 開始生成隨機字串並且寫到圖片上 tmp_list = [] for i in range(5): # 生成大寫字母 u = chr(random.randint(65, 90)) # 生成小寫字母 l = chr(random.randint(97, 122)) # 生成數字 n = str(random.randint(0, 9)) tmp = random.choice([u, l, n]) tmp_list.append(tmp) draw_obj.text((20 + 40 * i, 0), tmp, fill=get_random_color(), font=font_obj) # 加干擾線 # width = 220 # 圖片寬度(防止越界) # height = 35 # for i in range(5): # x1 = random.randint(0, width) # x2 = random.randint(0, width) # y1 = random.randint(0, height) # y2 = random.randint(0, height) # draw_obj.line((x1, y1, x2, y2), fill=get_random_color()) # # # 加干擾點 # for i in range(40): # draw_obj.point((random.randint(0, width), random.randint(0, height)), fill=get_random_color()) # x = random.randint(0, width) # y = random.randint(0, height) # draw_obj.arc((x, y, x+4, y+4), 0, 90, fill=get_random_color()) code = ''.join(tmp_list) # 新增session鍵值對,產生全域性變數獲取驗證碼判斷 request.session['valid_code'] = code from io import BytesIO f = BytesIO() # 將生成的圖片資料儲存在io物件中 image.save(f, 'png') # 從io物件裡面取上一步儲存的資料 data = f.getvalue() f.close() return HttpResponse(data)

3:HTML中的程式碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>login</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/mystyle.css">
</head>
<body>

<div class="container">

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="/login/" class="login-form" method="post">
                {% 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="pwd">密碼</label>
                    <input type="password" class="form-control" id="pwd" placeholder="password">
                </div>

                <div class="form-group">
                    <label for="pwd">驗證碼</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="code">
                        </div>
                        <div class="col-md-6">
                            <img width="250" height="40" id="valid_img" src="/get_valid_img/" alt="">

                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                         <div class="col-md-3">
                         <button type="button" id="d1" class="btn btn-info">登入</button>
                         </div>
                    <div class="col-md-6">
                        <span class="help-block login-error"></span>
                    </div>


                    </div>

                </div>

            </form>
        </div>
    </div>
</div>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
{#<script src="/static/setupajax.js"></script>#}

4:ajax請求程式碼

  1:ajax請求,返回響應並將錯誤新增頁面

  2:當input框獲得焦點,移除錯誤資訊

  3:點選驗證碼,會重新請求獲得驗證碼(重新整理)

<script>

    $('#d1').on('click', function () {
        $.ajax({
            url: '/login/',
            type: 'post',
            data: {
                user: $('#username').val(),
                pwd: $('#pwd').val(),
                code: $('#code').val(),
                'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()
            },
            success: function (data) {

                if (data.status) {
                    location.href = data.msg
                } else {
                    $(".login-error").text(data.msg)
                }
            }
        })
    });
    // 獲得游標事件清空錯誤
    $("#username,#pwd").focus(function () {
        $('.login-error').text('')
    });
    // 重新整理驗證碼
    $('#valid_img').click(function () {
        $(this)[0].src +='?';
    })




</script>