flask實現(xiàn)驗證碼并驗證功能
什么是Flask？
Flask是一個用Python編寫的Web應(yīng)用程序框架，F(xiàn)lask是python的web框架，最大的特征是輕便，讓開發(fā)者自由靈活的兼容要開發(fā)的feature。 它由 Armin Ronacher 開發(fā)，他領(lǐng)導(dǎo)一個名為Pocco的國際Python愛好者團(tuán)隊。 Flask基于Werkzeug WSGI工具包和Jinja2模板引擎。兩者都是Pocco項目。
效果圖：
點擊圖片、刷新頁面、輸入錯誤點擊登錄時都刷新驗證碼
實現(xiàn)步驟：
第一步：先定義獲取驗證碼的接口
verificationCode.py
#驗證碼
@api.route('/imgCode')
def imgCode():
return imageCode().getImgCode()
此處的@api是在app下注冊的藍(lán)圖，專門用來做后臺接口，所以注冊了api藍(lán)圖
第二步：實現(xiàn)接口邏輯
1）首先實現(xiàn)驗證碼肯定要隨機(jī)生成，所以我們需要用到random庫，本次需要隨機(jī)生成字母和數(shù)字，
所以我們還需要用到string。string的ascii_letters是生成所有字母 digits是生成所有數(shù)字0-9。具體代碼如下
def geneText(): '''生成4位驗證碼''' return ''.join(random.sample(string.ascii_letters + string.digits, 4)) #ascii_letters是生成所有字母 digits是生成所有數(shù)字0-9
2）為了美觀，我們需要給每個隨機(jī)字符設(shè)置不同的顏色。我們這里用一個隨機(jī)數(shù)來給字符設(shè)置顏色
def rndColor(): '''隨機(jī)顏色''' return (random.randint(32, 127), random.randint(32, 127), random.randint(32, 127))
3）此時我們已經(jīng)可以生產(chǎn)圖片驗證碼了，利用上面的隨機(jī)數(shù)字和隨機(jī)顏色生成一個驗證碼圖片。
這里我們需要用到PIL庫，此時注意，python3安裝這個庫的時候不是pip install PIL 而是pip install pillow。
def getVerifyCode():
'''生成驗證碼圖形'''
code = geneText()
# 圖片大小120×50
width, height = 120, 50
# 新圖片對象
im = Image.new('RGB', (width, height), 'white')
# 字體
font = ImageFont.truetype('app/static/arial.ttf', 40)
# draw對象
draw = ImageDraw.Draw(im)
# 繪制字符串
for item in range(4):
draw.text((5 + random.randint(-3, 3) + 23 * item, 5 + random.randint(-3, 3)),
text=code[item], fill=rndColor(), font=font)
return im, code
4）此時，驗證碼圖片已經(jīng)生成。然后需要做的就是把圖片發(fā)送到前端去展示。
def getImgCode(): image, code = getVerifyCode() # 圖片以二進(jìn)制形式寫入 buf = BytesIO() image.save(buf, 'jpeg') buf_str = buf.getvalue() # 把buf_str作為response返回前端，并設(shè)置首部字段 response = make_response(buf_str) response.headers['Content-Type'] = 'image/gif' # 將驗證碼字符串儲存在session中 session['imageCode'] = code return response
這里我們采用講圖片轉(zhuǎn)換成二進(jìn)制的形式，講圖片傳送到前端，并且在這個返回值的頭部，需要標(biāo)明這是一個圖片。
將驗證碼字符串儲存在session中，是為了一會在登錄的時候，進(jìn)行驗證碼驗證。
5）OK，此時我們的接口邏輯已經(jīng)基本完成。然后我們還可以給圖片增加以下干擾元素，比如增加一點橫線。
def drawLines(draw, num, width, height):
'''劃線'''
for num in range(num):
x1 = random.randint(0, width / 2)
y1 = random.randint(0, height / 2)
x2 = random.randint(0, width)
y2 = random.randint(height / 2, height)
draw.line(((x1, y1), (x2, y2)), fill='black', width=1)
然后getVerifyCode函數(shù)需要新增一步
def getVerifyCode():
'''生成驗證碼圖形'''
code = geneText()
# 圖片大小120×50
width, height = 120, 50
# 新圖片對象
im = Image.new('RGB', (width, height), 'white')
# 字體
font = ImageFont.truetype('app/static/arial.ttf', 40)
# draw對象
draw = ImageDraw.Draw(im)
# 繪制字符串
for item in range(4):
draw.text((5 + random.randint(-3, 3) + 23 * item, 5 + random.randint(-3, 3)),
text=code[item], fill=rndColor(), font=font)
# 劃線
drawLines(draw, 2, width, height)
return im, code
最終接口邏輯完成。整體接口代碼如下
from .. import *
from io import BytesIO
import random
import string
from PIL import Image, ImageFont, ImageDraw, ImageFilter
#驗證碼
@api.route('/imgCode')
def imgCode():
return imageCode().getImgCode()
class imageCode():
'''
驗證碼處理
'''
def rndColor(self):
'''隨機(jī)顏色'''
return (random.randint(32, 127), random.randint(32, 127), random.randint(32, 127))
def geneText(self):
'''生成4位驗證碼'''
return ''.join(random.sample(string.ascii_letters + string.digits, 4)) #ascii_letters是生成所有字母 digits是生成所有數(shù)字0-9
def drawLines(self, draw, num, width, height):
'''劃線'''
for num in range(num):
x1 = random.randint(0, width / 2)
y1 = random.randint(0, height / 2)
x2 = random.randint(0, width)
y2 = random.randint(height / 2, height)
draw.line(((x1, y1), (x2, y2)), fill='black', width=1)
def getVerifyCode(self):
'''生成驗證碼圖形'''
code = self.geneText()
# 圖片大小120×50
width, height = 120, 50
# 新圖片對象
im = Image.new('RGB', (width, height), 'white')
# 字體
font = ImageFont.truetype('app/static/arial.ttf', 40)
# draw對象
draw = ImageDraw.Draw(im)
# 繪制字符串
for item in range(4):
draw.text((5 + random.randint(-3, 3) + 23 * item, 5 + random.randint(-3, 3)),
text=code[item], fill=self.rndColor(), font=font)
# 劃線
self.drawLines(draw, 2, width, height)
return im, code
def getImgCode(self):
image, code = self.getVerifyCode()
# 圖片以二進(jìn)制形式寫入
buf = BytesIO()
image.save(buf, 'jpeg')
buf_str = buf.getvalue()
# 把buf_str作為response返回前端，并設(shè)置首部字段
response = make_response(buf_str)
response.headers['Content-Type'] = 'image/gif'
# 將驗證碼字符串儲存在session中
session['imageCode'] = code
return response
第三步：前端展示。
這里前端我使用的是layui框架。其他框架類似。
<div class="layui-form-item">
<label class="layui-icon layui-icon-vercode" for="captcha"></label>
<input type="text" name="captcha" lay-verify="required|captcha" placeholder="圖形驗證碼" autocomplete="off"
class="layui-input verification captcha" value="">
<div class="captcha-img">
<img id="verify_code" class="verify_code" src="/api/imgCode" onclick="this.src='/api/imgCode?'+ Math.random()">
</div>
</div>
js：主要是針對驗證失敗以后，刷新圖片驗證碼
// 進(jìn)行登錄操作
form.on('submit(login)', function (data) {
console.log(data.elem);
var form_data = data.field;
//加密成md5
form_data.password=$.md5(form_data.password);
$.ajax({
url: "{{ url_for('api.api_login') }}",
data: form_data,
dataType: 'json',
type: 'post',
success: function (data) {
if (data['code'] == 0) {
location.href = "{{ url_for('home.homes') }}";
} else {
//登錄失敗則刷新圖片驗證碼
var tagImg = document.getElementById('verify_code');
tagImg.src='/api/imgCode?'+ Math.random();
console.log(data['msg']);
layer.msg(data['msg']);
}
}
});
return false;
});
第四步：驗證碼驗證
驗證碼驗證需要在點擊登錄按鈕以后，在對驗證碼進(jìn)行效驗
1）首先我們獲取到前端傳過來的驗證碼。.lower()是為了忽略大小寫
這里的具體寫法為什么這樣寫可以獲取到前端傳過來的參數(shù)，可以自行了解flask框架
if request.method == 'POST':
username = request.form.get('username')
password = request.form.get('password')
captcha = request.form.get('captcha').lower()
2）對驗證碼進(jìn)行驗證.因為我們在生成驗證碼的時候，就已經(jīng)把驗證碼保存到session中，這里直接取當(dāng)時生成的驗證碼，然后跟前端傳過來的值對比即可。
if captcha==session['imageCode'].lower():
pass
else：
return jsonify({'code':-1,'msg':'圖片驗證碼錯誤'})
到此，已完成了獲取驗證碼、顯示驗證碼、驗證驗證碼的所有流程。驗證驗證碼中沒有把整體代碼寫出來。可以根據(jù)自己情況自己寫。
總結(jié)
以上所述是小編給大家介紹的flask實現(xiàn)驗證碼并驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
使用Python實現(xiàn)圖片和base64轉(zhuǎn)換工具
這篇文章主要為大家詳細(xì)介紹了如何使用Python中的base64模塊編寫一個工具,可以實現(xiàn)圖片和Base64編碼之間的轉(zhuǎn)換,感興趣的小伙伴可以了解下2025-02-02
Python代碼來實現(xiàn)一個最簡單的CPU。用代碼模擬大的部件,使大家從原理上理解CPU工作。使它可編程，支持加減法運(yùn)算、讀寫內(nèi)存、無條件跳轉(zhuǎn)、條件跳轉(zhuǎn)的功能。2023-01-01
最近想做一個電影資訊的App，由于豆瓣不對外開發(fā)API了，正愁怎么錄入數(shù)據(jù)呢。最近在學(xué) Python 想想那就用它來抓取電影信息吧2016-04-04
python肯德爾系數(shù)相關(guān)性數(shù)據(jù)分析示例
這篇文章主要為大家介紹了python肯德爾系數(shù)相關(guān)性數(shù)據(jù)分析示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Python運(yùn)行時修改業(yè)務(wù)SQL代碼
這篇文章主要介紹了Python運(yùn)行時修改業(yè)務(wù)SQL代碼，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
Django框架靜態(tài)文件使用/中間件/禁用ip功能實例詳解
這篇文章主要介紹了Django框架靜態(tài)文件使用/中間件/禁用ip功能,結(jié)合實例形式詳細(xì)分析了Django框架靜態(tài)文件的使用、中間件的原理、操作方法以及禁用ip功能相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Python中的MongoDB基本操作：連接、查詢實例,本文直接給出操作示例代碼,需要的朋友可以參考下2015-02-02
pandas中read_csv、rolling、expanding用法詳解
這篇文章主要介紹了pandas中read_csv、rolling、expanding用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-04-04
Python HTTP下載文件并顯示下載進(jìn)度條功能的實現(xiàn)
這篇文章主要介紹了Python HTTP下載文件并顯示下載進(jìn)度條功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了python 制作本地應(yīng)用搜索工具的方法，幫助大家更好的理解和學(xué)習(xí)使用python，感興趣的朋友可以了解下2021-02-02