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

本文主要是介绍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")

这篇关于django-admin登录窗口添加验证码功能-(替换原有的login.html)captcha插件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/757424

相关文章

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面,macOS26采用了全新的玻璃质感视觉风格,应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日(6 月 13 日)发布博文,报道称在 macOS 26 Tahoe 中

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》:本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结:Lambda方法Service接口基本用法MyBATisP

Windows的CMD窗口如何查看并杀死nginx进程

《Windows的CMD窗口如何查看并杀死nginx进程》:本文主要介绍Windows的CMD窗口如何查看并杀死nginx进程问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录Windows的CMD窗口查看并杀死nginx进程开启nginx查看nginx进程停止nginx服务

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

CnPlugin是PL/SQL Developer工具插件使用教程

《CnPlugin是PL/SQLDeveloper工具插件使用教程》:本文主要介绍CnPlugin是PL/SQLDeveloper工具插件使用教程,具有很好的参考价值,希望对大家有所帮助,如有错... 目录PL/SQL Developer工具插件使用安装拷贝文件配置总结PL/SQL Developer工具插

Java反射实现多属性去重与分组功能

《Java反射实现多属性去重与分组功能》在Java开发中,​​List是一种非常常用的数据结构,通常我们会遇到这样的问题:如何处理​​List​​​中的相同字段?无论是去重还是分组,合理的操作可以提高... 目录一、开发环境与基础组件准备1.环境配置:2. 代码结构说明:二、基础反射工具:BeanUtils