快捷導(dǎo)航

Django-simple-captcha驗(yàn)證碼包使用方法詳解

更新時(shí)間：2020年11月28日 15:41:27 作者：-零

這篇文章主要介紹了Django-simple-captcha驗(yàn)證碼包使用方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

django-simple-captcha是django的驗(yàn)證碼包，非常簡(jiǎn)單實(shí)用，這次記錄的是如何點(diǎn)擊驗(yàn)證碼后刷新驗(yàn)證碼，因?yàn)檫@個(gè)功能官方文檔并沒(méi)有詳細(xì)給出。

django-simple-captcha官方文檔：http://django-simple-captcha.readthedocs.io/en/latest/

django-simple-captcha的github網(wǎng)址：https://github.com/mbi/django-simple-captcha

開(kāi)始

1.安裝 pip install django-simple-captcha， pip install Pillow

2.將captcha 加入 settings.py 的 INSTALLED_APPS

3.運(yùn)行 python manage.py makemigrations 和 python manage.py migrate

4.url路由加入urls.py的urlpatterns

urlpatterns = [
  path('captcha/', include('captcha.urls')),    # 圖片驗(yàn)證碼 路由
  path('refresh_captcha/', views.refresh_captcha),  # 刷新驗(yàn)證碼，ajax
  path('test/',IndexView.as_view()),         #get與post請(qǐng)求路徑
]

5.在views.py中加入以下代碼

from django.shortcuts import render
from django.views.generic import View
from captcha.models import CaptchaStore
from captcha.helpers import captcha_image_url
from django.http import HttpResponse
import json


# 創(chuàng)建驗(yàn)證碼
def captcha():
  hashkey = CaptchaStore.generate_key() # 驗(yàn)證碼答案
  image_url = captcha_image_url(hashkey) # 驗(yàn)證碼地址
  captcha = {'hashkey': hashkey, 'image_url': image_url}
  return captcha

#刷新驗(yàn)證碼
def refresh_captcha(request):
  return HttpResponse(json.dumps(captcha()), content_type='application/json')

# 驗(yàn)證驗(yàn)證碼
def jarge_captcha(captchaStr, captchaHashkey):
  if captchaStr and captchaHashkey:
    try:
      # 獲取根據(jù)hashkey獲取數(shù)據(jù)庫(kù)中的response值
      get_captcha = CaptchaStore.objects.get(hashkey=captchaHashkey)
      if get_captcha.response == captchaStr.lower(): # 如果驗(yàn)證碼匹配
        return True
    except:
      return False
  else:
    return False


class IndexView(View):
  def get(self, request):
    hashkey = CaptchaStore.generate_key() # 驗(yàn)證碼答案
    image_url = captcha_image_url(hashkey) # 驗(yàn)證碼地址
    print(hashkey,image_url)
    captcha = {'hashkey': hashkey, 'image_url': image_url}
    return render(request, "login.html", locals())

  def post(self, request):
    capt = request.POST.get("captcha", None) # 用戶提交的驗(yàn)證碼
    key = request.POST.get("hashkey", None) # 驗(yàn)證碼答案
    if jarge_captcha(capt, key):
      return HttpResponse("驗(yàn)證碼正確")
    else:
      return HttpResponse("驗(yàn)證碼錯(cuò)誤")

6.templates文件夾下login.html的內(nèi)容

{% load static %}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
</head>
<body>
  <form action="/test/" method="post">
    {% csrf_token %}
    <a href="#" rel="external nofollow" class="captcha">
      <img src="{{ captcha.image_url }}" alt="點(diǎn)擊切換" id="id_captcha" >
    </a> <br>
    <input type="text" name="captcha" placeholder="驗(yàn)證碼"> <br>
    <input value="{{ captcha.hashkey }}" name="hashkey" type="hidden" id="id_captcha_0">
    <button type="submit" class="btn btn-primary btn-block ">提交</button>
  </form>
<script>
    <!-- 動(dòng)態(tài)刷新驗(yàn)證碼js -->
    $(document).ready(function(){
      $('.captcha').click(function () {
        $.getJSON("/refresh_captcha/", function (result) {
          $('#id_captcha').attr('src', result['image_url']);
          $('#id_captcha_0').val(result['hashkey'])
        });
      });
    });
</script>
</body>
</html>

django-simple-captcha并沒(méi)有使用session對(duì)驗(yàn)證碼進(jìn)行存儲(chǔ)，而是使用了數(shù)據(jù)庫(kù)，當(dāng)你在做數(shù)據(jù)庫(kù)遷移的時(shí)候會(huì)生成一個(gè)表 captcha_captchastore ，包含以下字段

challenge = models.CharField(blank=False, max_length=32) # 驗(yàn)證碼大寫(xiě)或者數(shù)學(xué)計(jì)算比如 1+1
response = models.CharField(blank=False, max_length=32) # 需要輸入的驗(yàn)證碼驗(yàn)證碼小寫(xiě)或數(shù)學(xué)計(jì)算的結(jié)果比如 2
hashkey = models.CharField(blank=False, max_length=40, unique=True) # hash值
expiration = models.DateTimeField(blank=False) # 到期時(shí)間

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: