Python Flask實現圖片驗證碼與郵箱驗證碼流程詳細講解

Posted on by

1. 圖片驗證碼

1.1 工具類-utility.py

將所有和圖片驗證碼有關的方法放在類 ImageCode

import random
import string
from io import BytesIO
from PIL import Image, ImageFont, ImageDraw
class ImageCode:
    def rand_color(self):
        """生成用於繪制字符串的隨機顏色(可以隨意指定0-255之間的數字)"""
        red = random.randint(32, 200)
        green = random.randint(22, 255)
        blue = random.randint(0, 200)
        return red, green, blue
    def gen_text(self):
        """生成4位隨機字符串"""
        # sample 用於從一個大的列表或字符串中，隨機取得N個字符，來構建出一個子列表
        list = random.sample(string.ascii_letters, 5)
        return ''.join(list)
    def draw_verify_code(self):
        """繪制驗證碼圖片"""
        code = self.gen_text()
        width, height = 120, 50  # 設定圖片大小，可根據實際需求調整
        im = Image.new('RGB', (width, height), 'white')  # 創建圖片對象，並設定背景色為白色
        font = ImageFont.truetype(font='arial.ttf', size=40)  # 選擇使用何種字體及字體大小
        draw = ImageDraw.Draw(im)  # 新建ImageDraw對象
        # 繪制字符串
        for i in range(4):
            draw.text((5 + random.randint(-3, 3) + 23 * i, 5 + random.randint(-3, 3)),
                      text=code[i], fill=self.rand_color(), font=font)
        im.show()

此時可以在上面的類中加上下面的代碼，單獨運行一下，看圖片驗證碼是否會生成

ImageCode().draw_verify_code()

如果正常運行的話，會默認打開自己電腦的圖片查看器，然後顯示一張圖片驗證碼

還可以在圖片驗證碼中加上幹擾線

在 類ImageCode 中，生成驗證碼方法 draw_verify_code() 的上面加上繪制幹擾線的方法，然後在繪制時進行調用

繪制幹擾線方法

def draw_lines(self, draw, num, width, height):
    """
    繪制幹擾線
    :param draw: 圖片對象
    :param num: 幹擾線數量
    :param width: 圖片的寬
    :param height: 圖片的高
    :return:
    """
    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=2)

繪制圖片驗證碼時，在 im.show() 前調用上述繪制幹擾線的方法

方法如下：

def draw_verify_code(self):
    """繪制驗證碼圖片"""
    code = self.gen_text()
    width, height = 120, 50  # 設定圖片大小，可根據實際需求調整
    im = Image.new('RGB', (width, height), 'white')  # 創建圖片對象，並設定背景色為白色
    font = ImageFont.truetype(font='arial.ttf', size=40)  # 選擇使用何種字體及字體大小
    draw = ImageDraw.Draw(im)  # 新建ImageDraw對象
    # 繪制字符串
    for i in range(4):
        draw.text((5 + random.randint(-3, 3) + 23 * i, 5 + random.randint(-3, 3)),text=code[i], fill=self.rand_color(), font=font)
    self.draw_lines(draw, 4, width, height)  # 繪制幹擾線
    im.show()

然後再次運行，效果如下：

上述的圖片是存儲在內存裡的，關閉圖片後，程序會自動終止

因為最終圖片是要返回到前端的，所以上述生成驗證碼的方法還需再次進行修改，如下：

def draw_verify_code(self):
    """繪制驗證碼圖片"""
    code = self.gen_text()
    width, height = 120, 50  # 設定圖片大小，可根據實際需求調整
    im = Image.new('RGB', (width, height), 'white')  # 創建圖片對象，並設定背景色為白色
    font = ImageFont.truetype(font='arial.ttf', size=40)  # 選擇使用何種字體及字體大小
    draw = ImageDraw.Draw(im)  # 新建ImageDraw對象
    # 繪制字符串
    for i in range(4):
        draw.text((5 + random.randint(-3, 3) + 23 * i, 5 +random.randint(-3, 3)), text=code[i], fill=self.rand_color(), font=font)
        self.draw_lines(draw, 4, width, height)  # 繪制幹擾線
    # im.show()  # 如需臨時調試，可以直接將生成的圖片顯示出來
    return im, code

