django-simple-captcha 使用以及添加動態ajax刷新驗證

時間 2019-12-01

標籤 django simple captcha 使用以及添加動態 ajax 刷新驗證欄目 Python 简体版

原文原文鏈接

參考博客：http://blog.csdn.net/tanzuozhev/article/details/50458688?locationNum=2&fps=1css

參考博客：http://blog.csdn.net/shanliangliuxing/article/details/9214181html

django-simple-captcha是django的驗證碼包，很是簡單實用，此次記錄的是如何點擊驗證碼後刷新驗證碼，由於這個功能官方文檔並無詳細給出。python

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

django-simple-captcha的github網址：https://github.com/mbi/django-simple-captchagit

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

2.將captcha 加入 settings.py 的 INSTALLED_APPSajax

3.運行 python manager.py migrations 和 python manage.py migrate，之前的版本須要用到 python manage.py syncdb數據庫

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

urlpatterns = [
url(r'^captcha/', include('captcha.urls')),  # 這是生成驗證碼的圖片
url('^some_view/', finder.views.some_view),  # finder是個人app名字，須要在文件頭部加入 import finder.views
]

5.在forms.py中加入json

from django import forms
from captcha.fields import CaptchaFieldclass
class CaptchaTestForm(forms.Form):
    title = forms.CharField(max_length=100, label='title')
    price = forms.FloatField(max_value=100, label='price')  # 這裏是咱們須要的字段，以title和price爲例
    captcha = CaptchaField()  # 爲生成的驗證碼圖片，以及輸入框

6.在views.py中加入如下代碼

def some_view(request):
    if request.POST:
        form = CaptchaTestForm(request.POST)
        # Validate the form: the captcha field will automatically
        # check the input
        if form.is_valid():
            human = True
            return HttpResponse(form.cleaned_data)  # 這裏沒有創建模型，若是成功則直接打印
        else:
            return HttpResponse('validate error')
    else:
        form = CaptchaTestForm()
    return render_to_response('template.html',locals())  # Python 的內建函數 locals() 。它返回的字典對全部局部變量的名稱與值進行映射

7.template.html 的內容

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>Document</title>
 </head>
 <body>
  <form action="." method="POST">
    {% csrf_token %} {{ form }}
   <input type="submit" value="submit" />
  </form>
 </body>
</html>

8.到此打開 http://localhost:8000/some_view/ 就有有一個含有驗證碼的title，price的表單

這裏咱們簡單說一下驗證碼生成的原理，django-simple-captcha並無使用session對驗證碼進行存儲，而是使用了數據庫，首先生成一個表 captcha_captchastore ，包含如下字段

challenge = models.CharField(blank=False, max_length=32) # 驗證碼大寫或者數學計算好比 1+1
response = models.CharField(blank=False, max_length=32)  # 須要輸入的驗證碼 驗證碼小寫或數學計算的結果 好比 2
hashkey = models.CharField(blank=False, max_length=40, unique=True) # hash值
expiration = models.DateTimeField(blank=False) # 到期時間

9.打開http://localhost:8000/some_view/ 會發現有一個隱藏字段

這個隱藏字段就是hashkey的值，django將hashkey傳給頁面以hidden的形式存在，提交表單時 hashkey與輸入的驗證碼一塊兒post到服務器，此時服務器驗證 captcha_captchastore表中 hashkey 對應的 response 是否與輸入的驗證碼一致，若是一致則正確，不一致返回錯誤。

10.django-simple-captcha ajax動態驗證

瞭解了驗證碼生成的原理，咱們能就能夠用ajax進行動態驗證

將如下代碼寫入 views.py:

from django.http import JsonResponse
from captcha.models import CaptchaStore

def ajax_val(request):
    if  request.is_ajax():
        cs = CaptchaStore.objects.filter(response=request.GET['response'], hashkey=request.GET['hashkey'])
        if cs:
            json_data={'status':1}
        else:
            json_data = {'status':0}
        return JsonResponse(json_data)
    else:
        # raise Http404
        json_data = {'status':0}
        return JsonResponse(json_data)

11.寫入 urls.py, 爲上面的view設置路由

