之前是自己手寫圖片驗證碼，借pillow模塊手動生成圖片，然后將隨機驗證碼放在圖片中，最后保存在session中用於登錄校驗。
今天介紹一個django開源的圖形驗證碼模塊django-simple-captcha，利用它我們無需再手動書寫驗證碼了，並且它還提供了不同類型的驗證碼(比如數字的算術運算)，且使用方便(配置文件配置即可)。請參考
其實，官網介紹的很詳細，不過這里還是用一個簡單的登錄案例介紹一下具體使用流程，方便以后再次使用。
安裝
# 1. 安裝模塊
pip install django-simple-captcha
# 2. 將'captcha'添加到settings.py配置文件中的INSTALLED_APPS里面
# 3. 執行數據庫遷移命令(注意：不需要makemigrations, 模塊已經自帶了遷移記錄)驗證碼存放在數據庫中的
python manage.py migrate
# 4. 在urls.py中增加一條urlpattern
url(r'^captcha/', include('captcha.urls')),
補充：如果是linux系統還需要安裝一些依賴
apt-get -y install libz-dev libjpeg-dev libfreetype6-dev python-dev
使用
1、這里以登錄forms表單校驗為背景介紹。先寫一個用於登錄校驗的form類
- 其中
username和password是普通的字段，captcha是用於驗證碼校驗的字段。
# app01/myforms.py
from django import forms
from captcha.fields import CaptchaField # 導入驗證碼的Field
class RegForm(forms.Form):
username = forms.CharField(label='用戶名')
password = forms.CharField(label='密碼')
captcha = CaptchaField(label='驗證碼') # 驗證碼校驗字段
2、增加一個用於登錄的url匹配關系
# urls.py
from django.conf.urls import url, include
from app01 import views
urlpatterns = [
url(r'^captcha/', include('captcha.urls')), # 驗證碼url, 內部使用了路由分發
url(r'^login/', views.login, name='login'), # 登錄url
]
3、書寫登錄邏輯視圖函數
# app01/views.py
from django.shortcuts import render
from app01.myforms import RegForm
def login(request):
form_obj = RegForm() # 用於get前請前段渲染標簽
if request.method == 'POST':
form_obj = RegForm(request.POST) # request.POST內攜帶有前端ajax發送過來的驗證碼數據
if form_obj.is_valid(): # 直接使用form校驗，內部自動校驗驗證碼是否正確
print(form_obj.cleaned_data)
pass # 就不做登錄邏輯處理了
else:
print(form_obj.errors)
return render(request, 'login.html',locals())
4、前端html模版文件
# login.html
<body>
<div class="row" style="margin-top: 50px">
<div class="col-md-6 col-md-offset-3">
<form id="myform">
{% csrf_token %}
{% for form in form_obj %}
<div class="form-group">
<label for="">{{ form.label }}</label>
{{ form }} {# 直接渲染出驗證碼圖片和驗證碼輸入框 #}
</div>
{% endfor %}
</form>
<button id="btn_submit">提交</button>
</div>
</div>
</body>
渲染效果圖：因為沒有任何樣式所以很丑，前端可以增加CSS設計樣式
添加JS實現點擊驗證碼圖片刷新圖片(官網提供的)
captcha是驗證碼圖片img標簽的class("/captcha/refresh/"朝后端發請求，還記得眼驗證碼的url是一個路由分發吧- 此外，官網也提供了另一種點擊按鈕刷新驗證碼圖片的JS文件，感興趣參考官網代碼
# login.html
<script>
{# 點擊圖片刷新驗證碼 #}
$('.captcha').click(function () {
$.getJSON("/captcha/refresh/", function (result) {
$('.captcha').attr('src', result['image_url']);
$('#id_captcha_0').val(result['key'])
});
});
</script>
點擊提交按鈕JS，朝后端發送ajax數據，檢驗驗證碼
- ajax提交驗證碼的數據需要攜帶兩個參數：
captcha_1和captcha_0（后面補充有介紹，和數據庫有關）
# login.html
<script>
{# 點擊提交按鈕，ajax提交數據 #}
$('#btn_submit').click(function () {
$.ajax({
url: '/login/',
type: 'post',
data: {
'csrfmiddlewaretoken': '{{ csrf_token }}', # 攜帶csrf_token
'username': $('#id_username').val(),
'password': $('#id_password').val(),
'captcha_1': $('#id_captcha_1').val(), # 用戶輸入的驗證碼
'captcha_0': $('#id_captcha_0').val(), # 原本的驗證碼值(隱藏input標簽的value)
},
success: function (args) {
alert(args);
}
})
})
</script>
這樣設置后，輸入驗證碼，通過ajax朝后端提交數據，就可以檢驗驗證碼是否正確，
- 正確的驗證碼在
form_obj.cleaned_data中
# form_obj.cleaned_data
{'username': 'admin', 'password': '123456', 'captcha': ['15caf37211638e6fc4acaf3d3159ca8a528202f7', '']}
- 錯誤的驗證碼在
form_obj.errors中，里面有驗證碼字段錯誤的信息。
# 錯誤1：驗證碼錯誤(驗證碼默認有效期記得是5min，且只能使用一次)
<ul class="errorlist"><li>captcha<ul class="errorlist"><li>Invalid CAPTCHA</li></ul></li></ul>
# 錯誤2：驗證碼為空
<ul class="errorlist"><li>captcha<ul class="errorlist"><li>This field is required.</li></ul></li></ul>
補充：數據庫中的驗證碼
表captcha_captchastore
