django-admin登录窗口添加验证码功能-(替换原有的login.html)captcha插件

需求:
1:更改django框架的admin登录窗口标题
2:在admin登录窗口中添加验证码功能
3:验证码允许点击更换
步骤如下:
1:安装插件以及在安装列表中添加插件
2:自定义表单forms.py
3:创建login.html文件(复制django内置的login.html文件进行更改)
4:在admin.py文件中进行修改(编写登录窗口的信息)
5:对主项目中的urls.py进行修改
6:登录后台–需要验证码
7:settings.py文件中设置验证码的大小和长度(自定义验证码的规格)

B视频地址

django-admin替换原来的login登录窗口并添加验证码验证功能

1:安装插件以及在安装列表中添加插件

pip install  django-simple-captcha
INSTALLED_APPS = [  
    # 使用多合一有点慢  
    # 'multi_captcha_admin',# 多合一验证码  
    'import_export', # 导出excel插件位置  
    'django.contrib.admin',  
    'django.contrib.auth',  
    'django.contrib.contenttypes',  
    'django.contrib.sessions',  
    'django.contrib.messages',  
    'django.contrib.staticfiles',  
    'app.apps.AppConfig',  
    'userprofile.apps.UserprofileConfig', # user表额外一对一表  
    'store.apps.StoreConfig',  
    'ownorder.apps.OwnorderConfig',  
    'outsourcing.apps.OutsourcingConfig',  
    'captcha',# 验证码  
]

2:自定义表单

在这里插入图片描述

from django.contrib.auth.forms import AuthenticationForm  
from captcha.fields import CaptchaField  
  
  
class AppAuthenticationForm(AuthenticationForm):  
    captcha = CaptchaField()

3:创建login.html文件

在这里插入图片描述

复制django包中自带的login.html文件中的代码到这里新建的login.html文件中

django自带的login.html文件代码如下

{% extends "admin/base_site.html" %}  
{% load i18n static %}  
  
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" href="{% static "admin/css/login.css" %}">  
{{ form.media }}  
{% endblock %}  
  
{% block bodyclass %}{{ block.super }} login{% endblock %}  
  
{% block usertools %}{% endblock %}  
  
{% block nav-global %}{% endblock %}  
  
{% block nav-sidebar %}{% endblock %}  
  
{% block content_title %}{% endblock %}  
  
{% block nav-breadcrumbs %}{% endblock %}  
  
{% block content %}  
{% if form.errors and not form.non_field_errors %}  
<p class="errornote">  
{% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}  
</p>  
{% endif %}  
  
{% if form.non_field_errors %}  
{% for error in form.non_field_errors %}  
<p class="errornote">  
    {{ error }}  
</p>  
{% endfor %}  
{% endif %}  
  
<div id="content-main">  
  
{% if user.is_authenticated %}  
<p class="errornote">  
{% blocktranslate trimmed %}  
    You are authenticated as {{ username }}, but are not authorized to  
    access this page. Would you like to login to a different account?  
{% endblocktranslate %}  
</p>  
{% endif %}  
  
<form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}  
  <div class="form-row">  
    {{ form.username.errors }}  
    {{ form.username.label_tag }} {{ form.username }}  
  </div>  
  <div class="form-row">  
    {{ form.password.errors }}  
    {{ form.password.label_tag }} {{ form.password }}  
    <input type="hidden" name="next" value="{{ next }}">  
  </div>  {% url 'admin_password_reset' as password_reset_url %}  
  {% if password_reset_url %}  
  <div class="password-reset-link">  
    <a href="{{ password_reset_url }}">{% translate 'Forgotten your password or username?' %}</a>  
  </div>  {% endif %}  
  <div class="submit-row">  
    <input type="submit" value="{% translate 'Log in' %}">  
  </div></form>  
  
</div>  
{% endblock %}

修改后
添加验证码块
并且添加点击验证码刷新的功能

