驗證碼的生命周期

在web應用中，驗證碼常用于登錄注冊。驗證碼本質就是一張圖片。

我們來看一下驗證碼的生命周期：客戶端請求驗證碼

服務端渲染驗證碼：渲染一張包含隨機字符串的圖片

隨機字符串寫入session

讀取圖片并返回響應客戶端提交：顯示響應(即驗證碼圖片)

獲取用戶輸入字符串

提交用戶輸入服務端驗證：取出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/')

{% csrf_token %}

驗證碼：

刷新

驗證

var refresh = document.getElementsByClassName('refresh')[0];

var validPic = document.getElementsByTagName('img')[0];

refresh.onclick = function () {

validPic.src += "?"; //利用img標簽的特性，刷新驗證碼

}

說明：test.html中標簽的屬性：src="/valid_code/"，表示向http://127.0.0.1:8000/valid_code/發起get 請求，以獲取圖片

點擊刷新標簽，執行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請求：對/test/發起get請求，服務端返回test.html頁面；

test.html頁面中標簽的屬性：src="/valid_code/"，對/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

繪制的圖像可以保存的磁盤上，但是速度慢，這里使用內存管理from io import BytesIO，優化速度

f = BytesIO() 拿到一個內存文件句柄

f.getvalue()拿到內存文件句柄的內容

注意，Django的session信息默認存在數據庫，使用session前應先執行數據庫遷移，以生成django_session表現在重新訪問http://127.0.0.1:8000/test/：

驗證碼已經是實時生成的了，并且每次點擊刷新，顯示一張新的圖片。

總結

以上是生活随笔為你收集整理的php js 验证码,js实现验证码的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。