快速实现Django admin登陆增长验证码验证功能

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

安装

1. 经过pip安装django-simple-captcha

 pip install django-simple-captcha
复制代码

2. 添加captcha到settings.py的INSTALLED_APPS中

 INSTALLED_APPS = [
     ...
     'captcha'
 ]
复制代码

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

 urlpatterns = [
     path('captcha/', include('captcha.urls')),
 ]
复制代码

建立一个dadmin的APP

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

 python manage.py startapp dadmin
复制代码

2. 在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()
复制代码

3. 在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>
复制代码

4. 在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')

复制代码

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

 from dadmin.admin import admin_site

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

6. 终端启动站点

python3 manage.py runserver
复制代码

浏览器打开站点能够看到验证码已经添加成功了，但彷佛样式不美观，这个就留给你们本身去研究吧，给个思路,能够拷贝captcha默认的验证码模板，样式重写便可！

7. 实现点击更换验证码功能

将以下代码加入到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>
复制代码

到此大功告成，很简单的验证码功能就完成了！

若是你也在自学Python或Django，那就请关注我吧，会不断输送关于django及python的技术干货，以及小案例！

下篇预告：django实现先后端分离登陆功能，并加入验证码功能！