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

绝地灬酷狼 2022-06-02 03:18 321阅读 0赞

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

生成表单控件结果

你也可以在前端手动添加这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);
    	});
    });

--------------------

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[django-simple-captcha]: http://django-simple-captcha.readthedocs.io/en/latest/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20220602/aa1789346d3f498299b784d94829e302.png