Django admin login page verification code (2): slide verification code and click verification code

1. Environment configuration

  django project creation, import of verify.js plug-in, static file settings and custom Django admin login template refer to: Django admin login page verification code (1): ordinary character and arithmetic verification code_anbuqi's blog-CSDN blog

2. Slide verification code

2.1 Common sliding verification codes

The common sliding verification code has a relatively simple slider type:

There are also more complex sliding puzzles:

2.2 Modify verify.js source code

(1) Modify the background image path of img_panel

The image path in the verify.js source code uses an absolute path. In order to use external images, find Slide.prototype in the source code and modify the following parts in loadDom :

Modify the background image path of img_panel :

 (2) Modify the path of the background picture of the sliding puzzle piece

Find the randSet and refresh methods:

 Remove the images prefix in background-image in all css styles :

 2.3 Fill the verification code into 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').slideVerify({
            type: 1,		//类型,1为普通滑块，2为滑动拼图
            vOffset: 5,	//误差量，根据需求自行调整
            vSpace: 5,	//间隔
            imgName: ['{% static "image/1.jpg" %}', '{% static "image/2.jpg" %}'],
            imgSize: {
                width: '100%',
                height: '200px',
            },
            blockSize: {
                width: '40px',
                height: '40px',
            },
            barSize: {
                width: '100%',
                height: '40px',
            },
            ready: function () {
            },
            success: function () {
                alert('验证成功，添加你自己的代码！');
                //......后续操作
            },
            error: function () {
                //		        	alert('验证失败！');
            }

        });
    </script>
{% endblock %}

2.4 Effect

(1) Ordinary slider

(2) sliding puzzle

3. Click the verification code

3.1 Modify verify.js source code

Find the refresh method in Points.prototype :

Modify img.src to remove the images prefix: 

 

 3.2 Fill the verification code into 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').pointsVerify({
			defaultNum : 4,	//默认的文字数量
			checkNum : 4,	//校对的文字数量
			vSpace : 5,	//间隔
			imgName : ['{% static 'image/1.jpg' %}', '{% static 'image/2.jpg' %}'],
			imgSize : {
				width: '99%',
				height: '200px',
			},
			barSize : {
				width : '99%',
				height : '40px',
			},
			ready : function() {
			},
			success : function() {
				alert('验证成功，添加你自己的代码！');
				//......后续操作
			},
			error : function() {
	//		        	alert('验证失败！');
			}

		});

    </script>
{% endblock %}

3.3 Effect