flask实现验证码并验证

效果图：

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

实现步骤：

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

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, code

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

 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框架。其他框架类似。

 <div class="layui-form-item">

     <label class="layui-icon layui-icon-vercode" for="captcha"></label>

     <input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off"

            class="layui-input verification captcha" value="">

     <div class="captcha-img">

         <img id="verify_code" class="verify_code" src="/api/imgCode" onclick="this.src='/api/imgCode?'+ Math.random()">

     </div>

 </div>

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

             // 进行登录操作

             form.on('submit(login)', function (data) {

                 console.log(data.elem);

                 var form_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 {

                             //登录失败则刷新图片验证码

                             var tagImg = document.getElementById('verify_code');

                             tagImg.src='/api/imgCode?'+ Math.random();

                             console.log(data['msg']);

                             layer.msg(data['msg']);

                         }

                     }

                 });

                 return false;

             });

第四步：验证码验证

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

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

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

 if request.method == 'POST':

     username = request.form.get('username')

     password = request.form.get('password')

     captcha = request.form.get('captcha').lower()

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

 if captcha==session['imageCode'].lower():

     pass

 else：

     return jsonify({'code':-1,'msg':'图片验证码错误'})

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

注：转载请注明出处。谢谢合作~

巴特西

flask实现验证码并验证

最新文章

热门文章