flask實(shí)現(xiàn)驗(yàn)證碼并驗(yàn)證功能

更新時(shí)間：2019年12月05日 09:51:32 作者：胡先生7

Flask是一個(gè)用Python編寫(xiě)的Web應(yīng)用程序框架，F(xiàn)lask是python的web框架，最大的特征是輕便，讓開(kāi)發(fā)者自由靈活的兼容要開(kāi)發(fā)的feature。這篇文章主要介紹了flask實(shí)現(xiàn)驗(yàn)證碼并驗(yàn)證,需要的朋友可以參考下

什么是Flask？

Flask是一個(gè)用Python編寫(xiě)的Web應(yīng)用程序框架，F(xiàn)lask是python的web框架，最大的特征是輕便，讓開(kāi)發(fā)者自由靈活的兼容要開(kāi)發(fā)的feature。它由 Armin Ronacher 開(kāi)發(fā)，他領(lǐng)導(dǎo)一個(gè)名為Pocco的國(guó)際Python愛(ài)好者團(tuán)隊(duì)。 Flask基于Werkzeug WSGI工具包和Jinja2模板引擎。兩者都是Pocco項(xiàng)目。

效果圖：

點(diǎn)擊圖片、刷新頁(yè)面、輸入錯(cuò)誤點(diǎn)擊登錄時(shí)都刷新驗(yàn)證碼

實(shí)現(xiàn)步驟：

第一步：先定義獲取驗(yàn)證碼的接口

verificationCode.py

#驗(yàn)證碼
@api.route('/imgCode')
def imgCode():
  return imageCode().getImgCode()

此處的@api是在app下注冊(cè)的藍(lán)圖，專門(mén)用來(lái)做后臺(tái)接口，所以注冊(cè)了api藍(lán)圖

第二步：實(shí)現(xiàn)接口邏輯

1）首先實(shí)現(xiàn)驗(yàn)證碼肯定要隨機(jī)生成，所以我們需要用到random庫(kù)，本次需要隨機(jī)生成字母和數(shù)字，

所以我們還需要用到string。string的ascii_letters是生成所有字母 digits是生成所有數(shù)字0-9。具體代碼如下

def geneText():
  '''生成4位驗(yàn)證碼'''
  return ''.join(random.sample(string.ascii_letters + string.digits, 4)) #ascii_letters是生成所有字母 digits是生成所有數(shù)字0-9

　　2）為了美觀，我們需要給每個(gè)隨機(jī)字符設(shè)置不同的顏色。我們這里用一個(gè)隨機(jī)數(shù)來(lái)給字符設(shè)置顏色

def rndColor():
  '''隨機(jī)顏色'''
  return (random.randint(32, 127), random.randint(32, 127), random.randint(32, 127))

　　3）此時(shí)我們已經(jīng)可以生產(chǎn)圖片驗(yàn)證碼了，利用上面的隨機(jī)數(shù)字和隨機(jī)顏色生成一個(gè)驗(yàn)證碼圖片。

　　這里我們需要用到PIL庫(kù)，此時(shí)注意，python3安裝這個(gè)庫(kù)的時(shí)候不是pip install PIL 而是pip install pillow。

def getVerifyCode():
  '''生成驗(yàn)證碼圖形'''
  code = geneText()
  # 圖片大小120×50
  width, height = 120, 50
  # 新圖片對(duì)象
  im = Image.new('RGB', (width, height), 'white')
  # 字體
  font = ImageFont.truetype('app/static/arial.ttf', 40)
  # draw對(duì)象
  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）此時(shí)，驗(yàn)證碼圖片已經(jīng)生成。然后需要做的就是把圖片發(fā)送到前端去展示。

def getImgCode():
  image, code = getVerifyCode()
  # 圖片以二進(jìn)制形式寫(xiě)入
  buf = BytesIO()
  image.save(buf, 'jpeg')
  buf_str = buf.getvalue()
  # 把buf_str作為response返回前端，并設(shè)置首部字段
  response = make_response(buf_str)
  response.headers['Content-Type'] = 'image/gif'
  # 將驗(yàn)證碼字符串儲(chǔ)存在session中
  session['imageCode'] = code
  return response

