django-simple-captcha作为一款django的验证码插件,使用方法非常简单,能够快速应用到web应用中。
文档官网地址:django-simple-captcha
使用方法:
1.安装:
pip install django-simple-captcha
2.项目settings.py及url配置:
生成的验证码类型,图片格式等配置都是通过在settings.py中添加若干关键字来指定的,如果不指定,则为默认值。
INSTALLED_APPS = [ #添加应用
#其他应用...
'captcha',
]
CAPTCHA_IMAGE_SIZE = (100,30) #设置生成验证码图片的长和宽,单位为像素
CAPTCHA_OUTPUT_FORMAT = u'%(text_field)s %(image)s %(hidden_field)s' #设置输出的格式,该插件自动在模板中生成3个元素:一个验证码图片,一个验证码输入框、一个用于存放秘钥的隐藏输入框。可以在此根据需要调整其在模板中生成的先后顺序
CAPTCHA_FOREGROUND_COLOR = 'red' #设置验证码图片前景色
CAPTCHA_BACKGROUND_COLOR = '#ffffff' #设置验证码图片背景色
CAPTCHA_FONT_SIZE = '20' #设置验证码图片中字体大小
CAPTCHA_FONT_PATH = 'fonts/Vera.ttf' #设置字体样式,支持TTF等文件格式
CAPTCHA_LETTER_ROTATION = (-35,35) #设置验证码中字母旋转的角度
CAPTCHA_NOISE_FUNCTIONS = ('captcha.helpers.noise_arcs','captcha.helpers.noise_dots',) #是否添加干扰点和干扰线,当值为'captcha.helpers.noise_null'时,表示不添加干扰
CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.random_char_challenge' #设置验证码类型,其内置了三种验证码类型,还包括'captcha.helpers.math_challenge'(数字)和'captcha.helpers.word_challenge'(字典),除此之外,你还可以自己定义验证码生成函数
CAPTCHA_TIMEOUT = '5' #设置验证码的有效时间,单位为分钟
CAPTCHA_LENGTH = '4' #当验证码类型为字符型时,指定字母个数
添加url
该插件内置了4个模板需要添加
urlpatterns = [ #源码
url(r'image/(?P<key>\w+)/$', views.captcha_image, name='captcha-image', kwargs={'scale': 1}),
url(r'image/(?P<key>\w+)@2/$', views.captcha_image, name='captcha-image-2x', kwargs={'scale': 2}),
url(r'audio/(?P<key>\w+).wav$', views.captcha_audio, name='captcha-audio'),
url(r'refresh/$', views.captcha_refresh, name='captcha-refresh'),
]
直接在自己项目中导入即可
from django.conf.urls import url,include
urlpatterns = [
#其他url...
url(r'^captcha/',include('captcha.urls')),
]
不要忘了python manage.py migrate
3.添加至表单
from django import forms
from captcha.fields import CaptchaField
class CaptchaTestForm(forms.Form):
myfield = AnyOtherField()
captcha = CaptchaField()
或者
from django import forms
from captcha.fields import CaptchaField
class CaptchaTestModelForm(forms.ModelForm):
captcha = CaptchaField()
class Meta:
model = MyModel
在CaptchaField()中可以添加错误信息,例如:
captcha = CaptchaField(error_messages={"invalid":u"验证码错误","required":u"请输入验证码"})
4.视图函数
表单的验证是自动的
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
else:
form = CaptchaTestForm()
return render_to_response('template.html',locals())
5.前端
{{form.captcha}}
{{form.captcha.errors}}
生成表单控件结果
<input id="id_captcha_1" class="form-control user_captcha" placeholder="请输入验证码" autocomplete="off" autocapitalize="off" spellcheck="false" name="captcha_1" type="text" >
<img class="captcha" alt="captcha" src="/%2Fimage/e91228ab45df7338b59b64cb0eae1b60a48fd125/">
<input id="id_captcha_0" name="captcha_0" value="e91228ab45df7338b59b64cb0eae1b60a48fd125" type="hidden">
你也可以在前端手动添加这3个控件,其中验证码图片的url和隐藏输入框的value可以通过插件内置的CaptchaStore.generate_key()
和 captcha_image_url(hashkey)
方法来生成,并在视图函数中传递给前端即可。
views.py
from captcha.models import CaptchaStore
from captcha.helpers import captcha_image_url
hashkey = CaptchaStore.generate_key()
image_url = captcha_image_url(hashkey)
<input id="id_captcha_1" class="form-control user_captcha" placeholder="请输入验证码" autocomplete="off" autocapitalize="off" spellcheck="false" name="captcha_1" type="text" >
<img class="captcha" alt="captcha" src="{{image_url}}">
<input id="id_captcha_0" name="captcha_0" value="{{hashkey}}" type="hidden">
{{form.captcha.errors}}
6.工作原理
该插件的工作原理是基于数据库查询的,其将generate_key()
方法生成的验证码存储在CaptchaStore表单中,在前端获取用户的输入(response)以及秘钥(hashkey),然后基于这两者在数据库CaptchaStore表单中查询是否有匹配的数据,如果存在,则验证通过。
7.AJAX验证表单
知晓了其工作原理,除submit自动验证表单以外,我们就可以通过ajax来验证了
在前端传输用户的输入和秘钥给视图函数,并根据返回的状态,显示相应的反馈信息
$("#id_captcha_1").keyup(function(){ //验证码输入验证ajax
var response=$('#id_captcha_1').val();
var hashkey=$('#id_captcha_0').val();
json_data={
'response':response,
'hashkey':hashkey
}
$.getJSON("/ajax_captcha",json_data,function(data){
$("span.captcha_status").remove();
if (data.status){
$("#id_captcha_1").after('<span class="captcha_status">验证成功</span>');
}else{
$("#id_captcha_1").after('<span class="captcha_status">验证失败</span>');
}
});
});
视图函数中进行验证码输入验证,并返回结果
from django.http import JsonResponse
def ajax_captcha(request): #验证码输入验证
if request.is_ajax():
result = CaptchaStore.objects.filter(response=request.GET.get('response'),hashkey=request.GET.get('hashkey'))
if result:
data={'status':1}
else:
data={'status':0}
return JsonResponse(data)
设置url
from . import views
from django.conf.urls import url
urlpatterns = [
#其他url...
url(r'^ajax_captcha/',views.ajax_captcha,name='ajax_captcha'),
]
8.AJAX刷新验证码
当用户看不清验证码图片时,需要刷新获取新的验证码图片,刷新的视图函数已经在插件中内置,只需编写前端即可。
def captcha_refresh(request): #内置的源码
""" Return json with new captcha for ajax refresh request """
if not request.is_ajax():
raise Http404
new_key = CaptchaStore.pick()
to_json_response = {
'key': new_key,
'image_url': captcha_image_url(new_key),
'audio_url': captcha_audio_url(new_key) if settings.CAPTCHA_FLITE_PATH else None
}
return HttpResponse(json.dumps(to_json_response), content_type='application/json')
$("img.captcha").click(function(){ //更新验证码图片ajax
$.getJSON("/captcha/refresh",function(data){
$("img.captcha").attr("src",data.image_url);
$("#id_captcha_0").attr("value",data.key);
});
});