flask實現驗證碼並驗證

 

效果圖：

點擊圖片、刷新頁面、輸入錯誤點擊登錄時都刷新驗證碼

 

 

 

 

實現步驟：

 

第一步：先定義獲取驗證碼的接口

verificationCode.py

#驗證碼
@api.route('/imgCode') 3 def imgCode(): 4     return imageCode().getImgCode()

此處的@api是在app下注冊的藍圖，專門用來做后台接口，所以注冊了api藍圖

 

 

 

第二步：實現接口邏輯

 

1）首先實現驗證碼肯定要隨機生成，所以我們需要用到random庫，本次需要隨機生成字母和數字，

所以我們還需要用到string。string的ascii_letters是生成所有字母 digits是生成所有數字0-9。具體代碼如下

def geneText(): 2     '''生成4位驗證碼'''
    return ''.join(random.sample(string.ascii_letters + string.digits, 4)) #ascii_letters是生成所有字母 digits是生成所有數字0-9

　　2）為了美觀，我們需要給每個隨機字符設置不同的顏色。我們這里用一個隨機數來給字符設置顏色

def rndColor(): 2     '''隨機顏色'''
    return (random.randint(32, 127), random.randint(32, 127), random.randint(32, 127))

　　3）此時我們已經可以生產圖片驗證碼了，利用上面的隨機數字和隨機顏色生成一個驗證碼圖片。

　　這里我們需要用到PIL庫，此時注意，python3安裝這個庫的時候不是pip install PIL 而是pip install pillow。

def getVerifyCode():  2     '''生成驗證碼圖形'''
    code = geneText()  4     # 圖片大小120×50
    width, height = 120, 50
    # 新圖片對象
    im = Image.new('RGB', (width, height), 'white')  8     # 字體
    font = ImageFont.truetype('app/static/arial.ttf', 40) 10     # draw對象
    draw = ImageDraw.Draw(im) 12     # 繪制字符串
    for item in range(4): 14         draw.text((5 + random.randint(-3, 3) + 23 * item, 5 + random.randint(-3, 3)), 15                   text=code[item], fill=rndColor(), font=font) 16     return im, code

　　4）此時，驗證碼圖片已經生成。然后需要做的就是把圖片發送到前端去展示。

def getImgCode():  2     image, code = getVerifyCode()  3     # 圖片以二進制形式寫入
    buf = BytesIO()  5     image.save(buf, 'jpeg')  6     buf_str = buf.getvalue()  7     # 把buf_str作為response返回前端，並設置首部字段
    response = make_response(buf_str)  9     response.headers['Content-Type'] = 'image/gif'
    # 將驗證碼字符串儲存在session中
    session['imageCode'] = code 12     return response

　　這里我們采用講圖片轉換成二進制的形式，講圖片傳送到前端，並且在這個返回值的頭部，需要標明這是一個圖片。

　　將驗證碼字符串儲存在session中，是為了一會在登錄的時候，進行驗證碼驗證。

　　5）OK，此時我們的接口邏輯已經基本完成。然后我們還可以給圖片增加以下干擾元素，比如增加一點橫線。

def drawLines(draw, num, width, height): 2     '''划線'''
    for num in range(num): 4         x1 = random.randint(0, width / 2) 5         y1 = random.randint(0, height / 2) 6         x2 = random.randint(0, width) 7         y2 = random.randint(height / 2, height) 8         draw.line(((x1, y1), (x2, y2)), fill='black', width=1)

　　然后getVerifyCode函數需要新增一步

def getVerifyCode():  2     '''生成驗證碼圖形'''
    code = geneText()  4     # 圖片大小120×50
    width, height = 120, 50
    # 新圖片對象
    im = Image.new('RGB', (width, height), 'white')  8     # 字體
    font = ImageFont.truetype('app/static/arial.ttf', 40) 10     # draw對象
    draw = ImageDraw.Draw(im) 12     # 繪制字符串
    for item in range(4): 14         draw.text((5 + random.randint(-3, 3) + 23 * item, 5 + random.randint(-3, 3)), 15                   text=code[item], fill=rndColor(), font=font) 16     # 划線
    drawLines(draw, 2, width, height) 18     return im, code

　　最終接口邏輯完成。整體接口代碼如下

from .. import *
from io import BytesIO  3 import random  4 import string  5 from PIL import Image, ImageFont, ImageDraw, ImageFilter  6 
#驗證碼
@api.route('/imgCode')  9 def imgCode(): 10     return imageCode().getImgCode() 11 

class imageCode(): 14     '''
 驗證碼處理 16     '''
    def rndColor(self): 18         '''隨機顏色'''
        return (random.randint(32, 127), random.randint(32, 127), random.randint(32, 127)) 20 
    def geneText(self): 22         '''生成4位驗證碼'''
        return ''.join(random.sample(string.ascii_letters + string.digits, 4)) #ascii_letters是生成所有字母 digits是生成所有數字0-9

    def drawLines(self, draw, num, width, height): 26         '''划線'''
        for num in range(num): 28             x1 = random.randint(0, width / 2) 29             y1 = random.randint(0, height / 2) 30             x2 = random.randint(0, width) 31             y2 = random.randint(height / 2, height) 32             draw.line(((x1, y1), (x2, y2)), fill='black', width=1) 33 
    def getVerifyCode(self): 35         '''生成驗證碼圖形'''
        code = self.geneText() 37         # 圖片大小120×50
        width, height = 120, 50
        # 新圖片對象
        im = Image.new('RGB', (width, height), 'white') 41         # 字體
        font = ImageFont.truetype('app/static/arial.ttf', 40) 43         # draw對象
        draw = ImageDraw.Draw(im) 45         # 繪制字符串
        for item in range(4): 47             draw.text((5 + random.randint(-3, 3) + 23 * item, 5 + random.randint(-3, 3)), 48                       text=code[item], fill=self.rndColor(), font=font) 49         # 划線
        self.drawLines(draw, 2, width, height) 51         return im, code 52 
    def getImgCode(self): 54         image, code = self.getVerifyCode() 55         # 圖片以二進制形式寫入
        buf = BytesIO() 57         image.save(buf, 'jpeg') 58         buf_str = buf.getvalue() 59         # 把buf_str作為response返回前端，並設置首部字段
        response = make_response(buf_str) 61         response.headers['Content-Type'] = 'image/gif'
        # 將驗證碼字符串儲存在session中
        session['imageCode'] = code 64         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：主要是針對驗證失敗以后，刷新圖片驗證碼

            // 進行登錄操作
            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;
            });

 

 

第四步：驗證碼驗證

驗證碼驗證需要在點擊登錄按鈕以后，在對驗證碼進行效驗

1）首先我們獲取到前端傳過來的驗證碼。.lower()是為了忽略大小寫

這里的具體寫法為什么這樣寫可以獲取到前端傳過來的參數，可以自行了解flask框架

if request.method == 'POST': 2     username = request.form.get('username') 3     password = request.form.get('password') 4     captcha = request.form.get('captcha').lower()

　　2）對驗證碼進行驗證.因為我們在生成驗證碼的時候，就已經把驗證碼保存到session中，這里直接取當時生成的驗證碼，然后跟前端傳過來的值對比即可。

if captcha==session['imageCode'].lower(): 2     pass
else： 4     return jsonify({'code':-1,'msg':'圖片驗證碼錯誤'})

 

到此，已完成了獲取驗證碼、顯示驗證碼、驗證驗證碼的所有流程。驗證驗證碼中沒有把整體代碼寫出來。可以根據自己情況自己寫。

 

注：轉載請注明出處。謝謝合作~