zoukankan      html  css  js  c++  java
  • django验证码模块djangosimplecaptcha的使用介绍

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

  • 相关阅读:
    洛谷P2798 爆弹虐场
    洛谷P1164 小A点菜(01背包求方案数)
    洛谷P1312 Mayan游戏
    洛谷P1514 引水入城
    2017-10-12 NOIP模拟赛
    洛谷P1038 神经网络
    洛谷P1607 [USACO09FEB]庙会班车Fair Shuttle
    洛谷P1378 油滴扩展
    Ionic+Angular实现中英国际化(附代码下载)
    Ionic+Angular+Express实现前后端交互使用HttpClient发送get请求数据并加载显示(附代码下载)
  • 原文地址:https://www.cnblogs.com/sdlyxyf/p/15784345.html
Copyright © 2011-2022 走看看