Djangoadmin登录页⾯验证码（1）：普通字符和算术验证码1.前⾔
django的登录界⾯默认只有⽤户名和密码输⼊框，没有额外的安全防护，如果在⽣产环境中不加登录验证码直接使⽤，是⾮常危险的，因为攻击者可以⽤特定程序不断的进⾏登录尝试，直⾄得出正确的登录密码，所以必须加上登录验证码，提⾼⽹站攻击成本。
2. ⾃定义登录页⾯
2.1 创建django项⽬
使⽤Pycharm创建Django项⽬，项⽬结构如下：
创建完成后记得在manage.py所在⽬录运⾏：
python manage.py migrate
2.2 下载插件
⾸先下载verify.js前端登录验证插件：
解压得到以下⽬录结构：
2.3 复制djano登录页⾯模板
在templates(manage.py同级⽬录下)创建admin⽬录：
使⽤以下命令查看django包位置：
python -c "import django; print(django.__path__)
然后在这个⽬录下到contrib\admin\templates\admin\login.html，将其复制到templates/admin下。
2.4 引⼊验证插件
⾸先在manage.py同级⽬录下创建static/admin⽂件夹，⽤来保存与管理有关的全局静态⽂件，然后这个⽂件夹下创建三个⽬录:js、css和image。
在解压后的插件⽂件夹中到verify.css，将其复制到刚刚创建的static/admin/css下。然后将插件⽂件夹js⽂件夹下的所有js⽂件复制到static/admin/js下。将两张⽰例图⽚复制到static/admin/image下：
修改setttings中的静态⽂件设置：
STATICFILES_DIRS = [
BASE_DIR / "static",
"static/admin"
]
这样插件可以通过下⾯的⽅式引⼊：
<link rel="stylesheet" href="{% static "css/verify.css"%}">
<script type="text/javascript" src="{% static "js/jquery-1.11.0.min.js"%}"></script>
<script type="text/javascript" src="{% static "js/verify.js" %}"></script>
3.⾃定义login模板
为了能灵活使⽤不同的验证码，这⾥使⽤Django的模板继承(参见)，定义⼀个登录⾻架模板，把验证码抽象为⼀个块，从⽽实现灵活替换。
3.1 定义登录⾻架模板
打开之前复制的login.html，到如图所⽰位置，添加⼀个verify_code块：
然后覆盖基础admin模板的extrahead块，引⼊Verify.js插件：
然后将这个模板的名字改为login_base.html，作为登录⾻架模板：
3.2 添加验证码
在templates/admin⽬录下新建⼀个login.html模板，作为真正的页⾯登录模板：
在这个模板中覆盖我们之前定义的verify_code块：
login.html
{#继承基础登录模板#}
{% extends "admin/login_base.html" %}
{% load i18n static %}
{#覆盖基础登录模板中的验证码块verify_code#}
{% block verify_code %}
<div class="form-row">
<label class="required">验证码:</label>
<div id="mpanel2"></div>
</div>
<script type="text/javascript">
$('#mpanel2').codeVerify({
//1为普通字符验证码，2为算数验证码
type: 1,
fontSize: '30px',
codeLength: 6,
btnId: 'check-btn',
ready: function () {
},
success: function () {
alert('验证匹配！');
},
error: function () {
alert('验证码不匹配！');
}
});
django登录注册功能</script>
{% endblock %}
效果
发现界⾯样式有错乱的地⽅，修改打开verify.js，到：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。