Django学习15 -- 验证码

Posted Rolei_zl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django学习15 -- 验证码相关的知识,希望对你有一定的参考价值。

1. 验证码

    验证码(CAPTCHA,Completely Automated Public Turing test to tell Computers and Humans Apart),全自动区分计算机和人类的图灵测试的简称,一种区分用户是计算机还是人的公共全自动程序。防止恶意破解密码、刷票、论坛灌水、恶意注册、网络爬虫,有效防止黑客对某一个特定注册用户、用特定程序暴力破解方式进行不断的登录尝试。 -- 百度百科
    验证码通常使用一些线条和一些不规则的字符随机组成。常见验证码:

  • 手机短信
  • 随机数字+字母
  • 随机汉字
  • 问题计算
  • 图形图像

2. 使用 django-simple-captcha

  • 安装 django-simple-captcha
# install captcha
pip install django-simple-captcha -i https://pypi.tuna.tsinghua.edu.cn/simple

# django_multi_captcha_admin
pip install django_multi_captcha_admin -i https://pypi.tuna.tsinghua.edu.cn/simple

# install Pillow, image libraries 
pip install Pillow -i https://pypi.tuna.tsinghua.edu.cn/simple

# install django-ranged-response
pip install django-ranged-response -i https://pypi.tuna.tsinghua.edu.cn/simple
  • 注册,captcha 、multi_captcha_admin作为app注册至 settings.py 
# settings.py
INSTALLED_APPS = [
    ......
    'multi_captcha_admin'    # multi_captcha_admin 在 django.contrib.admin 前
    ......
    'django.contrib.admin'
    'captcha',
]
  •  添加路由,将 captcha 作为访问地址添加到 urls.py
from django.urls import path, include

urlpatterns = [
    ......
    path('captcha/',include('captcha.urls')),  # 生成验证码
]
  • 创建验证码数据表,并同步数据
# 同步captcha数据表
python manage.py migrate

# 生成表 captcha_captchastore
>>> 
  Applying captcha.0001_initial... OK
  Applying captcha.0002_alter_captchastore_id... OK
  • 修改 login.html 页面
    将 %python_install_path%\\Lib\\site-packages\\django\\contrib\\admin\\templates\\admin\\login.html 拷贝至 Application 的 templates目录下,并扩展文件
## 添加 captcha 模块,用于在 username 和 password之后显示验证,默认4位
......
  <div class="form-row">
     form.captcha.errors 
     form.captcha.label_tag   # 验证码标签,默认显示为 captcha
     form.captcha
    <input type="hidden" name="next" value=" next ">
  </div>
......
  • 修改 captcha 格式

    %python_path%\\Lib\\site-packages\\captcha\\conf\\settings.py    或  %project_path%\\venv\\Lib\\site-packages\\captcha\\conf\\settings.py
    同时可以修改 captcha\\templates\\captcha 下的 HTML 文件,更改页面显示格式
    # 设置验证码字符长度
    CAPTCHA_LENGTH = int(getattr(settings, "CAPTCHA_LENGTH", 5))  # Chars
    
    # 设置验证码 输入 与 验证码 显示顺序
    CAPTCHA_OUTPUT_FORMAT = getattr(settings, "CAPTCHA_OUTPUT_FORMAT", None)
    -->
    CAPTCHA_OUTPUT_FORMAT = getattr(settings, "CAPTCHA_OUTPUT_FORMAT", u'%(text_field)s %(hidden_field)s %(image)s')
    
    # 超时时间
    CAPTCHA_TIMEOUT = getattr(settings, "CAPTCHA_TIMEOUT", 1)  # Minutes
  • 更新验证码
    - 刷新页面
    - 手动点击更新验证码
      <script type="text/javascript" charset="utf8" src="/static/js/jquery-3.4.1.min.js"> 
      </script>  # jquery path
      <script>
            $('.captcha').click(function ()  # click function
                $.getJSON("/captcha/refresh/", function (result) 
                    $('.captcha').attr('src',result['image_url']);
                    $('#id_captcha_0').val(result['key'])
                );
            );
      </script>

  •  注意项

    - 使用空的上下文重定向到admin的login界面,验证码无法正式显示
    urlpatterns = [
        # path('admin/', admin.site.urls),
        path('', admin.site.urls),   # 任意访问重定向导致验证码无法正确显示
    ]
    
    # 通过指定具体的上下文使验证码正确显示
    urlpatterns = [
        path('admin/', admin.site.urls), 
        path('login/', admin.site.urls),
        # path('', admin.site.urls),   # 任意访问重定向导致验证码无法正确显示
    ]

