flask实现验证码并验证功能

2023-08-04 23:25:04 329

什么是Flask？

Flask是一个用Python编写的Web应用程序框架，Flask是python的web框架，最大的特征是轻便，让开发者自由灵活的兼容要开发的feature。它由 ArminRonacher 开发，他领导一个名为Pocco的国际Python爱好者团队。 Flask基于WerkzeugWSGI工具包和Jinja2模板引擎。两者都是Pocco项目。

效果图：

点击图片、刷新页面、输入错误点击登录时都刷新验证码

实现步骤：

第一步：先定义获取验证码的接口

verificationCode.py

#验证码
@api.route('/imgCode')
defimgCode():
returnimageCode().getImgCode()

此处的@api是在app下注册的蓝图，专门用来做后台接口，所以注册了api蓝图

第二步：实现接口逻辑

1）首先实现验证码肯定要随机生成，所以我们需要用到random库，本次需要随机生成字母和数字，

所以我们还需要用到string。string的ascii_letters是生成所有字母digits是生成所有数字0-9。具体代码如下

defgeneText():
'''生成4位验证码'''
return''.join(random.sample(string.ascii_letters+string.digits,4))#ascii_letters是生成所有字母digits是生成所有数字0-9

2）为了美观，我们需要给每个随机字符设置不同的颜色。我们这里用一个随机数来给字符设置颜色

defrndColor():
'''随机颜色'''
return(random.randint(32,127),random.randint(32,127),random.randint(32,127))

3）此时我们已经可以生产图片验证码了，利用上面的随机数字和随机颜色生成一个验证码图片。

这里我们需要用到PIL库，此时注意，python3安装这个库的时候不是pipinstallPIL而是pipinstallpillow。

defgetVerifyCode():
'''生成验证码图形'''
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)
#绘制字符串
foriteminrange(4):
draw.text((5+random.randint(-3,3)+23*item,5+random.randint(-3,3)),
text=code[item],fill=rndColor(),font=font)
returnim,code

4）此时，验证码图片已经生成。然后需要做的就是把图片发送到前端去展示。

defgetImgCode():
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
returnresponse

这里我们采用讲图片转换成二进制的形式，讲图片传送到前端，并且在这个返回值的头部，需要标明这是一个图片。

将验证码字符串储存在session中，是为了一会在登录的时候，进行验证码验证。

5）OK，此时我们的接口逻辑已经基本完成。然后我们还可以给图片增加以下干扰元素，比如增加一点横线。

defdrawLines(draw,num,width,height):
'''划线'''
fornuminrange(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函数需要新增一步

defgetVerifyCode():
'''生成验证码图形'''
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)
#绘制字符串
foriteminrange(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)
returnim,code

最终接口逻辑完成。整体接口代码如下

from..import*
fromioimportBytesIO
importrandom
importstring
fromPILimportImage,ImageFont,ImageDraw,ImageFilter
#验证码
@api.route('/imgCode')
defimgCode():
returnimageCode().getImgCode()
classimageCode():
'''
验证码处理
'''
defrndColor(self):
'''随机颜色'''
return(random.randint(32,127),random.randint(32,127),random.randint(32,127))
defgeneText(self):
'''生成4位验证码'''
return''.join(random.sample(string.ascii_letters+string.digits,4))#ascii_letters是生成所有字母digits是生成所有数字0-9
defdrawLines(self,draw,num,width,height):
'''划线'''
fornuminrange(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)
defgetVerifyCode(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)
#绘制字符串
foriteminrange(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)
returnim,code
defgetImgCode(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
returnresponse

第三步：前端展示。

这里前端我使用的是layui框架。其他框架类似。

js：主要是针对验证失败以后，刷新图片验证码

//进行登录操作
form.on('submit(login)',function(data){
console.log(data.elem);
varform_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{
//登录失败则刷新图片验证码
vartagImg=document.getElementById('verify_code');
tagImg.src='http://dh.wk163.com/api/imgCode?'+Math.random();
console.log(data['msg']);
layer.msg(data['msg']);
}
}
});
returnfalse;
});

第四步：验证码验证

验证码验证需要在点击登录按钮以后，在对验证码进行效验

1）首先我们获取到前端传过来的验证码。.lower()是为了忽略大小写

这里的具体写法为什么这样写可以获取到前端传过来的参数，可以自行了解flask框架

ifrequest.method=='POST':
username=request.form.get('username')
password=request.form.get('password')
captcha=request.form.get('captcha').lower()

2）对验证码进行验证.因为我们在生成验证码的时候，就已经把验证码保存到session中，这里直接取当时生成的验证码，然后跟前端传过来的值对比即可。

ifcaptcha==session['imageCode'].lower():
pass
else：
returnjsonify({'code':-1,'msg':'图片验证码错误'})

到此，已完成了获取验证码、显示验证码、验证验证码的所有流程。验证验证码中没有把整体代码写出来。可以根据自己情况自己写。

总结

以上所述是小编给大家介绍的flask实现验证码并验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

flask实现验证码并验证功能

热门推荐

随机推荐