快速实现Django admin登录验证码功能

轻编程

于 2021-08-08 08:24:50 发布

阅读量1k

点赞数 1

分类专栏： Django python 文章标签： Django 验证码登录验证 django-simple-captcha 前端分离

本文链接：https://blog.csdn.net/weixin_41861301/article/details/119506259

版权

Django 同时被 2 个专栏收录

27 篇文章 7 订阅

订阅专栏

python

23 篇文章 0 订阅

订阅专栏

快速实现Django admin登录增加验证码验证功能

首先，需要安装一个验证码的第三方库-django-simple-captcha，这是一个极其简单但可高度定制的 Django 第三方应用程序，用于将验证码图像添加到任何 Django 表单。

_images/captcha3.png

安装

通过pip安装django-simple-captcha

pip install django-simple-captcha

添加captcha到settings.py的INSTALLED_APPS中

INSTALLED_APPS = [
    ...
    'captcha'
]

生成数据，命令行运行python manage.py migrate
添加url到项目的urls.py文件中

urlpatterns = [
    path('captcha/', include('captcha.urls')),
]

创建一个dadmin的APP

创建一个dadmin的APP,并将其添加到settings.py的INSTALLED_APPS中

python manage.py startapp dadmin

在这里插入图片描述

在dadmin中创建一个forms.py的文件，我们继承django自带的登录表单AuthenticationForm,并对其进行扩展！

# dadmin/forms.py

from django.contrib.auth.forms import AuthenticationForm
from captcha.fields import CaptchaField

class DadminAuthenticationForm(AuthenticationForm):
    captcha = CaptchaField()

在这里插入图片描述

在dadmin的同级创建一个templates的文件夹，并在其内部创建一个dadmin的文件夹，将django默认的登录模板中的代码全部拷贝过来，并在密码框下添加验证码的输入框！

<div class="form-row">
    {{ form.captcha.errors }}
    {{ form.captcha.label_tag }} {{ form.captcha }}
    <input type="hidden" name="next" value="{{ next }}">
  </div>

在这里插入图片描述

在dadmin中的admin.py中添加如下代码，这里我们子类化了AdminSite类，这样我们就可以随意修改和覆盖django 默认admin的任何模板，并且不会影响默认admin的任何东西，还可以继承admin的所有功能及模板！

from django.contrib import admin

# Register your models here.
from .forms import DadminAuthenticationForm


class DadminSite(admin.AdminSite):
    login_form = DadminAuthenticationForm
    login_template = "dadmin/login.html"

admin_site = DadminSite(name='dadmin')

在项目的urls.py中注册刚才子类化的站点地址

from dadmin.admin import admin_site

urlpatterns = [
    path('admin/', admin.site.urls),
    path('myadmin/', admin_site.urls),
    path('captcha/', include('captcha.urls')),
]

在这里插入图片描述

终端启动站点

python3 manage.py runserver

在这里插入图片描述

浏览器打开站点可以看到验证码已经添加成功了，但似乎样式不美观，这个就留给大家自己去研究吧，给个思路可以拷贝captcha默认的验证码模板，样式重写即可！

实现点击更换验证码功能

将如下代码加入到login.html模板的底部即可，别忘了引入Jquery.js哦！

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

  <script>
    $('img.captcha').attr("title", "点击更换验证码");
    $('img.captcha').click(function() {
        $.getJSON('/captcha/refresh/',function(json) {
            // This should update your captcha image src and captcha hidden input
            console.log(json);
            $("img.captcha").attr("src",json.image_url);
            $("#id_captcha_0").val(json.key);
        });
        return false;
    });
  </script>