urlpatterns = [
    url(r'^captcha/', include('captcha.urls')) # 這是生成驗證碼的圖片
    url('^some_view/', finder.views.some_view), # finder是個人app名字，須要在文件頭部加入 import finder.views
    url('^ajax_val/', finder.views.ajax_val, name='ajax_val'), # 新加入
]

12.tempalte.html 寫入ajax

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>Document</title>
 </head>
 <body>
  <form action="." method="POST">
    {% csrf_token %} {{ form }}
   <input type="submit" value="submit" />
  </form> 
  <script>
    $(function(){
    $('#id_captcha_1').blur(function(){
  // #id_captcha_1爲輸入框的id，當該輸入框失去焦點是觸發函數
        json_data={
            'response':$('#id_captcha_1').val(), // 獲取輸入框和隱藏字段id_captcha_0的數值
            'hashkey':$('#id_captcha_0').val()
        }
        $.getJSON('/ajax_val', json_data, function(data){
 //ajax發送
            $('#captcha_status').remove()
            if(data['status']){ //status返回1爲驗證碼正確， status返回0爲驗證碼錯誤， 在輸入框的後面寫入提示信息
                $('#id_captcha_1').after('<span id="captcha_status" >*驗證碼正確</span>')
            }else{
                 $('#id_captcha_1').after('<span id="captcha_status" >*驗證碼錯誤</span>')
            }
        });
    });
    })
    </script> 
  <script src="./jquery.js"></script> 記得導入jquery.js
 </body>
</html>

至此咱們完成了django-simple-captcha 的ajax動態驗證

13.django-simple-captcha ajax刷新

若是當前驗證碼看不清，咱們能夠刷新一下，這個咱們用ajax來作。 jango-simple-captcha自己提供了一個刷新頁面，/refresh 在captcha/urls.py中：

url(r’refresh/$’, views.captcha_refresh, name=’captcha-refresh’)

這裏在咱們本身的urls.py中能夠不作處理，直接使用 /captcha/refresh/

14.views.captcha_refresh 源碼

# 只是源碼介紹不用寫入本身的代碼中
def captcha_refresh(request):
    """  Return json with new captcha for ajax refresh request """
    if not request.is_ajax():
 # 只接受ajax提交
        raise Http404
    new_key = CaptchaStore.generate_key()
    to_json_response = {
        'key': new_key,
        'image_url': captcha_image_url(new_key),
    }
    return HttpResponse(json.dumps(to_json_response), content_type='application/json')

15.經過閱讀源代碼咱們發現， views.captcha_refresh 只接受ajax提交，最後返回 key 和 image_url 的json數據，這裏的key就是 hashkey，須要咱們寫入id爲id_captcha_1的隱藏字段， image_url爲驗證碼圖片的新url，這裏咱們加入ajax刷新，點擊驗證碼圖片便可實現刷新，最新的tempalte.html 代碼爲

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>Document</title>
 </head>
 <body>
  <form action="." method="POST">
    {% csrf_token %} {{ form }}
   <input type="submit" value="submit" />
  </form> 
  <script>
    $(function(){
    $('.captcha').css({
        'cursor': 'pointer'
    })
    # ajax 刷新
    $('.captcha').click(function(){
        console.log('click');
         $.getJSON("/captcha/refresh/",
                  function(result){
             $('.captcha').attr('src', result['image_url']);
             $('#id_captcha_0').val(result['key'])
          });});
    # ajax動態驗證
    $('#id_captcha_1').blur(function(){
  // #id_captcha_1爲輸入框的id，當該輸入框失去焦點是觸發函數
        json_data={
            'response':$('#id_captcha_1').val(),  // 獲取輸入框和隱藏字段id_captcha_0的數值
            'hashkey':$('#id_captcha_0').val()
        }
        $.getJSON('/ajax_val', json_data, function(data){ //ajax發送            $('#captcha_status').remove()
            if(data['status']){ //status返回1爲驗證碼正確， status返回0爲驗證碼錯誤， 在輸入框的後面寫入提示信息
                $('#id_captcha_1').after('<span id="captcha_status" >*驗證碼正確</span>')
            }else{
                 $('#id_captcha_1').after('<span id="captcha_status" >*驗證碼錯誤</span>')
            }
        });
    });
    })
    </script> 
  <script src="./jquery.js"></script> 記得導入jquery.js
 </body>
</html>