1.2博客系統 |登陸頁| 驗證碼

時間  2020-07-14
標籤 1.2 博客 系統 登陸 驗證碼 简体版
原文   原文鏈接

基於用戶認證組件和Ajax實現登陸驗證

UserInfo表既有原生auth_user表的字段，又有你擴展的字段，之後用的接口UserInfo既是本身的用戶表又是原生認證組件的用戶表css

1.登陸頁面的設計

login.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/blog/bootstrap/css/bootstrap.css"> {# <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">#} </head>
<body>
<h3>登陸頁面</h3>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-offset-3">
            <form> {% csrf_token %} <div class="form-group">
                    <label for="user">用戶名</label>
                    <input type="text" id="user" class="form-control">
                </div>
                <div class="form-group">
                    <label for="pwd">密碼</label>
                    <input type="password" id="pwd" class="form-control">
                </div>
                <div class="form-group">
                    <label for="pwd">驗證碼</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="valid_code">
                        </div>
                        <div class="col-md-6">
                            <img width="270" height="40" id = "valid_code_img" src="/get_validCode_img/" alt="">
                        </div> ##src 能夠加靜態文件，也能夠動態， 
                    </div>
                </div>

                <input type="button" class="btn btn-default login_btn pull-right" value="submit"><span class="error"></span>
            </form>
        </div>
    </div>
</div>

 

2.驗證碼圖片的生成

validCode.pypython

import random def get_validCode_img(request): def get_random_color(): #隨機生成一個新的圖片背景         return (random.randint(0,255), random.randint(0,255), random.randint(0,255)) #方式一 --> 只須要了解它的流程
    # with open("luffy.jpg",'rb')as f:
    # data = f.read()    
　　　　#return Httpresponse(data)
　　#方式二: pip install pillow --> 圖像處理的模塊
    # from PIL import Image
    # img = Image.new("RGB",(270,40), color=get_random_color()) #長度270，高度40，color是動態生成的，顏色三要素color=（0,255,0）
    # with open("validCode.png", "wb")as f: #先加到磁盤上
    # img.save(f,'png') #會生成一個叫validCode.png的圖片
    # with open("validCode.png", "rb")as f: #再讀出來；磁盤的處理速度是很慢的
    # data = f.read()

    #方式三： 磁盤內存管理
    # from PIL import Image
    # from io import BytesIO #--->BytesIO就是內存管理
    # img = Image.new("RGB",(270,40), color=get_random_color())
    # f = BytesIO() #這種方式是放在內存中，f就是內存句柄
    # img.save(f,"png") #save到內存裏邊了
    # data = f.getvalue() #取出來
    #方式四： 
    from PIL import Image, ImageDraw, ImageFont #ImageDraw是畫筆， ImageFont是字體大小 from io import BytesIO import random img = Image.new("RGB",(270,40), color=get_random_color()) #這是剛剛生成的畫板 draw = ImageDraw.Draw(img) #畫筆draw只爲畫板img服務。 draw.text()寫文字 、draw.line()畫線 、draw.point()畫點 kumo_font = ImageFont.truetype("static/font/kumo.ttf", size=32) #參數爲字體路徑、大小；ttf字體 ；拿到關於kumo.ttf的字體對象
　　for i in range(5): random_num = str(random.randint(0,9)) random_low_alpha = chr(random.randint(95,122)) #隨機小寫字母 random_upper_alpha = chr(random.randint(65,90)) #隨機大寫字母 random_char = random.choice([random_num, random_low_alpha, random_upper_alpha]) draw.text((i*50+20, 5), random_char, get_random_color(), font=kumo_font)
　　f = BytesIO() img.save(f,"png") data = f.getvalue()

噪聲噪線

validCode.pyjquery

　　 width = 270  #要跟上邊的寬高一致
    height = 40
    for i in range(10): x1 = random.randint(0,width) x2 = random.randint(0,width) y1 = random.randint(0,height) y2 = random.randint(0,height) draw.line((x1,y1,x2,y2), fill = get_random_color()) for i in range(100): draw.point([random.randint(0,width), random.randint(0,width), random.randint(0,height), random.randint(0,height)]) x = random.randint(0,width) y = random.randint(0,height) draw.arc((x, y, x+4, y+4),0, 90, fill=get_random_color())

 

3.驗證碼刷新

$("#valid_code_img")[0] <img width=​"270" height=​"40" id=​"valid_code_img" src=​"http:​/​/​127.0.0.1:​8000/​get_validCode_img/​??" alt>​ $("#valid_code_img")[0].src "http://127.0.0.1:8000/get_validCode_img/??" $("#valid_code_img")[0].src+="?"  #+="?"添加一次這個就刷新一次驗證碼
"http://127.0.0.1:8000/get_validCode_img/???" $("#valid_code_img")[0].src+="?"
"http://127.0.0.1:8000/get_validCode_img/????" $("#valid_code_img")[0].src+="?"
"http://127.0.0.1:8000/get_validCode_img/?????" $("#valid_code_img")[0].src+="?"
"http://127.0.0.1:8000/get_validCode_img/??????" $("#valid_code_img")[0].src+="?"
"http://127.0.0.1:8000/get_validCode_img/???????"

