django验证码插件 --- django-simple-captcha

发布时间 2023-12-21 23:47:53作者: 映辉

使用django-simple-captcha实现登录验证码:

 

第一步:安装pillow依赖

pip install pillow  -i https://pypi.tuna.tsinghua.edu.cn/simple/

 

第二步:安装django-simple-captcha

pip install django-simple-captcha  -i https://pypi.tuna.tsinghua.edu.cn/simple/

 

第三步:注册django-simple-captcha

INSTALLED_APPS = [
    'captcha',
]

  

第四步:配置urls.py

urlpatterns = [
    # 图片验证码 路由
    path('captcha/', include('captcha.urls')),       
]

  

第五步:数据库迁移

python manage.py makemigrations

python manage.py migrate

 

第六步:在settings.py中配置验证码的相关信息

#字母验证码
CAPTCHA_IMAGE_SIZE = (80, 45)   # 设置 captcha 图片大小
CAPTCHA_LENGTH = 4   # 字符个数
CAPTCHA_TIMEOUT = 1   # 超时(minutes)

 

第七步:创建form表单

from django import forms
from captcha.fields import CaptchaField


# 创建form表单
class LoginForm(forms.Form):

    '''
        生成的captcha,包括三部分的内容:
        1. 验证码的图片
        2. 验证码的输入框
        3. 验证码的答案【默认是隐藏的】 
    '''
    captcha = CaptchaField()

  

第八步:定义视图函数views.py

# 处理验证码请求的视图函数 test
def test(request):

    # 如果是GET方法,则将form对象传递到页面中
    # 传递的内容就是上面刚刚所说的三个部分的内容
    if request.method == 'GET':
        my_form = LoginForm()
        return render(request, 'template.html', locals())

    # 前端将验证码以POST方法提交过来后,进行校验
    my_form = LoginForm(request.POST)
    # 如果输入的验证码正确,则返回“通过”,反之,返回“不通过”
    if my_form.is_valid():
        return HttpResponse('通过')
    else:
        return HttpResponse('不通过')

  

第九步:模板HTML页面

<form action="" method="post">
    
    <!-- my_form.captcha中包含了前面说的三个内容 -->
    {{ my_form.captcha }}
    
    <!-- 按钮需要自己添加 -->
    <input type="submit">
    
</form>

 

渲染后的html页面如下:

--- 注:

(1)img为:验证码图片

(2)第二个input为:验证码输入框

(3)第三个input为:验证码答案【隐藏】

 


到此为止,就实现了基本的验证码功能, 
但是,如果想要刷新验证码,就必须刷新整个页面,
所以,需要使用Ajax来进行验证码的刷新,
那如何操作呢?

其实,只需要给图片添加一个点击事件,当点击图片时,向后端发起一个请求,让后端的某一个函数来处理请求,然后返回新的验证码图片地址和验证码答案即可,
最后再把前端的图片地址src替换为新的地址,和答案的value替换为新的value就可以了。

那怎么获取新的图片地址和答案呢?如下:
# 刷新验证码,处理Ajax请求
def refreshCode(request):
    
    # 获取:新的验证码答案
    captcha_answer = CaptchaStore.generate_key()
    # 获取:验证码答案对应的验证码图片地址
    img_url = captcha_image_url(captcha_answer)

  

<!-- 给验证码图片修改新的地址 -->
$("img").attr("src",img_url);

<!-- 给验证码答案修改新的value值 -->
$("#id_captcha_0").attr("value",captcha_answer);

  

到此,大功告成!!!


 

补充:

上面在settings.py中配置的是字母验证码,除此之外,还有加减乘除验证码,如下:

#加减乘除验证码
CAPTCHA_OUTPUT_FORMAT = '%(image)s %(text_field)s %(hidden_field)s '
CAPTCHA_NOISE_FUNCTIONS = ('captcha.helpers.noise_null',
     'captcha.helpers.noise_arcs', # 线
     'captcha.helpers.noise_dots', # 点
)
CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.random_char_challenge'
CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.math_challenge'
CAPTCHA_TIMEOUT = 1

  

另外,还有一些其他的配置信息,例如:

CAPTCHA_IMAGE_SIZE = (100,30)  #设置生成验证码图片的长和宽,单位为像素

CAPTCHA_OUTPUT_FORMAT = u'%(text_field)s %(image)s %(hidden_field)s' #设置输出的格式,该插件自动在模板中生成3个元素:一个验证码图片,一个验证码输入框、一个用于存放秘钥的隐藏输入框。可以在此根据需要调整其在模板中生成的先后顺序

CAPTCHA_FOREGROUND_COLOR = 'red'  #设置验证码图片前景色

CAPTCHA_BACKGROUND_COLOR = '#ffffff'  #设置验证码图片背景色

CAPTCHA_FONT_SIZE = '20'   #设置验证码图片中字体大小

CAPTCHA_FONT_PATH = 'fonts/Vera.ttf'   #设置字体样式,支持TTF等文件格式

CAPTCHA_LETTER_ROTATION = (-35,35)  #设置验证码中字母旋转的角度

CAPTCHA_NOISE_FUNCTIONS = ('captcha.helpers.noise_arcs','captcha.helpers.noise_dots',)  #是否添加干扰点和干扰线,当值为'captcha.helpers.noise_null'时,表示不添加干扰

CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.random_char_challenge' #设置验证码类型,其内置了三种验证码类型,还包括'captcha.helpers.math_challenge'(数字)和'captcha.helpers.word_challenge'(字典),除此之外,你还可以自己定义验证码生成函数

CAPTCHA_TIMEOUT = '5' #设置验证码的有效时间,单位为分钟

CAPTCHA_LENGTH = '4' #当验证码类型为字符型时,指定字母个数