Quickly implement Django admin login to add authentication code

First, you need to install a third-party library for Authentication Codes, django-simple-captcha, which is a very simple but highly customizable third-party application for adding Authentication Code images to any Django form.

install

1. Install django-simple-captcha via pip

pip install django-simple-captcha

1. Add captcha to settings. INSTALLED_of PY In APPS

INSTALLED_APPS = [
    ...
    'captcha'
]

1. Generate data and run Python management from the command line. Py migrate
2. Add URLs to the project url s. Py file

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

Create a dadmin PPP

1. Create a dadmin APP and add it to settings. INSTALLED_of PY In APPS

python manage.py startapp dadmin

1. Create a forms in dadmin. Py file, we inherit and extend the login form AuthenticationForm that comes with django!

# dadmin/forms.py

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

class DadminAuthenticationForm(AuthenticationForm):
    captcha = CaptchaField()

1. Create a folder of templates at the same level as dadmin, create a folder of dadmin inside, copy all the code from the django default login template, and add an input box of authentication code 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>

1. Admin in dadmin. Py adds the following code, where we subclassify the AdminSite class so that we can modify and override any template of the django default admin at will, without affecting anything of the default admin, and inherit all functions and templates of 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')

1. URLs in the project. Register the site address just subclassified in PY

from dadmin.admin import admin_site

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

1. Terminal Start Site

python3 manage.py runserver

Browser opens the site to see that the verification code has been added successfully, but it seems that the style is not beautiful. Let's leave it to everyone to study. For a thought, you can copy the captcha default verification code template, style rewrite is enough!

1. Implement Click-to-Change Authentication Code

Add the following code to login. At the bottom of the HTML template, don't forget to introduce Jquery.js oh!

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

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

With this success, the simple verification code function is complete!

If you're also learning Python or Django on your own, pay attention to me, and you'll keep delivering dried technology and small cases about Django and python!

Next Preview: django implements front-end and back-end separate login function, and adds authentication code function!