1.2 控制層-user.py

將圖片返回給前端

from flask import Blueprint, make_response, session
from common.utility import ImageCode
from module.users import Users
user = Blueprint('user', __name__)
@user.route('/vcode')
def vcode():
    code, bstring = ImageCode().get_code()
    response = make_response(bstring)
    response.headers['Content-Type'] = 'image/jpeg'
    session['vcode'] = code.lower()
    return response

將上述控制器註冊進程序的主入口 main.py

if __name__ == '__main__':
    from controller.user import *
    app.register_blueprint(user)
    app.run(debug=True)  # 使項目已debug方式運行

到這裡，圖片驗證碼的後端已全部實現

至於前端的話，大傢在自己想要放置圖片驗證碼的地方，加個 img 標簽即可，然後 src 屬性裡的值為上述控制器的接口，如下：

<img src="/vcode" style="cursor:pointer;"/>

要想和網上那些點擊圖片驗證碼之後，重新生成新的圖片驗證碼的話，就加上一個 onclick 事件

<img src="/vcode" id="loginvcode" class="col-3" style="cursor:pointer;" onclick="this.src='/vcode?'+Math.random()"/>

至於為什麼後面要加一個隨機數，是因為如果不加的話，前端瀏覽器識別到是一樣的請求時，就不會重新發送，除非你強制刷新頁面。但是加個隨機數的話，瀏覽器發現每個請求都是不一樣的，就會正常的發送到後端

2. 郵箱驗證碼

2.1 準備

此次舉例使用的是QQ郵箱，使用其他郵箱也可以，操作大致一樣

登錄自己的QQ郵箱，開通 POP3/SMTP 服務，然後在各自的界面下找到“生成授權碼”的按鈕，按照各自的流程生成授權碼

2.2 工具類-utility.py

在上述的工具類中新增方法

註意，最好不要將方法放在 類ImageCode，就單獨放在外面就可以瞭，也可以新增一個郵箱類，然後放在裡面

本人就直接放在外面

from smtplib import SMTP_SSL
from email.mime.text import MIMEText
from email.header import Header
def send_email(self, receiver, ecode):
    """發送郵件"""
    sender = 'XXX <[email protected]>'  # 郵箱賬號和發件者簽名
    # 定義發送郵件的內容，支持HTML和CSS樣式
    content = f"您的郵箱驗證碼為：<span style='color: red; font-size: 20px;'>{ecode}</span>" 
    message = MIMEText(content, 'html', 'utf-8')  # 實例化郵件對象，並指定郵件的關鍵信息
    # 指定郵件的標題，同樣使用utf-8編碼
    message['Subject'] = Header('驗證碼', 'utf-8')
    message['From'] = sender
    message['To'] = receiver
    smtpObj = SMTP_SSL('smtp.qq.com')  # QQ郵件服務器的鏈接
    smtpObj.login(user='[email protected]', password='授權碼')  # 通過自己的郵箱賬號和獲取到的授權碼登錄QQ郵箱
    # 指定發件人、收件人和郵件內容
    smtpObj.sendmail(sender, receiver, str(message))
    smtpObj.quit()
def gen_email_code(self):
    str = random.sample(string.ascii_letters + string.digits, 6)
    return ''.join(str)

2.3 控制層-user.py

@user.route('/ecode', methods=['POST'])
def ecode():
    email = request.form.get('email')
	# 對郵箱進行格式校驗
    if not re.match('^.+\\@(\\[?)[a-zA-Z0-9\\-\\.]+\\.([a-zA-Z]{2,3}|[0-9]{1,3})(\\]?)$', email):
        return 'email-invalid'
    code = gen_email_code()
    try:
        send_email(email, code)
        session['ecode'] = code  # 將郵箱驗證碼保存在session中
        return 'send-pass'
    except:
        return 'send-fail'

到這裡，郵箱驗證碼的後端已全部實現

到此這篇關於Python Flask實現圖片驗證碼與郵箱驗證碼流程詳細講解的文章就介紹到這瞭,更多相關Python驗證碼內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：