First, you need to install a third-party library for captcha, Django-Simple-Captcha, which is an extremely simple but highly customizable Django third-party application for adding captcha images to any Django form.

The installation

  1. Install by PIPdjango-simple-captcha
 pip install django-simple-captcha
Copy the code
  1. addcaptchatosettings.pytheINSTALLED_APPSIn the
 INSTALLED_APPS = [
     ...
     'captcha'
 ]
Copy the code
  1. Generate the data and run the command linepython manage.py migrate
  2. Add url to the projecturls.pyIn the file
 urlpatterns = [
     path('captcha/', include('captcha.urls')),
 ]
Copy the code

Create a Dadmin APP

  1. Create a dadmin APP and add it tosettings.pytheINSTALLED_APPSIn the
 python manage.py startapp dadmin
Copy the code

  1. By creating a forms.py file in dadmin, we inherit the login form that comes with DjangoAuthenticationForm, and extend it!
 # dadmin/forms.py
 
 from django.contrib.auth.forms import AuthenticationForm
 from captcha.fields import CaptchaField

 class DadminAuthenticationForm(AuthenticationForm) :
     captcha = CaptchaField()
Copy the code

  1. Create a templates folder on the same layer as Dadmin and create a dadmin folder inside it. Copy all the code from Django’s default login templates and add a verification code input box under the password box!
 <div class="form-row">
     {{ form.captcha.errors }}
     {{ form.captcha.label_tag }} {{ form.captcha }}
     <input type="hidden" name="next" value="{{ next }}">
   </div>
Copy the code

4. Add the following code to admin.py in dadmin. Here we subclass AdminSite so that we can modify and override any template that django uses for default admin without affecting anything, and inherit all of the admin features and templates!

 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')

Copy the code
  1. Register the site address you just subclassed in your project’s urls.py
 from dadmin.admin import admin_site

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

  1. Terminal startup site
python3 manage.py runserver
Copy the code

Browser to open the site can see the verification code has been added successfully, but it seems that the style is not beautiful, this will leave you to study it, give a train of thought, you can copy capTCHA default verification code template, style rewrite can be!

  1. Click to change the verification code function

Add the following code to the bottom of the login. HTML template, and don’t forget to introduce jquery.js!

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

  <script>
    $('img.captcha').attr("title"."Click to change the captcha.");
    $('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>
Copy the code

This is done, very simple verification code function is completed!

If you are also teaching yourself Python or Django, please keep an eye on me for technical tips and examples on Django and Python!

Next installment: Djangoimplements front – and back-end logins and adds captcha!