菜鳥學Python之django-simple-captcha使用

環境的準備

前端框架semantic ui
Python 3.6.4

pip install django  
pip install django-simple-captcha

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

目標展現

配置settings.py

# django_simple_captcha 驗證碼配置其餘配置項查看文檔
# 默認格式
CAPTCHA_OUTPUT_FORMAT = '%(image)s %(text_field)s %(hidden_field)s '
CAPTCHA_NOISE_FUNCTIONS = ('captcha.helpers.noise_null', # 沒有樣式
    # 'captcha.helpers.noise_arcs', # 線
    # 'captcha.helpers.noise_dots', # 點
)
# 圖片中的文字爲隨機英文字母，如 mdsh
# CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.random_char_challenge' 
 # 圖片中的文字爲數字表達式，如2+2=
CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.math_challenge'   
# 超時(minutes)
CAPTCHA_TIMEOUT = 1

配置form.py

class LoginForms(forms.Form):
    email = forms.CharField(label="郵箱", max_length=128)
    password = forms.CharField(label="密碼", max_length=128, widget=forms.PasswordInput)
    captcha = CaptchaField()

配置views.py

def login(request):
    pass
   # 圖片驗證碼
    # hashkey驗證碼生成的祕鑰，image_url驗證碼的圖片地址
    hashkey = CaptchaStore.generate_key()
    image_url = captcha_image_url(hashkey)
    login_form = forms.LoginForms()
    # Python內置了一個locals()函數，它返回當前全部的本地變量字典
    return render(request, 'user/login.html', locals())

html 模板中顯示驗證碼

<div class="field">
          <div class="ui left img input">
            <button  id='js-captcha-refresh'  class='ui icon button ' ><i class="refresh icon green"></i></button>
              <img src="{{ image_url}}" alt="captcha" class="captcha">
              <input autocomplete="off" id="id_captcha_1" name="captcha_1" type="text" placeholder="輸入驗證碼">
              <input id="id_reg_captcha_0" name="captcha_0" type="hidden" value="{{ hashkey }}">
          </div>
        </div>

在模板中加入js代碼

<script>
  $('#js-captcha-refresh').click(function(){
{#    $form = $(this).parents('form');#}

    $.getJSON($(this).data('url'), {}, function(json) {
        // This should update your captcha image src and captcha hidden input

    });

    return false;
});
  </script>

這種刷新驗證碼的方式是點擊按鈕，還有ajax請求的刷新方式，你們有興趣能夠根據官方文檔研究一下