{% extends "admin/base_site.html" %}  
{% load i18n static %}  
  
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" href="{% static "admin/css/login.css" %}">  
{{ form.media }}  
{% endblock %}  
  
{% block bodyclass %}{{ block.super }} login{% endblock %}  
  
{% block usertools %}{% endblock %}  
  
{% block nav-global %}{% endblock %}  
  
{% block nav-sidebar %}{% endblock %}  
  
{% block content_title %}{% endblock %}  
  
{% block nav-breadcrumbs %}{% endblock %}  
  
{% block content %}  
{% if form.errors and not form.non_field_errors %}  
<p class="errornote">  
{% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}  
</p>  
{% endif %}  
  
{% if form.non_field_errors %}  
{% for error in form.non_field_errors %}  
<p class="errornote">  
    {{ error }}  
</p>  
{% endfor %}  
{% endif %}  
  
<div id="content-main">  
  
{% if user.is_authenticated %}  
<p class="errornote">  
{% blocktranslate trimmed %}  
    You are authenticated as {{ username }}, but are not authorized to  
    access this page. Would you like to login to a different account?  
{% endblocktranslate %}  
</p>  
{% endif %}  
  
<form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}  
  <div class="form-row">  
    {{ form.username.errors }}  
    {{ form.username.label_tag }} {{ form.username }}  
  </div>  
  <div class="form-row">  
    {{ form.password.errors }}  
    {{ form.password.label_tag }} {{ form.password }}  
    <input type="hidden" name="next" value="{{ next }}">  
  </div>  <div class="form-row">  
    {{ form.captcha.errors }}  
    {{ form.captcha.label_tag }} {{ form.captcha }}  
    <input type="hidden" name="next" value="{{ next }}">  
  </div>  {% url 'admin_password_reset' as password_reset_url %}  
  {% if password_reset_url %}  
  <div class="password-reset-link">  
    <a href="{{ password_reset_url }}">{% translate 'Forgotten your password or username?' %}</a>  
  </div>  {% endif %}  
  <div class="submit-row">  
    <input type="submit" value="{% translate 'Log in' %}">  
  </div>{#添加点击验证码刷新功能#}  
    <script src="{% static '/admin/huadong/jquery-3.6.0.min.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>  
  
</form>  
  
</div>  
{% endblock %}
验证码刷新功能使用到了jquery.js 我把这个放置到了本地,请自行更换其他版本

4在admin.py文件中进行修改
在这里插入图片描述

添加以下代码

# forms中定义的表单 添加了验证码字段  
from .forms import AppAuthenticationForm  
  
class MyAdminSite(admin.AdminSite):  
    # 向django 自带的admin 中使用 自定义的表单  
    login_form = AppAuthenticationForm  
    # 自定义表单的位置  
    login_template = "app/login.html"  
    # 设置后台登陆显示标题--方法1  
    # 登录窗口所使用的显示标头以及网站标题  
    # 浏览器网站窗口显示文字  
    site_title = '业务管理系统'  
    # 登录窗口显示标题文字  
    site_header = '业务管理系统登录'  
    # index_title = '业务管理系统网页标题3'  
    # 添加打开这个管理后台显示的网站标题----窗口标题信息  
    admin.site.site_title = '业务管理系统网页标题'  
    # 添加打开这个管理后台显示的登录窗口网站标题  
    admin.site.site_header = '业务管理系统'  
  
admin_site = MyAdminSite(name="management")
admin_site
对 AdminSite 类进行了子分类,以便我们可以随意修改和覆盖 django 默认管理员的任何模板,而不会影响默认管理员的任何内容,并继承 admin 的所有函数和模板

5对主项目中的urls.py进行修改

在这里插入图片描述

from django.contrib import admin  
from django.urls import path, include  
  
# 添加自定义的登录  
from app.admin import AppAuthenticationForm  
  
admin.site.login_form = AppAuthenticationForm  
admin.site.login_template = "app/login.html"  
  
# admin.autodiscover()  
# 在 Django 中,是一个函数,用于自动发现和注册 Django 项目中所有已安装应用的管理配置。此函数通常在项目的urls.py文件中调用。  
  
urlpatterns = [  
    path('admin/', admin.site.urls),  
    path('captcha/', include('captcha.urls')),  
]

6登录后台–需要验证码

http://127.0.0.1:8000/admin/login/?next=/admin/

在这里插入图片描述

7:settings.py文件中设置验证码的大小和长度

# Font size of the captcha text
CAPTCHA_FONT_SIZE = 40

# Length of the captcha text (number of characters)
CAPTCHA_LENGTH = 12

# Number of attempts a user can try before captcha protection is enforced
CAPTCHA_MAX_ATTEMPTS = 3

# Timeout (in minutes) after which the captcha session expires
CAPTCHA_TIMEOUT = 5

# Image dimensions of the captcha image
CAPTCHA_IMAGE_SIZE = (200, 100)

# Custom image size for captcha (tuple of width and height)
# If set, overrides CAPTCHA_IMAGE_SIZE
# CAPTCHA_IMAGE_SIZE = (width, height)

# Length of the generated audio captcha
CAPTCHA_AUDIO_LENGTH = 5

# Case sensitivity of the captcha text
CAPTCHA_CASE_SENSITIVE = False

# Characters allowed in the captcha text
CAPTCHA_ALLOWED_CHARS = 'abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789'

# Timeout for the cache (in seconds) for storing captcha
CAPTCHA_TIMEOUT = 5 * 60  # 5 minutes

# Directory where temporary captcha images/audio are stored
CAPTCHA_OUTPUT_FORMAT = '%(time)s%(part)s.png'
CAPTCHA_IMAGE_DIR = 'captcha'

# Custom directory for storing captcha images/audio
# CAPTCHA_IMAGE_DIR = 'custom_captcha_dir'

# Timeout for the cache (in seconds) for storing captcha
CAPTCHA_TIMEOUT = 5 * 60  # 5 minutes

# Number of seconds for which the captcha cookie is valid
CAPTCHA_COOKIE_TIMEOUT = CAPTCHA_TIMEOUT

# Length of the hash used for storing the captcha image/audio in the cache
CAPTCHA_CACHE_KEY_LENGTH = 16

# The challenge text for the captcha audio
CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.math_challenge'

# Function to generate captcha audio
CAPTCHA_AUDIO_CHALLENGE_FUNCT = 'captcha.helpers.math_audio_challenge'

# Custom challenge function for captcha text
# CAPTCHA_CHALLENGE_FUNCT = 'myapp.utils.my_challenge_function'

Now that I've added the following code to my [django] project, please check it for me, please say what is added and what is missing, and where is it used?
froms.py code:
from django.contrib.auth.forms import AuthenticationForm  
from captcha.fields import CaptchaField  
  
  
class AppAuthenticationForm(AuthenticationForm):  
    captcha = CaptchaField()

admin.py code:
from django.contrib import admin  
  

from .forms import AppAuthenticationForm  
  
class MyAdminSite(admin.AdminSite):  
    login_form = AppAuthenticationForm  
    login_template = "weidanyewu/login.html"  
    site_title = 'sy'  
    site_header = 'sy'  
    admin.site.site_title = 'sy'  
    admin.site.site_header = 'sy'  
admin_site = MyAdminSite(name="management")

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/425098.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

中国电子学会2020年6月份青少年软件编程Sc ratch图形化等级考试试卷四级真题。

第 1 题 【 单选题 】 1.执行下面程序&#xff0c;输入4和7后&#xff0c;角色说出的内容是&#xff1f; A&#xff1a;4&#xff0c;7 B&#xff1a;7&#xff0c;7 C&#xff1a;7&#xff0c;4 D&#xff1a;4&#xff0c;4 2.执行下面程序&#xff0c;输出是&#xff…

备战蓝桥杯Day22 - 计数排序

计数排序问题描述 对列表进行排序&#xff0c;已知列表中的数范围都在0-100之间。设计时间复杂度为O(n)的算法。 比如列表中有一串数字&#xff0c;2 5 3 1 6 3 2 1 &#xff0c;需要将他们按照从小到大的次序排列&#xff0c;得到1 1 2 2 3 3 5 6 的结果。那么此时计数排序是…

每天一道leetcode:14.最长公共前缀(简单)

⭐今日份题目 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 ""。 示例1 输入&#xff1a;strs ["flower","flow","flight"] 输出&#xff1a;"fl" 示例2 输入&#…

制作镜像与配置推送阿里云仓库

一、制作jdk镜像 1.1、Alpine linux简介 Alpine Linux是一个轻量级的Linux发行版&#xff0c;专注于安全、简洁和高效。它采用了musl libc和BusyBox&#xff0c;使得系统资源占用较少&#xff0c;启动速度较快。 Alpine Linux也提供了一个简单的包管理工具APK&#xff0c;(注…

MySQL:索引的优化方法

索引是帮助存储引擎快速获取数据的一种数据结构&#xff0c;形象的说就是索引是数据的目录。 索引创建的时机&#xff1a; 索引并不是越多越好的&#xff0c;虽然他再查询时会提高效率&#xff0c;但是保存索引和维护索引也需要一定的空间和时间成本的。 不创建索引&#xff1a…

消防主机报故障时发出故障及原因及解决办法!

本文以青鸟消防JBF-11SF为例。 其他型号或品牌的消防主机也可参考。 开机前&#xff0c;必须先测量系统接线的绝缘电阻&#xff0c;确保各绝缘电阻满足以下要求&#xff1a; 1&#xff09;空载时各电路信号线之间的绝缘值应大于5K欧姆。 2&#xff09;正常天气条件下&#x…

10 计算机结构

冯诺依曼体系结构 冯诺依曼体系结构&#xff0c;也被称为普林斯顿结构&#xff0c;是一种计算机架构&#xff0c;其核心特点包括将程序指令存储和数据存储合并在一起的存储器结构&#xff0c;程序指令和数据的宽度相同&#xff0c;通常都是16位或32位 我们常见的计算机,笔记本…

C语言第三十四弹---动态内存管理(下)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 动态内存管理 1、动态内存经典笔试题分析 1.1、题目1 1.2、题目2 1.3、题目3 1.4、题目4 2、柔性数组 2.1、柔性数组的特点 2.2、柔性数组的使用 2.3、…

68-解构赋值,迭代器,生成器函数,Symbol

1.解构赋值(针对数组array&#xff0c;字符串String及对象object以) 结构赋值是一种特殊的语法&#xff0c;通过将各种结构中的元素复制到变量中达到"解构"的目的&#xff0c;但是数组本身没有改变 1.1解构单层数组 <script>let arr [1,2,3,4,5];//获取数组…

【微服务】微服务中常用认证加密方案总结

目录 一、前言 二、登录认证安全问题 3.1 认证方式选择 三、常用的加密方案 3.1 MD5加密算法 3.1.1 md5特点 3.1.2 md5原理 3.1.3 md5使用场景 3.2 AES加密算法 3.2.1 AES简介 3.2.2 AES加解原理 3.2.3 AES算法优缺点 3.2.4 AES算法使用场景 3.3 RSA加密算法 3.3…

【每日一题】找到字符串中所有字母异位词

目录 题目&#xff1a;思路&#xff1a;暴力枚举&#xff1a;滑动窗口&#xff1a; 代码实现&#xff1a;一些优化&#xff1a;代码实现&#xff1a; 题目&#xff1a; 找到字符串中所有字母异位词 思路&#xff1a; 暴力枚举&#xff1a; 对于有关子串的题目我们使用暴力枚…

1.2 在卷积神经网络中,如何计算各层感受野的大小

1.2 在卷积神经网络中&#xff0c;如何计算各层感受野的大小 分析与解答&#xff1a; 在卷积神经网络中&#xff0c;由于卷积的局部连接性&#xff0c;输出特征图上的每个节点的取值&#xff0c;是由卷积核在输入特征图对应位置的局部区域内进行卷积而得到的&#xff0c;因此这…

Sora惊艳出世,AI能否给人类带来新的“视界”?

2月16日&#xff0c;OpenAI公司公布了其首个文生视频大模型Sora&#xff0c;同时展示了多个由Sora生成的最长时间达一分钟的视频&#xff0c;引起科技圈震动。 钢铁侠马斯克对其发出“人类愿赌服输”的感叹&#xff0c;360董事长周鸿祎也作出“Sora意味着AGI实现将从10年缩短到…

【探索Linux】—— 强大的命令行工具 P.24(网络基础)

阅读导航 引言一、计算机网络背景1. 网络发展历史 二、认识 "协议"1. 网络协议概念2. 网络协议初识&#xff08;1&#xff09;协议分层&#xff08;2&#xff09;OSI参考模型&#xff08;Open Systems Interconnection Reference Model&#xff09;&#xff08;3&…

k8s-kubeapps图形化管理 21

结合harbor仓库 由于kubeapps不读取hosts解析&#xff0c;因此需要添加本地仓库域名解析&#xff08;dns解析&#xff09; 更改context为全局模式 添加repo仓库 复制ca证书 添加成功 图形化部署 更新部署应用版本 再次进行部署 上传nginx 每隔十分钟会自动进行刷新 在本地仓库…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的教室人员检测与计数(Python+PySide6界面+训练代码)

摘要&#xff1a;开发教室人员检测与计数系统对于优化教学资源和提升教学效率具有重要意义。本篇博客详细介绍了如何利用深度学习构建此系统&#xff0c;并提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并对比了YOLOv7、YOLOv6、YOLOv5的性能&#xff0c;展示…

vue2本地开发环境正常,生产环境下this.$router.push({ name: ‘login‘ })不跳转

如果在Vue.js 2中在本地开发环境下正常运行,但在生产环境下使用​​this.$router.push({ name: login })​​不起作用,可能有几个原因需要检查和解决: 路由配置问题: 确保你的路由配置正确,特别是确保在生产环境中,路由的配置和本地开发环境一致。检查是否正确设置了name…

以目标检测和分类任务为例理解One-Hot Code

在目标检测和分类任务中&#xff0c;每一个类别都需要一个编码来表示&#xff0c;同时&#xff0c;这个编码会用来计算网络的loss。比如有猫&#xff0c;狗&#xff0c;猪三种动物&#xff0c;这三种动物相互独立&#xff0c;在分类中&#xff0c;将其中任意一种分类为其他都同…

【大数据Hive】hive 多字段分隔符使用详解

目录 一、前言 二、hive默认分隔符规则以及限制 2.1 正常示例&#xff1a;单字节分隔符数据加载示例 2.2 特殊格式的文本数据&#xff0c;分隔符为特殊字符 2.2.1 文本数据的字段中包含了分隔符 三、突破默认限制规则约束 3.1 数据加载不匹配情况 1 3.2 数据加载不匹配…

力扣 第 125 场双周赛 解题报告 | 珂学家 | 树形DP + 组合数学

前言 整体评价 T4感觉有简单的方法&#xff0c;无奈树形DP一条路上走到黑了&#xff0c;这场还是有难度的。 T1. 超过阈值的最少操作数 I 思路: 模拟 class Solution {public int minOperations(int[] nums, int k) {return (int)Arrays.stream(nums).filter(x -> x <…