Python Flask實現(xiàn)圖片驗證碼與郵箱驗證碼流程詳細(xì)講解

更新時間：2022年10月08日 17:03:50 作者：LinTa0

這篇文章主要介紹了如何利用Python生成隨機(jī)的圖片驗證碼與郵箱驗證碼，驗證碼是一種區(qū)分用戶是計算機(jī)還是人的公共全自動程序，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起試試

1. 圖片驗證碼

1.1 工具類-utility.py

將所有和圖片驗證碼有關(guān)的方法放在類 ImageCode

import random
import string
from io import BytesIO
from PIL import Image, ImageFont, ImageDraw
class ImageCode:
    def rand_color(self):
        """生成用于繪制字符串的隨機(jī)顏色(可以隨意指定0-255之間的數(shù)字)"""
        red = random.randint(32, 200)
        green = random.randint(22, 255)
        blue = random.randint(0, 200)
        return red, green, blue
    def gen_text(self):
        """生成4位隨機(jī)字符串"""
        # sample 用于從一個大的列表或字符串中，隨機(jī)取得N個字符，來構(gòu)建出一個子列表
        list = random.sample(string.ascii_letters, 5)
        return ''.join(list)
    def draw_verify_code(self):
        """繪制驗證碼圖片"""
        code = self.gen_text()
        width, height = 120, 50  # 設(shè)定圖片大小，可根據(jù)實際需求調(diào)整
        im = Image.new('RGB', (width, height), 'white')  # 創(chuàng)建圖片對象，并設(shè)定背景色為白色
        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()

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

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

在類ImageCode 中，生成驗證碼方法 draw_verify_code() 的上面加上繪制干擾線的方法，然后在繪制時進(jìn)行調(diào)用

繪制干擾線方法

def draw_lines(self, draw, num, width, height):
    """
    繪制干擾線
    :param draw: 圖片對象
    :param num: 干擾線數(shù)量
    :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() 前調(diào)用上述繪制干擾線的方法

方法如下：

def draw_verify_code(self):
    """繪制驗證碼圖片"""
    code = self.gen_text()
    width, height = 120, 50  # 設(shè)定圖片大小，可根據(jù)實際需求調(diào)整
    im = Image.new('RGB', (width, height), 'white')  # 創(chuàng)建圖片對象，并設(shè)定背景色為白色
    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()

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

上述的圖片是存儲在內(nèi)存里的，關(guān)閉圖片后，程序會自動終止

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

def draw_verify_code(self):
    """繪制驗證碼圖片"""
    code = self.gen_text()
    width, height = 120, 50  # 設(shè)定圖片大小，可根據(jù)實際需求調(diào)整
    im = Image.new('RGB', (width, height), 'white')  # 創(chuàng)建圖片對象，并設(shè)定背景色為白色
    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()  # 如需臨時調(diào)試，可以直接將生成的圖片顯示出來
    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

將上述控制器注冊進(jìn)程序的主入口 main.py

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

到這里，圖片驗證碼的后端已全部實現(xiàn)

至于前端的話，大家在自己想要放置圖片驗證碼的地方，加個 img 標(biāo)簽即可，然后 src 屬性里的值為上述控制器的接口，如下：

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

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

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

至于為什么后面要加一個隨機(jī)數(shù)，是因為如果不加的話，前端瀏覽器識別到是一樣的請求時，就不會重新發(fā)送，除非你強(qiáng)制刷新頁面。但是加個隨機(jī)數(shù)的話，瀏覽器發(fā)現(xiàn)每個請求都是不一樣的，就會正常的發(fā)送到后端

2. 郵箱驗證碼

2.1 準(zhǔn)備

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

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

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):
    """發(fā)送郵件"""
    sender = 'XXX <xxxxxxxxx@qq.com>'  # 郵箱賬號和發(fā)件者簽名
    # 定義發(fā)送郵件的內(nèi)容，支持HTML和CSS樣式
    content = f"您的郵箱驗證碼為：<span style='color: red; font-size: 20px;'>{ecode}</span>" 
    message = MIMEText(content, 'html', 'utf-8')  # 實例化郵件對象，并指定郵件的關(guān)鍵信息
    # 指定郵件的標(biāo)題，同樣使用utf-8編碼
    message['Subject'] = Header('驗證碼', 'utf-8')
    message['From'] = sender
    message['To'] = receiver
    smtpObj = SMTP_SSL('smtp.qq.com')  # QQ郵件服務(wù)器的鏈接
    smtpObj.login(user='xxxxxxxxx@qq.com', password='授權(quán)碼')  # 通過自己的郵箱賬號和獲取到的授權(quán)碼登錄QQ郵箱
    # 指定發(fā)件人、收件人和郵件內(nèi)容
    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')
	# 對郵箱進(jìn)行格式校驗
    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'

到這里，郵箱驗證碼的后端已全部實現(xiàn)

到此這篇關(guān)于Python Flask實現(xiàn)圖片驗證碼與郵箱驗證碼流程詳細(xì)講解的文章就介紹到這了,更多相關(guān)Python驗證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: