django验证码模块django-simple-captcha的使用介绍
django-simple-captcha是django验证码模块，非常方便易用。
1、环境的准备：
在django项目环境中安装：pip install django-simple-captcha
django-simple-captcha官方文档地址：http://django-simple-captcha.readthedocs.io/en/latest/
2、配置settings.py：
# 注册app
INSTALLED_APPS = [
...,
'captcha',
]
# 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
执行migrate命令，生成CaptchaStore表，表中主要有chalenge,response,hashkey三个字段，分别存放验证码、验证码的值、key。
3、配置urls.py：
urlpatterns = [
path(r'^captcha/', include('captcha.urls')), # 验证码url, 内部使用了路由分发
path(r'^login/', views.login, name='login'), # 登录url
]
4、配置form.py：
from django import forms
from captcha.fields import CaptchaField
class CaptachTestForm(forms.Form):
username=forms.CharField(label='username')
password=forms.CharField(label='password',widget=forms.PasswordInput)
captcha=CaptchaField()
form中captcha的html代码为：
<tr><th><label for="id_captcha_1">Captcha:</label></th><td> <img src="/captcha/image/496c83bf8bf85c313894e27797205b074cd9c263/" alt="captcha" class="captcha" /> <input autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" id="id_captcha_1" name="captcha_1" type="text" /> <input id="id_captcha_0" name="captcha_0" type="hidden" value="496c83bf8bf85c313894e27797205b074cd9c263" /> </td></tr>
分别为验证码图片、验证码input框、key值的隐藏input框，即通过返回到后台的key值到数据表CaptchaStore中查找验证码的reponse值进行验证。
5、配置views.py：
from django.shortcuts import render
from django.contrib.auth.models import User
from django.contrib.auth import login,authenticate
from django.http import JsonResponse
from captcha.models import CaptchaStore
from captcha.helpers import captcha_image_url
from .forms import CaptachTestForm
def loginView(request):
# hashkey验证码生成的秘钥，image_url验证码的图片地址
hashkey = CaptchaStore.generate_key()
image_url = captcha_image_url(hashkey)
if request.method=='POST':
form=CaptachTestForm(request.POST)
if form.is_valid():
username=form.cleaned_data['username']
password=form.cleaned_data['password']
if User.objects.filter(username=username):
user=authenticate(username=username,password=password)
if user:
if user.is_active:
login(request,user)
tips='login success'
return render(request,'homePage.html')
else:
tips='the auth is wrongs,please input again...'
else:
tips='the username is not found,please to registe...'
else:
form=CaptachTestForm()
return render(request,'account/loginpage.html', locals())
def ajax_val(request):
if request.is_ajax():
r=request.GET['response']
h=request.GET['hashkey']
cs=CaptchaStore.objects.filter(response=r,hashkey=h)
if cs:
json_data={'status':1}
else:
json_data={'status':0}
return JsonResponse(json_data)
else:
json_data={'status':0}
return JsonResponse(json_data)
6、html 模板中显示验证码
<div class="form-group">
<label class="col-md-5 control-label" >captcha</label>
<div class="col-md-2 text-left"> <!-- {{ form.captcha }} </div> -->
<input autocomplete="off" id="id_captcha_1" name="captcha_1" type="text" style="width:80px;height: 28px">
<img src="{{ image_url}}" alt="captcha" class="captcha">
<input id="id_captcha_0" name="captcha_0" type="hidden" value="{{ hashkey }}"> </div>
</div>
在模板中加入js代码，使用ajax刷新验证码
<script>
$(function (){
$('.captcha').click(function (){
// console.log('click');
$.getJSON("/captcha/refresh/",function (result){
$('.captcha').attr('src',result['image_url']);
$('#id_captcha_0').val(result['key'])
})
});
$('#id_captcha_1').blur(function (){
json_data={
'response':$('#id_captcha_1').val(),
'hashkey':$('#id_captcha_0').val()
}
$.getJSON('/account/ajax_val',json_data,function (data){
$('#captcha_status').remove()
if(data['status']){
$('#id_captcha_1').after('<span id="captcha_status">*验证码正确</span>')
}else {
$('#id_captcha_1').after('<span id="captcha_status">*验证码错误</span>')
}
});
});
});
</script>
7、使用效果：
8、小结：
django-simple-captcha在数据库生成数据表CaptchaStore，设立chalenge,response,hashkey三个字段，分别存放验证码、验证码的值、key。
froms.py设置captcha字段，forms中的html代码中有三个标签，分别是img、验证码的input、key的input。通过key查找response值验证验证码。
可以参考https://www.cnblogs.com/the3times/p/13124453.html，此文介绍的较为详细。