login.htmlajax

<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
    //刷新驗證碼,不用ajax也能夠 $("#valid_code_img").click(function(){ $(this)[0].src += "?" });

4.保存驗證碼字符串

validCode.pydjango

valid_code_str = "" #保存驗證碼字符串，這樣才能驗證
    for i in range(5): random_num = str(random.randint(0,9)) random_low_alpha = chr(random.randint(95,122)) random_upper_alpha = chr(random.randint(65,90)) random_char = random.choice([random_num, random_low_alpha, random_upper_alpha])  draw.text((i*50+20, 5), random_char, get_random_color(), font=kumo_font) #保存驗證碼字符串
        valid_code_str += random_char #作一個累加 print("valid_code_str", valid_code_str) request.session["valid_code_str"] = valid_code_str #保存它，寫一個session ''' 1 sdajsdq33asdf #生成一個隨機字符串， 2 COOKIE {"sessionid":sdajsdq33asdf} #設置一個cookie，返回給cookie那邊一個鍵叫sessionid，值是隨機字符串 3 django-session #數據部分保存到了django_session；在session表進行存儲 session-key session-data sdajsdq33asdf {"valid_code_str":"12345"} ''' f = BytesIO() img.save(f,"png") data = f.getvalue() return HttpResponse(data)

5.登陸驗證

#global valid_code_str 這裏不能把它變成全局變量，這時雖然校驗時能夠拿到valid_code_str，但若是是兩我的一塊訪問，
那麼那個驗證碼的值存的是最後一我的訪問（刷新）的，前面那我的那個就取不到了
應該每一個人的單獨保存，使用會話跟蹤技術，把每一個人校驗的值存到cookie裏邊
views.py
from django.shortcuts import render, HttpResponse, redirect from django.http import JsonResponse from django.contrib import auth # Create your views here.
def login(request): if request.method == "POST": response = {"user":None, "msg":None} #先構建一個字典，"user":None默認沒有登陸成功，"msg"裏邊放錯誤信息 user = request.POST.get("user") pwd = request.POST.get("pwd") valid_code = request.POST.get("valid_code") valid_code_str = request.session.get("valid_code_str")         if valid_code.upper() == valid_code_str.upper(): #不區分大小寫 user = auth.authenticate(username=user, password=pwd) #用戶認證組件
            if user: #把這個user註冊進去，只要登陸成功了request.user就是當前登陸對象用戶，不然它就是個匿名對象。 auth.login(request,user) #request.user == 當初登陸對象 #登陸成功了 #登陸成功，在這裏不能跳轉，用的是ajax請求並非form請求，ajax請求只接收一個數據data
                response["user"] = user.username  #user返回值
            else:  response["msg"] = "username or password error!"
        else: #驗證碼校驗失敗，成功了就是null response["msg"] = "valid code error"
        return JsonResponse(response) #直接把字典放裏邊，它幫咱們序列化，並且在ajax那邊直接拿到對象也不用反序列化。 return render(request,"login.html") def index(request): return render(request,"index.html")

 login.htmlbootstrap

//登陸驗證 $(".login_btn").click(function(){ $.ajax({ url:"", type:"post", data:{ user:$("#user").val(), #用戶名的校驗 pwd:$("#pwd").val(), #密碼的校驗 valid_code:$("#valid_code").val(), #驗證碼的校驗 csrfmiddlewaretoken:$("[name = 'csrfmiddlewaretoken']").val(), #form請求的csrf校驗 }, #把這4個值傳了 success: function (data) { console.log(data); if(data.user){ //判斷有沒有值，出錯就把錯誤信息顯示到頁面上 location.href="/index/" //登陸成功就跳轉到index頁面 } else{ $(".error").text(data.msg).css({"color":"red", "margin-left":'10px'}) //拿到error這個標籤；能夠加css } } }) }) </script>

</body>
</html>

 

建立超級用戶cookie

C:\Users\Administrator\PycharmProjects\Django\cnblog>python manage.py createsuperuser Username: kris Email address: Password: Password (again): Superuser created successfully.

index.html（返回的一個頁面）session

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>{{  request.user.username}}</h3>
</body>
</html>

 6.總結：

 　　一次請求伴隨屢次請求；　　PIL；　　session存儲；　　驗證碼刷新；app

 附：

滑動驗證碼--->引入這樣一個插件

要先把social-auth-app-django下載下來

C:\Users\Administrator>pip install social-auth-app-django Collecting social-auth-app-django

把它嵌入到咱們的代碼裏邊

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程