WEB開發-動態驗證碼

標籤：

1.基於Python程式設計語言實現，其他語言大同小異

 

2.登入介面login.html

1 <form action=‘/login/‘>2     <input type=‘text‘ name=‘username‘ />3     <input type=‘password‘ name=‘password‘ />4     <input type=‘text‘ name=‘yanzhengma‘ />5     <img src="/get_yanzhengma/" onclick="ChangeYanzhengma();"></img>6     <input type=‘submit‘ name=‘登入‘ />7 </form>

裡面涉及到2個後端視圖函數login和get_yanzhengma

 

3.後端視圖函數

 1 #-*- coding=utf-8 -*- 2 from PIL import Image,ImageDraw,ImageFont 3  4 def login(request): 5     return render_to_response(‘login.html‘) 6      7      8 def yanzhengma(request): 9     #text為產生的4位隨機字串10     text = rndChar()11     #圖片處理常式，將文本做成圖片12     im = Image.new("RGB", (130, 35), (255, 255, 255))13     dr = ImageDraw.Draw(im)14     font = ImageFont.truetype("arial.tff", 24)15     # arial.tff 這個從windows fonts copy一個過來16     dr.text((10, 5), text, font=font, fill="#000000")17     # im.show()18     #建立一個io對象19     stream = io.BytesIO()20     #將圖片對象im儲存到stream對象裡21     im.save(stream, "png")22     #stream.getvalue()圖片二級制內容，再通過HttpResponse封裝，返回給前端頁面23     return HttpResponse(stream.getvalue())

4.備忘：

（1）img標籤的src屬性，去這個/get_yanzhengma/去取圖片

（2）get_yanzhengma函數執行

（3）通過random模組產生隨機碼，4個字母

（4）通過PIL模組將隨機數字轉換為圖片對象im

（5）建立一個BytesIO對象，記憶體對象，可以儲存二進位的東西

（6）將圖片對象儲存到BytesIO對象中，此處在記憶體裡

#話說為什麼要將圖片對象儲存到BytesIO對象中而不是直接寫到硬碟裡存為圖片檔案呢？因為這樣就保證了在同一個時刻，不同使用者訪問到的驗證碼是不一樣的，而且都是儲存在記憶體中的。

#如果寫成驗證碼圖片檔案到硬碟裡，有可能B頁面顯示的驗證碼是ABCD，但是B使用者還沒提交，A使用者這會訪問，重新整理了驗證碼，把驗證碼變更為DCBA了，B頁面裡看到的還是ABCD，導致一直輸不對驗證碼；無法保證2個使用者的驗證碼圖片衝突問題

#後端驗證碼的隨機值是儲存在session中的，每次使用者GET請求，伺服器上產生隨機驗證碼儲存在session中，並給頁面返回，如果使用者提交的驗證碼和後端session中記錄的一致通過，如果不一致，重新重新整理驗證碼，使用者重新進行提交

#使用者點擊驗證碼圖片重新整理功能，暫未實現；使用者點擊驗證碼圖片，ajax流程-後端伺服器去重建驗證碼，session變更，重新傳遞給前端，驗證碼圖片變更

（7）BytesIO對象的getvalue()方法返回二進位內容

（8）django提供的HttpResponse封裝二進位內容為識別的東西傳遞給前端

（7）前端img標籤正常顯示圖片

WEB開發-動態驗證碼