This article is participating in Python Theme Month. See the link for details

The problem

Django uses the SimpleUI theme for its ugly backend administration. To ensure background security, you need to add a login verification code. There are some scattered tutorials on the Internet, which are very inconvenient to use. The idea is to make this feature a reusable Django app for future use. Open source, also convenient for everyone to use.

results

Django-simpleui-captcha is a django admin login verification plugin.

interface

The installation

pip install django-simpleui-captcha
Copy the code

Quick start

1. Add “simpleUI_captcha” to the INSTALLED_APPS setting, first

INSTALLED_APPS = [
    "simpleui_captcha"."simpleui". ]Copy the code

2. Addsimpleui_captcha 的 urlTo your projecturls.py: :

path('simpleui_captcha/', include('simpleui_captcha.urls')),
Copy the code

3. Runpython manage.py migrateMigrate the captcha model

Open source process

The name

Django-simpleui-captcha web framework based on Django-SimpleUi-Captcha web framework based on Django-SimpleUi-CaptCHA Web framework based on Django-SimpleUi-CaptCHA

Implementation approach

Standing on the shoulders of giants, integrate Django-Simply-Captcha directly, add captcha to the login form, and modify it to simpleUI style.

The login form

The login form in the background is AdminAuthenticationForm

# django.contrib.sites.py
class AdminSite:
    def get_urls(self) :
        # Admin-site-wide views.
        urlpatterns = [
            path('login/', self.login, name='login'),
            path('logout/', wrap(self.logout), name='logout'),... ]def login(self, request, extra_context=None) :
        defaults = {
                'extra_context': context,
                'authentication_form': self.login_form or AdminAuthenticationForm,
                'template_name': self.login_template or 'admin/login.html',}Copy the code

So we need to inherit the form and add a captcha field

# simpleui_captcha.forms.py
from captcha.fields import CaptchaField
from django.contrib.admin.forms import AdminAuthenticationForm


class MultiCaptchaAdminAuthenticationForm(AdminAuthenticationForm) :
    def __init__(self, *args, **kwargs) :
        super().__init__(*args, **kwargs)
        self.fields['captcha'] = CaptchaField()
Copy the code

It then assigns a value to the site’s login form variable

# simpleui_captcha.admin.py
from django.contrib import admin

from .forms import MultiCaptchaAdminAuthenticationForm

admin.AdminSite.login_form = MultiCaptchaAdminAuthenticationForm
Copy the code

Verification code related URL

Used to refresh the verification code

# simpleui_captcha.urls.py
from django.urls import path, include

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

The template to modify

Expand the background login template file, add the verification code field to the form, and add the refresh verification code function

# simpleui_captcha/templates/admin/login.html
{% extends "admin/login.html" %}

<script>
    window.onload = function () {
        let captchaEle = document.querySelector("img.captcha");
        captchaEle.onclick = function () {
            $.getJSON("/simpleui_captcha/captcha/refresh/".function (result) {$('img.captcha').attr('src', result['image_url']);
                $('#id_captcha_0').val(result['key'])}); }; .</script>

{% block form %}
{{ block.super }}
<div hidden="hidden">
    {{ form.captcha }}
</div>
{% endblock %}
Copy the code

release

Follow the djangos documentation, Advanced Guide: How to Write reusable Applications, complete your project, package your application, and distribute your application. Finally, you can submit to Github for others to contribute code. Go django-simpleui-captcha and give it a Star.