1. 图片验证码
1.1 工具类-utility.py
将所有和图片验证码有关的方法放在类 ImageCode
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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() |
此时可以在上面的类中加上下面的代码，单独运行一下，看图片验证码是否会生成
|
1 |
ImageCode().draw_verify_code() |
如果正常运行的话，会默认打开自己电脑的图片查看器，然后显示一张图片验证码
还可以在图片验证码中加上干扰线
在 类ImageCode 中，生成验证码方法 draw_verify_code() 的上面加上绘制干扰线的方法，然后在绘制时进行调用
绘制干扰线方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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() 前调用上述绘制干扰线的方法
方法如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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() |
然后再次运行，效果如下：
上述的图片是存储在内存里的，关闭图片后，程序会自动终止
因为最终图片是要返回到前端的，所以上述生成验证码的方法还需再次进行修改，如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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
将图片返回给前端
|
1 2 3 4 5 6 7 8 9 10 11 |
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
|
1 2 3 4 |
if __name__ == '__main__': from controller.user import * app.register_blueprint(user) app.run(debug=True) # 使项目已debug方式运行 |
到这里，图片验证码的后端已全部实现
至于前端的话，大家在自己想要放置图片验证码的地方，加个 img 标签即可，然后 src 属性里的值为上述控制器的接口，如下：
|
1 |
<img src="/vcode" style="cursor:pointer;"/> |
要想和网上那些点击图片验证码之后，重新生成新的图片验证码的话，就加上一个 onclick 事件
|
1 |
<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，就单独放在外面就可以了，也可以新增一个邮箱类，然后放在里面
本人就直接放在外面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
from smtplib import SMTP_SSL from email.mime.text import MIMEText from email.header import Header def send_email(self, receiver, ecode): """发送邮件""" sender = 'XXX <xxxxxxxxx@qq.com>' # 邮箱账号和发件者签名 # 定义发送邮件的内容，支持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='xxxxxxxxx@qq.com', 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@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' |
到这里，邮箱验证码的后端已全部实现
