用python實(shí)現(xiàn)一個(gè)簡單的驗(yàn)證碼

更新時(shí)間：2020年12月09日 11:42:06 作者：極客運(yùn)維圈

這篇文章主要介紹了用python實(shí)現(xiàn)一個(gè)簡單的驗(yàn)證碼的方法，幫助大家更好的理解和使用python，感興趣的朋友可以了解下

我們經(jīng)常在登錄一個(gè)網(wǎng)站，或者注冊的時(shí)候需要輸入一個(gè)驗(yàn)證碼，有時(shí)候覺得很煩，因?yàn)橛行?yàn)證碼不僅復(fù)雜還看不清，許多用戶就會(huì)因?yàn)檫@些而懶得再登錄或者注冊之類的。
既然驗(yàn)證碼會(huì)造成流失用戶的風(fēng)險(xiǎn)，為什么大家都還要使用驗(yàn)證碼呢？
這是驗(yàn)證碼在一定程度上起到保護(hù)網(wǎng)站安全的作用，比如防止大規(guī)模惡意注冊（比如手機(jī)驗(yàn)證碼形式，一機(jī)一戶），再比如反爬蟲（至少不會(huì)輕易讓你爬取數(shù)據(jù)）等，你看用戶基數(shù)最大的12306，就會(huì)有各種驗(yàn)證碼。
既然驗(yàn)證碼這么重要，它的原理是什么？是怎么實(shí)現(xiàn)的？
它的原理其實(shí)很簡單，就是在服務(wù)器端生成驗(yàn)證碼，發(fā)送給客戶端，并以圖像格式顯示?？蛻舳颂峤凰@示的驗(yàn)證碼，服務(wù)端接收并進(jìn)行比較，若比對失敗則不能實(shí)現(xiàn)登錄或注冊，反之成功后跳轉(zhuǎn)相應(yīng)界面。

我們知道了其原理，實(shí)現(xiàn)起來就很簡單了，現(xiàn)在網(wǎng)絡(luò)上也有各種各樣已經(jīng)做好的驗(yàn)證碼，我們完全可以拿來即用。但是為了更好的理解其原理，我們來手?jǐn)]一個(gè)簡單的驗(yàn)證碼，以下是在Django中實(shí)現(xiàn)。

簡單的驗(yàn)證碼

（1）、我們在urls.py中定義一條路由，如下：

url(r'getcode', views.get_code, name="get_code"),

（2）、我們定義一個(gè)視圖函數(shù)get_code()，如下：

from io import BytesIO

from PIL import Image, ImageDraw, ImageFont
from django.conf import settings
from django.shortcuts import render, HttpResponse, redirect
def get_code(request):
  """
  手?jǐn)]一個(gè)驗(yàn)證碼
  """
  # 定義圖像顏色模型
  mode = "RGB"
  # 定義圖像尺寸
  size = (200, 100)
  # 定義背景色
  bg_color = (255, 0, 0)
  # 創(chuàng)建圖像
  image = Image.new(mode=mode, size=size, color=bg_color)
  # 創(chuàng)建畫布
  image_draw = ImageDraw.Draw(image, mode=mode)
  # 創(chuàng)建字體,第一個(gè)參數(shù)是字體，第二個(gè)參數(shù)是字體大小
  image_font = ImageFont.truetype(settings.FONT_PATH, 100)
  # 創(chuàng)建一個(gè)驗(yàn)證碼
  verify_code = "Joke"
  # 生成驗(yàn)證碼
  fill_color = (255,255,255)
  for i in range(4):
    image_draw.text(xy=(50 * i, 0), text=verify_code[i], font=image_font, fill=fill_color)
  # 保存圖像
  fp = BytesIO()
  image.save(fp, "png")
  return HttpResponse(fp.getvalue(), content_type="image/png")

其中settings.FONT_PATH是我預(yù)先定義好的字段，如下

STATICFILES_DIRS = [  os.path.join(BASE_DIR, "statics"),]
FONT_PATH = os.path.join(os.path.join(STATICFILES_DIRS[0], "fonts"),"constan.ttf")

然后我們我們啟動(dòng)服務(wù)python manager.py runserver，在瀏覽器上就可以看到驗(yàn)證碼生成了

能是實(shí)現(xiàn)了，但是我們現(xiàn)在是自定義了一個(gè)驗(yàn)證碼字段，我們是需要隨機(jī)生成驗(yàn)證碼，而且字體顏色，背景顏色這些也不要定死了，然后我們再生成一些干擾點(diǎn)，我們對代碼進(jìn)行如下重構(gòu)：

