使用Django-Simple-Captcha在Django项目加入验证码模块并自定义样式

在 Django 项目中加入验证码功能，通常需要借助第三方库，比如 Django-Smple-Captch 、Django-reCAPTCHA、DEF-reCAPTCHA、Wagtail-Django-ReCaptcha、Django-Friendly-Captcha等。

其中，Django-Smple-Captcha 是一个流行的选择，它提供了一个简单而强大的Django应用，无需调用第三方 API，可直接生成图像验证码。以传统的 MVC 架构为例，以下是如何在你的 Django 项目中集成Django-Smple-Captcha 并自定义样式的步骤。

步骤1：安装Django-Smple-Captcha

首先，你需要通过pip安装Django-Smple-Captcha。在你的终端中运行：

pip install django-simple-captcha

步骤2：添加到Django项目

在你的settings.py文件的INSTALLED_APPS中添加'captcha'：

INSTALLED_APPS = [
    ...
    'captcha',
]

步骤3：配置URLs

在你的项目的urls.py文件中包含captcha.urls。这允许django-simple-captcha处理生成和验证验证码的请求。

from django.urls import path, include

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

步骤4：在表单中使用CaptchaField

在需要验证码的表单中，导入并使用 CaptchaField：

from django import forms
from captcha.fields import CaptchaField

class MyForm(forms.Form):
    # 你的其他表单字段
    captcha = CaptchaField()

迁移数据库：

python manage.py migrate

步骤5：在模板中渲染表单

确保在你的表单模板中包含了验证码字段。django-simple-captcha将自动渲染图像验证码以及一个输入框供用户输入验证码。

<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Submit</button>
</form>

自定义样式

要自定义验证码的样式，你可以通过CSS进行一些基本的样式设置，如调整验证码图像和输入框的位置。django-simple-captcha也提供了一些设置来调整验证码的外观，如图像大小、字符集和噪声等级等。这些设置可以在你的settings.py文件中进行配置。

例如，要更改验证码图像的大小，你可以添加以下设置：

CAPTCHA_IMAGE_SIZE = (150, 50)  # 宽度为150px，高度为50px

要改变验证码的字符集：

CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.random_char_challenge'
CAPTCHA_LETTER_ROTATION = (-30,30)
CAPTCHA_NOISE_FUNCTIONS = ('captcha.helpers.noise_arcs','captcha.helpers.noise_dots',)

注意，部分配置在较新版本中已经不再使用了，比如：

# 旧版本可以这样配置输入框、验证码图片、隐藏域的输出格式，但现在不再支持
CAPTCHA_OUTPUT_FORMAT = '%(text_field)s %(image)s %(hidden_field)s'

对于 CSS 样式的自定义，你可以直接在你的CSS文件中针对验证码相关的HTML元素进行样式设计。例如：

#id_captcha_1 { /* 定位验证码输入框 */
    border: 2px solid #ddd;
}

.captcha { /* 定位验证码图像 */
    margin-bottom: 10px;
}

请注意，具体的CSS选择器（例如 #id_captcha_1）可能需要根据你的实际表单字段ID进行调整。通过结合 django-simple-captcha 提供的设置和CSS样式调整，你可以在保持功能完整的同时，根据你的网站设计需求自定义验证码的外观。

Ajax刷新

模板中加入以下内容，即可实现点击验证码图片 Ajax 刷新验证码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    $(function () {
        $('.captcha').css({
            'cursor': 'pointer'
        });
        $('.captcha').click(function () {
            console.log('click');
            $.get("/app/refresh/",
                function (result) {
                    $('.captcha').attr('str', result['image_url']);
                    $('#id_captcha_0').val(result['key'])
                });
        });
    })
</script>

参考

较新版本的 Django-Simple-Captcha 需要通过 Django 内置表单渲染来实现更多自定义样式内容，具体可以参考 Django-Simple-Captcha 文档（ https://django-simple-captcha.readthedocs.io/en/latest/index.html ）。