扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
flask实现验证码并验证功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
什么是Flask？
Flask是一个用Python编写的Web应用程序框架，Flask是python的web框架，大的特征是轻便，让开发者自由灵活的兼容要开发的feature。 它由 Armin Ronacher 开发，他领导一个名为Pocco的国际Python爱好者团队。 Flask基于Werkzeug WSGI工具包和Jinja2模板引擎。两者都是Pocco项目。
效果图：
点击图片、刷新页面、输入错误点击登录时都刷新验证码
实现步骤：
第一步：先定义获取验证码的接口
verificationCode.py
#验证码
@api.route('/imgCode')
def imgCode():
return imageCode().getImgCode()此处的@api是在app下注册的蓝图，专门用来做后台接口，所以注册了api蓝图
第二步：实现接口逻辑
1）首先实现验证码肯定要随机生成，所以我们需要用到random库，本次需要随机生成字母和数字，
所以我们还需要用到string。string的ascii_letters是生成所有字母 digits是生成所有数字0-9。具体代码如下
def geneText(): '''生成4位验证码''' return ''.join(random.sample(string.ascii_letters + string.digits, 4)) #ascii_letters是生成所有字母 digits是生成所有数字0-9
2）为了美观，我们需要给每个随机字符设置不同的颜色。我们这里用一个随机数来给字符设置颜色
def rndColor(): '''随机颜色''' return (random.randint(32, 127), random.randint(32, 127), random.randint(32, 127))
3）此时我们已经可以生产图片验证码了，利用上面的随机数字和随机颜色生成一个验证码图片。
这里我们需要用到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, code4）此时，验证码图片已经生成。然后需要做的就是把图片发送到前端去展示。
def getImgCode(): image, code = getVerifyCode() # 图片以二进制形式写入 buf = BytesIO() image.save(buf, 'jpeg') buf_str = buf.getvalue() # 把buf_str作为response返回前端，并设置首部字段 response = make_response(buf_str) response.headers['Content-Type'] = 'image/gif' # 将验证码字符串储存在session中 session['imageCode'] = code return response
这里我们采用讲图片转换成二进制的形式，讲图片传送到前端，并且在这个返回值的头部，需要标明这是一个图片。
将验证码字符串储存在session中，是为了一会在登录的时候，进行验证码验证。
5）OK，此时我们的接口逻辑已经基本完成。然后我们还可以给图片增加以下干扰元素，比如增加一点横线。
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函数需要新增一步
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):
'''随机颜色'''
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是生成所有数字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()
# 图片以二进制形式写入
buf = BytesIO()
image.save(buf, 'jpeg')
buf_str = buf.getvalue()
# 把buf_str作为response返回前端，并设置首部字段
response = make_response(buf_str)
response.headers['Content-Type'] = 'image/gif'
# 将验证码字符串储存在session中
session['imageCode'] = code
return response第三步：前端展示。
这里前端我使用的是layui框架。其他框架类似。