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

在 Django 项目中加入验证码功能,通常需要借助第三方库,比如 Django-Smple-CaptchDjango-reCAPTCHADEF-reCAPTCHAWagtail-Django-ReCaptchaDjango-Friendly-Captcha等。

图片[1]-使用Django-Simple-Captcha在Django项目加入验证码模块并自定义样式 --实验盒

其中,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 )。

图片[2]-使用Django-Simple-Captcha在Django项目加入验证码模块并自定义样式 --实验盒

© 版权声明
THE END
喜欢就支持以下吧
点赞11 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容