3. 使用 verify.js

    jQuery 验证码插件 verify

  • 下载 verify.js 
     
     GitHub - katie1221/js-plugin: js插件
  • 安装

    - verify.js 放入 static/js 目录中(按个人系统设置)
    - verify.css 放入 static/css 目录中
  • 引入 verify.js (样式,脚本)
    <link rel="stylesheet" href="% static "/js/verify.js/css/verify.css" %">
    <script src="% static "/js/verify.js/js/verify.js"%"></script>
    #<script src="/static/js/verify.js/js/verify.min.js"></script>#
  • 使用 verify.js 设置验证码(具体参考 verify.js 源码)

    - 使用字符 或 算术验证
        <div class="form-row">
            <label class="required">验证码:</label>
            <div id="verify1"></div>
        </div>
    
        <script type="text/javascript">
            $('#verify1').codeVerify(
                type: 2,   //1 普通验证码; 非1 算法验证码
            	figure : 100,	//位数,仅在type=2时生效
            	arith : 0,	//算法,支持加减乘,0为随机,仅在type=2时生效
            	width : '350px',
    		    height : '30px',
                fontSize: '20px',
                codeLength: 6,
                btnId: 'check-btn',
    
                ready: function () 
                ,
                success: function () 
                    alert('验证成功');
                ,
                error: function () 
                    alert('验证失败');
                
            );
        </script>

    -  划动块验证

        <script type="text/javascript">
            $('#verify2').slideVerify(
                type: 2,		// 1 普通滑动; 非1 图片滑动
            	mode : 'fixed',	//弹出式pop(鼠标移至拖动条时弹出图片),固定fixed
                vOffset: 5,	//偏移量
                vSpace: 5,	//间隔
                explain : '向右滑动完成验证',
                imgUrl : '% static "/img/" %',
                imgName : ['1.jpg', '2.jpg'],
                imgSize : 
    	        	width: '100%',
    	        	height: '200px',
    	        ,
    	        blockSize : 
    	        	width: '50px',
    	        	height: '50px',
    	        ,
    	        barSize : 
    	        	width : '100%',
    	        	height : '40px',
    	        ,
    
                ready: function () 
                ,
                success: function () 
                    alert('验证成功');
                ,
                error: function () 
                    alert('验证失败');
                
            );
        </script>

    - 点位验证

        <div class="form-row">
            <label class="required">验证码:</label>
            <div id="verify3"></div>
        </div>
    
        <script type="text/javascript">
    		$('#verify3').pointsVerify(
                mode : 'fixed',	//弹出式pop,固定fixed
    			defaultNum : 4,	//默认文字数量
    			checkNum : 4,	//校对文字数量
    			vSpace : 5,	//间隔
                imgUrl : '% static '/img/'%',
                imgName : ['1.jpg', '2.jpg'],
    			imgSize : 
    				width: '100%',
    				height: '200px',
    			,
    			barSize : 
    				width : '100%',
    				height : '40px',
    			,
    			ready : function() 
    			,
    			success : function() 
    				alert('验证成功);
    			,
    			error : function() 
                    alert('验证失败');
    			
    		);
        </script>

    参考资料:

  • django-multi-captcha-admin · PyPI
  • django-captcha-admin · PyPI
  • Using django-simple-captcha — Django Simple Captcha 0.5.15 documentation
  • verify.js 源码

以上是关于Django学习15 -- 验证码的主要内容,如果未能解决你的问题,请参考以下文章

Django--短信验证码

Django 发送手机验证码

django之集成阿里云通信(发送手机短信验证码)

django01项目_异步发送短信验证码_异步方案RabbitMQ和Celery

django-发送短信流程介绍

springboot整合redis之发送手机验证码注册登录