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

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 效果