一、寫在前面

　　現(xiàn)在無論大大小小的網(wǎng)站，基本上都會使用驗證碼，登錄的時候要驗證，下載的時候要驗證，而使用的驗證碼也從那些簡簡單單的字符圖形驗證碼“進化”成了需要進行圖文識別的驗證碼、需要拖動滑塊的滑動驗證碼、甚至還有手機驗證碼。當你與之打交道的時候，有沒有考慮過其背后的原理呢？當然了，對于那些復雜的驗證碼我們想要弄得一清二楚還是很難的，但是可以挑軟柿子捏嘛--字符圖形驗證碼，就這樣，我決定用 Python + Flask 制作出一個簡單的驗證碼系統(tǒng)來，話不多說，擼起袖子加油干！

二、基本思路

　　一個簡單的驗證碼系統(tǒng)，要實現(xiàn)的目標包括能夠不斷刷新驗證碼和對用戶輸入的內(nèi)容進行驗證，若驗證成功則進行后續(xù)操作，若失敗則給出提示信息并要求重新輸入。

　　但是沒有大量驗證碼圖片怎么辦呢？正所謂“自己動手，豐衣足食”，Python 所具有的豐富的第三方庫使得產(chǎn)生大量驗證碼圖片這一需求變得甚是簡單了，這里主要使用的模塊是 pillow。

　　有了驗證碼圖片之后，要做的就是將其顯示在前端頁面上，并且要能夠更新驗證碼，這利用 Flask 可以很方便地實現(xiàn)。然后就是輸入驗證碼和對輸入的內(nèi)容進行驗證了，這里我是用 JS 實現(xiàn)驗證的。

三、具體步驟

1.生成驗證碼圖片

　　前面已經(jīng)提過這一步主要使用的模塊是 pillow，沒有安裝的話可以使用 pip install pillow 進行安裝。

　　PIL：Python Image Library，是 Python 處理圖片的標準庫，不過 PIL 僅支持到 Python2.7，之后有人在其基礎上創(chuàng)建了兼容的版本，名字就叫做 pillow。

　　新建一個 Flask 項目：CaptchaTest，然后創(chuàng)建一個 generate.py。要生成一個驗證碼圖片，首先得創(chuàng)建一張圖片，可以用 pillow 模塊中的 Image.new() 實現(xiàn)。然后需要生成驗證碼文本并將其寫入到前面生成的圖片上，除此之外，我們還可以加入一些干擾元素增加識別的難度。下面是幾張生成的驗證碼圖片：

　　最終得到的生成驗證碼圖片的代碼如下：

from random import randint
 from PIL import Image, ImageDraw, ImageFont
 def get_random_color():
   # 隨機顏色RGB
   return randint(120, 200), randint(120, 200), randint(120, 200) 
 def get_random_code():
   # 隨機字符
   codes = [[chr(i) for i in range(48, 58)], [chr(i) for i in range(65, 91)], [chr(i) for i in range(97, 123)]]
   codes = codes[randint(0, 2)]
   return codes[randint(0, len(codes)-1)]
 def generate_captcha(width=140, height=60, length=4):
   # 生成驗證碼
   img = Image.new("RGB", (width, height), (250, 250, 250))
   draw = ImageDraw.Draw(img)
   font = ImageFont.truetype("static/font/font.ttf", size=36)
   # 驗證碼文本
   text = ""
   for i in range(length):
     c = get_random_code()
     text += c
     rand_len = randint(-5, 5)
     draw.text((width * 0.2 * (i+1) + rand_len, height * 0.2 + rand_len), c, font=font, fill=get_random_color())
   # 加入干擾線
   for i in range(3):
     x1 = randint(0, width)
     y1 = randint(0, height)
     x2 = randint(0, width)
     y2 = randint(0, height)
     draw.line((x1, y1, x2, y2), fill=get_random_color())
   # 加入干擾點
   for i in range(16):
     draw.point((randint(0, width), randint(0, height)), fill=get_random_color())
   # 保存圖片
   img.save("static/captcha/" + text + ".jpg")
   return text + ".jpg"
 if __name__ == "__main__":
   for i in range(1000):
     generate_captcha()

2.顯示驗證碼圖片

　　在進行完上一步之后，我們已經(jīng)得到了1000張驗證碼圖片，都保存在 static 下的 captcha 文件夾下。那么現(xiàn)在的問題就是如何將驗證碼圖片顯示在頁面上，要解決這個問題，首先要定義一個路由，用于隨機選取驗證碼圖片并返回路徑。

　　在 Flask 中 route() 裝飾器把一個函數(shù)綁定到 URL 上，不僅能配置靜態(tài) URL，而且能配置動態(tài) URL，不過這里使用靜態(tài) URL 就行了。定義該路由的代碼如下：

@app.route('/get_captcha', methods=['GET'])
 def get_captcha():
   img_list = os.listdir("static/captcha")
   img = img_list[random.randint(0, 1000)]
  return os.path.join("static/captcha", img)

　　其中 os.listdir() 用于列舉文件夾下的內(nèi)容，os.path.join() 用于返回圖片路徑。

3.刷新驗證碼圖片

　　刷新驗證碼圖片的功能可以通過使用 Ajax 來實現(xiàn)，主要過程是先向后端發(fā)送請求，請求成功之后會得到一個驗證碼圖片路徑， 然后再設置圖片的 src 屬性，達到刷新驗證碼的目的。在 Ajax 中的 URL 可以直接寫靜態(tài) URL，還能使用 url_for 來反向解析獲取對應的 URL，使用方法如下：

<script>
   function Change() {
     $.ajax({
       url: '{{ url_for('get_captcha') }}',
       async: true,
       type: "GET",
       success: function (data) {
         document.getElementById("captcha").src = data;
       }
     })
   }
 </script>

4.驗證碼內(nèi)容驗證

　　在輸入驗證碼內(nèi)容后，需要對輸入的內(nèi)容進行驗證。因為前面生成驗證碼圖片的時候直接用的圖片內(nèi)容來命名的，所以這里就可以用 JavaScript 來獲取圖片名稱，再將輸入框中的內(nèi)容獲取到，把兩者進行比對，這一步還可以做一個忽略大小寫，至于具體代碼就不放了。

四、運行截圖

　　首先是一張運行頁面的截圖，點擊“看不清楚，換一張”可以刷新驗證碼，點擊“確認”可以驗證輸入的內(nèi)容是否正確：

 　　當輸入的內(nèi)容正確的時候，給出一個驗證成功的提示：

 　　到這里為止，一個簡單的驗證碼系統(tǒng)就做出來了，當然還有很多可以去完善的地方，比如使用更復雜的驗證碼，對驗證次數(shù)進行限制等等。

　　 完整代碼已上傳到 GitHub！

總結

以上所述是小編給大家介紹的Python + Flask 制作一個簡單的驗證碼系統(tǒng)，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

最新評論