def get_code(request):
  """
  手?jǐn)]一個(gè)驗(yàn)證碼
  """
  # 定義圖像顏色模型
  mode = "RGB"
  # 定義圖像尺寸
  size = (200, 100)
  # 定義背景色
  bg_color = (get_color(), get_color(), get_color())
  # 創(chuàng)建圖像
  image = Image.new(mode=mode, size=size, color=bg_color)
  # 創(chuàng)建畫布
  image_draw = ImageDraw.Draw(image, mode=mode)
  # 創(chuàng)建字體,第一個(gè)參數(shù)是字體，第二個(gè)參數(shù)是字體大小
  image_font = ImageFont.truetype(settings.FONT_PATH, 100)
  # 創(chuàng)建一個(gè)驗(yàn)證碼
  # verify_code = "Joke"
  verify_code = get_verify_code()
  # 生成驗(yàn)證碼
  # fill_color = (255,255,255)
  for i in range(4):
    fill_color = (get_color(),get_color(),get_color())
    image_draw.text(xy=(50 * i, 0), text=verify_code[i], font=image_font, fill=fill_color)
  # 加入干擾點(diǎn)
  for i in range(10000):
    fill_color = (get_color(),get_color(),get_color())
    xy = (random.randrange(200), random.randrange(100))
    image_draw.point(xy=xy,fill=fill_color)
  # 保存圖像
  fp = BytesIO()
  image.save(fp, "png")
  return HttpResponse(fp.getvalue(), content_type="image/png")


def get_color():
  """隨機(jī)獲取顏色"""
  return random.randrange(256)


def get_verify_code():
  """隨機(jī)獲取驗(yàn)證碼"""
  verify_code = ''.join(random.choice(string.ascii_uppercase + string.digits + string.ascii_lowercase) for x in range(4))
  return verify_code

然后我們重啟應(yīng)用，刷新頁面如下

是不是有點(diǎn)神似了？下面我們創(chuàng)建一個(gè)簡單的login頁面，來實(shí)際應(yīng)用一下驗(yàn)證碼。

簡單的登錄頁面

（1）、創(chuàng)建一個(gè)路由

url(r'login',views.login, name="login"),

（2）、創(chuàng)建一個(gè)Login的視圖函數(shù)

def login(request):
  """登錄頁面"""
  if request.method == "POST":
    pass
  return render(request, "login.html")

（3）、創(chuàng)建一個(gè)login.html的template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
</head>
<body>
<form action="{% url 'app01:login' %}" method="post">
	{% csrf_token %}
  <span>用戶名：</span><input type="text" name="username">
  <br>
  <span>驗(yàn)證碼：</span><input type="text" name="verify_code">
  <br>
  <img src="{% url 'app01:get_code' %}" alt="">
  <br>
  <button>登錄</button>
</form>

</body>
</html>

然后重啟服務(wù)，瀏覽器訪問如下

現(xiàn)在我們只是簡單的搭建起了流程，我們需要的功能還沒有實(shí)現(xiàn)，我們需要的功能有：
1、驗(yàn)證碼校驗(yàn)
2、點(diǎn)擊圖片自動(dòng)刷新驗(yàn)證碼
3、忽略大小寫

我們現(xiàn)在對項(xiàng)目進(jìn)行重構(gòu)，如下：
（1）、我們在get_code視圖函數(shù)添加一行代碼，如下

# 創(chuàng)建一個(gè)驗(yàn)證碼
  # verify_code = "Joke"
  verify_code = get_verify_code()
# 加入session
  request.session['verify_code'] = verify_code
  ......

（2）、修改login視圖函數(shù)，如下

def login(request):
  """登錄頁面"""
  if request.method == "POST":
    storage_code = request.session.get("verify_code")
    submit_code = request.POST.get("verify_code")
    if storage_code.lower() == submit_code.lower():
      return HttpResponse("登錄成功")
  return render(request, "login.html")

（3）、修改login.html代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
</head>
<body>
<form action="{% url 'app01:login' %}" method="post">
  {% csrf_token %}
  <span>用戶名：</span><input type="text" name="username">
  <br>
  <span>驗(yàn)證碼：</span><input type="text" name="verify_code">
  <br>
  <img src="{% url 'app01:get_code' %}" alt="" name="verify_image">
  <br>
  <button>登錄</button>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
<script>
  $(function () {
    $("img").on("click", function () {
      console.log("來了啊")
      $(this).attr("src","{% url 'app01:get_code' %}"+"?id="+Math.random())
    })
  })
</script>
</body>
</html>

然后就可以愉快的玩耍了，是不是很簡單呢？

以上就是用python實(shí)現(xiàn)一個(gè)簡單的驗(yàn)證碼的詳細(xì)內(nèi)容，更多關(guān)于python 實(shí)現(xiàn)驗(yàn)證碼的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: