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：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

# 注册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：

?

1 2 3 4

urlpatterns = [    path(r'^captcha/', include('captcha.urls')),         # 验证码url, 内部使用了路由分发    path(r'^login/', views.login, name='login'),         # 登录url ]

4、配置form.py：

?

1 2 3 4 5 6 7

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代码为：

?

1 2 3 4

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

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 模板中显示验证码

?

1 2 3 4 5 6 7

<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刷新验证码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<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，此文介绍的较为详细。