什麼是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))

　　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,font=font)
  # 劃線
  drawLines(draw,2,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))
  def geneText(self):
    '''生成4位驗證碼'''
    return ''.join(random.sample(string.ascii_letters + string.digits,4)) #ascii_letters是生成所有字母 digits是生成所有數字0-9
  def drawLines(self,draw,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,width=1)
  def getVerifyCode(self):
    '''生成驗證碼圖形'''
    code = self.geneText()
    # 圖片大小120×50
    width,50
    # 新圖片物件
    im = Image.new('RGB','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,fill=self.rndColor(),font=font)
    # 劃線
    self.drawLines(draw,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實現驗證碼並驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援！
如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！