使用Django-Simple-Captcha在Django项目加入验证码模块并自定义样式
使用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 ）。