登录页增加验证码功能十二点科技

效果预览

安装扩展

主要使用了django-multi_captcha_admin和django-simple-captcha,使用pip安装:

pip django-simple-captcha
pip django-multi_captcha_admin

修改代码

setting.py

增加:multi_captcha_admin

INSTALLED_APPS = [
    'simpleui',
    'multi_captcha_admin',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',    
]

验证码配置

# 验证码配置
MULTI_CAPTCHA_ADMIN = {
    'engine': 'simple-captcha',
}
# 验证码图片大小
CAPTCHA_IMAGE_SIZE = (78, 35)
# 字符个数
CAPTCHA_LENGTH = 4   
# 超时
CAPTCHA_TIMEOUT = 1

url.py

from django.contrib import admin
from django.urls import path,include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('captcha/', include('captcha.urls')),
]

login.html

<!-- 在密码显示框下面配置显示验证码 -->
<div class="simpleui-input-inline">
                <el-input prefix-icon="fas fa-lock" type="password" v-model="password" name="password"
                    @keyup.enter.native="login()" placeholder="{% trans 'password' %}" show-password></el-input>
</div>
<div>
                {{ form.captcha }}
</div>

由于原生的样式比较难看,我们增加样式配置

<style type="text/css">
        #id_captcha_1{
            position: absolute;
            margin:0 0 0 85px; /*上右下左*/
            width: 265px;
            font-size: inherit;
            -webkit-appearance: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            box-sizing: border-box;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            text-align: center;
        }
    </style>