flask实现验证码并验证功能
什么是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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。