zoukankan      html  css  js  c++  java
  • Django中图形验证码(django-simple-captcha)

    django-simple-captcha

    在网站开发的登录页面中,经常会需要使用到图形验证码来验证。在Django中,django-simple-captcha库包提供了图形验证码的使用。

    下面我们来讲讲如何使用django-simple-captcha包来图形验证,并且点击图片刷新验证码。

    django-simple-captcha的安装

    pip install django-simple-captcha
    

    在settings.py文件中注册captcha

    INSTALLED_APPS = [
        'captcha'
    ]

    在settings.py文件中设置图形验证码的样式

    #字母验证码
    CAPTCHA_IMAGE_SIZE = (80, 45)   # 设置 captcha 图片大小
    CAPTCHA_LENGTH = 4   # 字符个数
    CAPTCHA_TIMEOUT = 1   # 超时(minutes)
    
    
    #加减乘除验证码
    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', # 点
    )
    CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.random_char_challenge'
    CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.math_challenge'
    CAPTCHA_TIMEOUT = 1

    执行数据迁移,在数据表中生成captcha_captchastore表

    python manage.py migrate

    在urls.py中添加路由

    urlpatterns = [
        path('captcha/', include('captcha.urls')),       # 图片验证码 路由
        path('refresh_captcha/', views.refresh_captcha),    # 刷新验证码,ajax
    ]
    

    下面是源代码。 

    urls.py文件

    from django.urls import path
    from django.conf.urls import include
    from App.views import IndexView
    from App import views
    
    urlpatterns = [
        path('captcha/', include('captcha.urls')),
        path('refresh_captcha/',views.refresh_captcha),
        path('',IndexView.as_view()),
    ]
    

    views.py文件

    from django.shortcuts import render
    from django.views.generic import View
    from captcha.models import CaptchaStore
    from captcha.helpers import  captcha_image_url
    from django.http import HttpResponse
    import json
    
    # 创建验证码
    def captcha():
        hashkey = CaptchaStore.generate_key()   #验证码答案
        image_url = captcha_image_url(hashkey)  #验证码地址
        captcha = {'hashkey': hashkey, 'image_url': image_url}
        return captcha
    #刷新验证码
    def refresh_captcha(request):
        return HttpResponse(json.dumps(captcha()), content_type='application/json')
    # 验证验证码
    def jarge_captcha(captchaStr, captchaHashkey):
        if captchaStr and captchaHashkey:
            try:
                # 获取根据hashkey获取数据库中的response值
                get_captcha = CaptchaStore.objects.get(hashkey=captchaHashkey)
                if get_captcha.response == captchaStr.lower():     # 如果验证码匹配
                    return True
            except:
                return False
        else:
            return False
    class IndexView(View):
        def get(self, request):
            hashkey = CaptchaStore.generate_key()  # 验证码答案
            image_url = captcha_image_url(hashkey)  # 验证码地址
            captcha = {'hashkey': hashkey, 'image_url': image_url}
            return render(request, "login.html", locals())
        def post(self,request):
            capt=request.POST.get("captcha",None)         #用户提交的验证码
            key=request.POST.get("hashkey",None)          #验证码答案
            if jarge_captcha(capt,key):
                return  HttpResponse("验证码正确")
            else:
                return HttpResponse("验证码错误")

    login.html文件,这里使用 js 动态刷新图形验证码用到了jquery和bootstrap的js,所以,我们提前将jquery和bootstrap放在了static文件夹下。关于如何加载静态文件,传送门——>Django加载静态文件

    {% load static %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
        <script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js'%}"></script>
    </head>
    <body>
        <form action="/" method="post">
            <a href="#" class="captcha">
                <img src="{{ captcha.image_url }}" alt="点击切换" id="id_captcha" >
            </a> <br>
            <input type="text" name="captcha" placeholder="验证码"> <br>
            <input value="{{ captcha.hashkey }}" name="hashkey" type="hidden" id="id_captcha_0">
            <button type="submit" class="btn btn-primary btn-block ">提交</button>
        </form>
    <script>
            <!-- 动态刷新验证码js -->
            $(document).ready(function(){
                $('.captcha').click(function () {
                    $.getJSON("refresh_captcha/", function (result) {
                        $('#id_captcha').attr('src', result['image_url']);
                        $('#id_captcha_0').val(result['hashkey'])
                    });
                });
            });
    </script>
    </body>
    </html>

    参考文章:https://blog.csdn.net/qq_37648632/article/details/83149803

    本文所有代码:https://github.com/xie1997/Django_captcha

  • 相关阅读:
    工厂模式
    Bootstrap 日历
    处理乱码
    Eclipse常用快捷键
    C#_XML与Object转换
    jQuery选择函数
    Bootstrap如何正确引用字体图标
    js上拉加载、下拉刷新的插件
    js通用对象数组冒牌排序
    关于js跨域
  • 原文地址:https://www.cnblogs.com/csnd/p/11807697.html
Copyright © 2011-2022 走看看