django-simple-captcha 验证码插件介绍

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);
});
});

以上为学习笔记，如有错误，请指出