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