栏目分类:
子分类:
返回
终身学习网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
终身学习网 > IT > 软件开发 > 后端开发 > Python

Django admin登录页面验证码(2):滑动验证码和点选验证码

Python 更新时间:发布时间: 百科书网 趣学号
1.环境配置

  django项目创建,verify.js插件引入、静态文件设置和自定义Django admin登录模板参见:Django admin登录页面验证码(1):普通字符和算数验证码_anbuqi的博客-CSDN博客

2.滑动验证码 2.1 常见滑动验证码

常见的滑动验证码有比较简单的滑块式:

还有更复杂一些的滑动拼图式:

2.2 修改verify.js源码 (1)修改img_panel的背景图片路径

verify.js源码中的图片路径使用了绝对路径,为了能使用外部图片,在源码中找到Slide.prototype,修改loadDom中的以下部分:

修改img_panel的背景图片路径:

 (2)修改滑动拼图块背景图片路径

找到randSet和refresh方法:

 删除所有css 样式中background-image中的images前缀:

 2.3 填充验证码到login.html中
{#继承基础登录模板#}
{% extends "admin/login_base.html" %}
{% load i18n static %}


{#覆盖基础登录模板中的验证码块verify_code#}
{% block verify_code %}
    
        
        
    
    
{% endblock %}
2.4 效果 (1)普通滑块

(2) 滑动拼图

3.点选验证码 3.1 修改verify.js源码

在Points.prototype中找到refresh方法:

修改img.src,去除images前缀: 

 

 3.2 填充验证码到login.html中
{#继承基础登录模板#}
{% extends "admin/login_base.html" %}
{% load i18n static %}


{#覆盖基础登录模板中的验证码块verify_code#}
{% block verify_code %}
    
        
        
    
    
{% endblock %}
3.3 效果

 

转载请注明:文章转载自 www.051e.com
本文地址:http://www.051e.com/it/293645.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 ©2023-2025 051e.com

ICP备案号:京ICP备12030808号