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 -- 验证码的主要内容,如果未能解决你的问题,请参考以下文章