js實作驗證碼的方法

驗證碼的生命週期

在web應用程式中，驗證碼常用於登入註冊。驗證碼本質就是一張圖片。
我們來看看驗證碼的生命週期：

1. 客戶端請求驗證碼

2. #服務端渲染驗證碼：

• 渲染一張包含隨機字串的圖片

• #隨機字串寫入session

• 讀取圖片並回傳回應

1. 客戶端提交：

• 顯示回應（即驗證碼圖片）

• 取得使用者輸入字串

• #提交使用者輸入

1. 服務端驗證：

• # 取出session中儲存的隨機字串與使用者提交的字串進行比較

• 字串資訊一致，進行下一步處理

• 字串資訊不一致，回傳錯誤訊息

下面我們在Django中實踐以上流程。

驗證碼實踐

• 新建一個名為ValidCode的Django項目，並建立應用app01，設定路由如下：

from django.conf.urls import urlfrom app01 import views

urlpatterns = [
    url(r'^test/$', views.test),
    url(r'^valid_code/$', views.valid_code),
]

• 定義test檢視函數，當客戶端存取http://127.0.0.1:8000/test/時，傳回test.html頁面；當客戶端提交提交資料時，取出session中保存的驗證碼與使用者提交的字串進行比較：

from django.shortcuts import render, HttpResponse, redirectdef test(request):    
if request.method == 'GET':        
return render(request, 'test.html')

    code1 = request.session['valid_code']
    code2 = request.POST.get('valid_code')    
    if code1 == code2:        
    return HttpResponse('OK')    
    else:        
    return redirect('/test/')

    <form action="" method="post">
        {% csrf_token %}        <p>
            <label for="valid_code">验证码：</label>
        </p>
        <p>
            <input type="text" id="valid_code" name="valid_code">
            <img src="/static/imghw/default1.png"  data-src="/valid_code/"  class="lazy"   alt="validPic"    style="max-width:90%"  style="max-width:90%"><a href="#" class="refresh">刷新</a>
        </p>
        <p>
            <button type="submit">验证</button>
        </p>
    </form>
    
    <script>
        var refresh = document.getElementsByClassName(&#39;refresh&#39;)[0];
        var validPic = document.getElementsByTagName(&#39;img&#39;)[0];
        refresh.onclick = function () {
            validPic.src += "?"; //利用img标签的特性，刷新验证码
        }
    </script>

說明：

1. test.html中<img src="/static/imghw/default1.png" data-src="/valid_code/" class="lazy" alt="js實作驗證碼的方法" >標籤的屬性： ，表示向http://127.0.0.1:8000/valid_code/發起get 請求，以取得圖片

2. ##點擊

   #刷新標籤，執行validPic.src += "?"，以重新取得圖片（刷新驗證碼）

• 定義valid_code視圖函數，將驗證碼寫入session中，並傳回驗證碼：

##

def valid_code(request):    
with open('bilibili.jpg', 'rb')as f:
        res = f.read()

    valid_code = 'bilibili'
    request.session["valid_code"] = valid_code    
    return HttpResponse(res)

說明：驗證碼本質就是一張圖片，這裡就先回傳一張圖片吧。 。 。

瀏覽器存取
• http://127.0.0.1:8000/test/

  ：

#說明：顯示以上頁面其實有兩次get請求：

對
1. /test/

   發起get請求，服務端回傳test.html頁面;

test.html頁面中
2. <img src="/static/imghw/default1.png" data-src="/valid_code/" class="lazy" alt="js實作驗證碼的方法" >

   標籤的屬性：，對 /valid_code/發起get請求，服務端傳回一張圖片

#提交驗證碼：輸入'bilibili'，顯示'OK'，否則重定向到目前頁面，略。
產生隨機驗證碼

這樣似乎就變成了，不過實際應用程式中的驗證碼都是隨機產生的。而上面的驗證碼不論怎麼刷新，也不會改變，服務端總是回傳一張靜態圖片。那麼有沒有辦法呢？有，用pillow畫圖模組，每次請求過來，服務端即時渲染一張包含隨機字串的圖片。下面我們改寫valid_code函數：

def valid_code(request):    
from PIL import Image, ImageDraw, ImageFont    
from io import BytesIO  # 内存管理，优化速度 
    import random

    img = Image.new(mode='RGB', size=(120, 30),
                    color=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))    # 创建图像对象（模式，大小，颜色）

    draw = ImageDraw.Draw(img, mode='RGB')  # 创建画笔（图像对象，模式）
    font = ImageFont.truetype("app01/static/fonts/kumo.ttf", 28)  # 读取字体（字体路径，字体大小）

    code_list = []    for i in range(5):
        char = random.choice([chr(random.randint(65, 90)), str(random.randint(1, 9))])
        code_list.append(char)
        draw.text([i * 24, 0], char, (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)),
                  font=font)        # 通过画笔的text方法，为图像绘制字符串（位置，文本，颜色，字体）
        # [i * 24, 0] 字体坐标，i*24设置水平偏移，让每个字符分开显示

    f = BytesIO()  # 拿到一个内存文件句柄f
    img.save(f, "png")  # 保存图像对象到f
    
    valid_code = ''.join(code_list)  
    request.session["valid_code"] = valid_code  # 验证码写入session
    
    return HttpResponse(f.getvalue())  # `getvalue()`方法拿到内存文件句柄的内容

說明：

使用前需要先安裝pillow模組：pip install pillow
繪製的映像可以儲存的磁碟上，但是速度慢，這裡使用記憶體管理
2. from io import BytesIO

   ，優化速度

3. f = BytesIO()

   拿到一個記憶體檔案句柄

4. #f.getvalue()

   拿到記憶體檔案句柄的內容

注意，Django的session資訊預設存在資料庫，使用session前應先執行資料庫遷移，以產生django_session表

############## #現在重新訪問###http://127.0.0.1:8000/test/###：####################驗證碼已經是即時生成的了，並且每次點擊刷新，顯示一張新的圖片。 ###

以上是js實作驗證碼的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！