　　這里我們采用講圖片轉(zhuǎn)換成二進(jìn)制的形式，講圖片傳送到前端，并且在這個(gè)返回值的頭部，需要標(biāo)明這是一個(gè)圖片。

　　將驗(yàn)證碼字符串儲(chǔ)存在session中，是為了一會(huì)在登錄的時(shí)候，進(jìn)行驗(yàn)證碼驗(yàn)證。

　　5）OK，此時(shí)我們的接口邏輯已經(jīng)基本完成。然后我們還可以給圖片增加以下干擾元素，比如增加一點(diǎn)橫線。

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函數(shù)需要新增一步

def getVerifyCode():
  '''生成驗(yàn)證碼圖形'''
  code = geneText()
  # 圖片大小120×50
  width, height = 120, 50
  # 新圖片對(duì)象
  im = Image.new('RGB', (width, height), 'white')
  # 字體
  font = ImageFont.truetype('app/static/arial.ttf', 40)
  # draw對(duì)象
  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
#驗(yàn)證碼
@api.route('/imgCode')
def imgCode():
  return imageCode().getImgCode()
class imageCode():
  '''
  驗(yàn)證碼處理
  '''
  def rndColor(self):
    '''隨機(jī)顏色'''
    return (random.randint(32, 127), random.randint(32, 127), random.randint(32, 127))
  def geneText(self):
    '''生成4位驗(yàn)證碼'''
    return ''.join(random.sample(string.ascii_letters + string.digits, 4)) #ascii_letters是生成所有字母 digits是生成所有數(shù)字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):
    '''生成驗(yàn)證碼圖形'''
    code = self.geneText()
    # 圖片大小120×50
    width, height = 120, 50
    # 新圖片對(duì)象
    im = Image.new('RGB', (width, height), 'white')
    # 字體
    font = ImageFont.truetype('app/static/arial.ttf', 40)
    # draw對(duì)象
    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()
    # 圖片以二進(jìn)制形式寫(xiě)入
    buf = BytesIO()
    image.save(buf, 'jpeg')
    buf_str = buf.getvalue()
    # 把buf_str作為response返回前端，并設(shè)置首部字段
    response = make_response(buf_str)
    response.headers['Content-Type'] = 'image/gif'
    # 將驗(yàn)證碼字符串儲(chǔ)存在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="圖形驗(yàn)證碼" 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：主要是針對(duì)驗(yàn)證失敗以后，刷新圖片驗(yàn)證碼

// 進(jìn)行登錄操作
      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 {
              //登錄失敗則刷新圖片驗(yàn)證碼
              var tagImg = document.getElementById('verify_code');
              tagImg.src='/api/imgCode?'+ Math.random();
              console.log(data['msg']);
              layer.msg(data['msg']);
            }
          }
        });
        return false;
      });

第四步：驗(yàn)證碼驗(yàn)證

驗(yàn)證碼驗(yàn)證需要在點(diǎn)擊登錄按鈕以后，在對(duì)驗(yàn)證碼進(jìn)行效驗(yàn)

1）首先我們獲取到前端傳過(guò)來(lái)的驗(yàn)證碼。.lower()是為了忽略大小寫(xiě)

這里的具體寫(xiě)法為什么這樣寫(xiě)可以獲取到前端傳過(guò)來(lái)的參數(shù)，可以自行了解flask框架

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

　　2）對(duì)驗(yàn)證碼進(jìn)行驗(yàn)證.因?yàn)槲覀冊(cè)谏沈?yàn)證碼的時(shí)候，就已經(jīng)把驗(yàn)證碼保存到session中，這里直接取當(dāng)時(shí)生成的驗(yàn)證碼，然后跟前端傳過(guò)來(lái)的值對(duì)比即可。

 if captcha==session['imageCode'].lower():
   pass
 else：
   return jsonify({'code':-1,'msg':'圖片驗(yàn)證碼錯(cuò)誤'})

到此，已完成了獲取驗(yàn)證碼、顯示驗(yàn)證碼、驗(yàn)證驗(yàn)證碼的所有流程。驗(yàn)證驗(yàn)證碼中沒(méi)有把整體代碼寫(xiě)出來(lái)?？梢愿鶕?jù)自己情況自己寫(xiě)。

總結(jié)

以上所述是小編給大家介紹的flask實(shí)現(xiàn)驗(yàn)證碼并驗(yàn)證功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: