django-simple-captcha 使用 以及添加动态ajax刷新验证


layout: post
title: django-simple-captcha 使用 以及添加动态ajax刷新验证
description: “django-simple-captcha 添加动态ajax 刷新、验证”
category: [python]
tags : [django, python, captcha, ajax]
duoshuo: true

django-simple-captcha 使用以及添加动态ajax刷新、验证

django-simple-captcha是常用的添加验证码的package,但是使用起来会遇到一些问题,比如ajax动态刷新和验证的问题,官网并没有给出详细的说明,这里做个简单的介绍。本文代码使用python3.4, django1.8,其他版本同样可以参考

django-simple-captcha 使用

  1. 安装 pip install django-simple-captcha, pip install Pillow
  2. 将captcha 加入 settings.py 的 INSTALLED_APPS
  3. 运行 python manager.py migrations 和 python manage.py migrate,以前的版本需要用到 python manage.py syncdb
  4. url路由加入urls.py的urlpatterns
urlpatterns = [
    url(r'^captcha/', include('captcha.urls')) # 这是生成验证码的图片
    url('^some_view/', finder.views.some_view) # finder是我的app名字,需要在文件头部加入 import finder.views
]
  1. 在forms.py中加入
from django import forms
from captcha.fields import CaptchaField

class CaptchaTestForm(forms.Form):
    title = forms.CharField(max_length=100, label='title')
    price = forms.FloatField(max_value=100, label='price') # 这里是我们需要的字段,以title和price为例
    captcha = CaptchaField() # 为生成的验证码图片,以及输入框

  1. 在views.py中加入以下代码
def some_view(request):
    if request.POST:
        form = CaptchaTestForm(request.POST)

        # Validate the form: the captcha field will automatically
        # check the input
        if form.is_valid():
            human = True
            return HttpResponse(form.cleaned_data) # 这里没有建立模型,如果成功则直接打印
        else:
            return HttpResponse('validate error')
    else:
        form = CaptchaTestForm()

    return render_to_response('template.html',locals()) 
# Python 的内建函数 locals() 。它返回的字典对所有局部变量的名称与值进行映射,
  1. template.html 的内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<form action='.' method='POST'>
	{% csrf_token %}
	{{ form }}
<input type="submit" value='submit' />
</form>
</body>
</html>

到此打开 http://localhost:8000/some_view/ 就有有一个含有验证码的title,price的表单

这里我们简单说一下验证码生成的原理,django-simple-captcha并没有使用session对验证码进行存储,而是使用了数据库,首先生成一个表 captcha_captchastore ,包含以下字段

        # challenge = models.CharField(blank=False, max_length=32) # 验证码大写或者数学计算比如 1+1
        # response = models.CharField(blank=False, max_length=32)  # 需要输入的验证码 验证码小写或数学计算的结果 比如 2
        # hashkey = models.CharField(blank=False, max_length=40, unique=True) # hash值
        # expiration = models.DateTimeField(blank=False) # 到期时间

打开http://localhost:8000/some_view/ 会发现有一个隐藏字段

这个隐藏字段就是hashkey的值,django将hashkey传给页面以hidden的形式存在,提交表单时 hashkey与 输入的验证码 一起post到服务器,此时服务器验证 captcha_captchastore表中 hashkey 对应的 response 是否与 输入的验证码一致,如果一致则正确,不一致返回错误。

django-simple-captcha ajax动态验证

了解了验证码生成的原理,我没能就可以用ajax进行动态验证

  1. 将一下代码写入 views.py
def ajax_val(request):
    if  request.is_ajax():
        cs = CaptchaStore.objects.filter(response=request.GET['response'],
                                     hashkey=request.GET['hashkey'])
        if cs:
            json_data={'status':1}
        else:
            json_data = {'status':0}
        return JsonResponse(json_data)
    else:
        # raise Http404
        json_data = {'status':0}
        return JsonResponse(json_data) #需要导入  from django.http import JsonResponse
  1. 写入 urls.py, 为上面的view设置路由
urlpatterns = [
    url(r'^captcha/', include('captcha.urls')) # 这是生成验证码的图片
    url('^some_view/', finder.views.some_view), # finder是我的app名字,需要在文件头部加入 import finder.views
    url('^ajax_val/', finder.views.ajax_val, name='ajax_val'), # 新加入
]
  1. tempalte.html 写入ajax

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<form action='.' method='POST'>
	{% csrf_token %}
	{{ form }}
<input type="submit" value='submit' />
</form>


    <script>
    $(function(){
        
    $('#id_captcha_1').blur(function(){  // #id_captcha_1为输入框的id,当该输入框失去焦点是触发函数
        json_data={
            'response':$('#id_captcha_1').val(),  // 获取输入框和隐藏字段id_captcha_0的数值
            'hashkey':$('#id_captcha_0').val()
        }
        $.getJSON('/ajax_val', json_data, function(data){ //ajax发送
            $('#captcha_status').remove()
            if(data['status']){ //status返回1为验证码正确, status返回0为验证码错误, 在输入框的后面写入提示信息
                $('#id_captcha_1').after('<span id="captcha_status" style="color:blue">*验证码正确</span>')
            }else{
                 $('#id_captcha_1').after('<span id="captcha_status" style="color:red">*验证码错误</span>')
            }
        });

    });


    })

    </script>
    <script src='./jquery.js'></script> 记得导入jquery.js
</body>
</html>

至此我们完成了django-simple-captcha 的ajax动态验证

django-simple-captcha ajax刷新

如果当前验证码看不清,我们可以刷新一下,这个我们用ajax来做。 jango-simple-captcha本身提供了一个刷新页面,/refresh 在captcha/urls.py中:
> url(r’refresh/$’, views.captcha_refresh, name=‘captcha-refresh’)

这里在我们自己的urls.py中可以不做处理,直接使用 /captcha/refresh/
views.captcha_refresh 源码

# 只是源码介绍不用写入自己的代码中
def captcha_refresh(request):
    """  Return json with new captcha for ajax refresh request """
    if not request.is_ajax(): # 只接受ajax提交
        raise Http404

    new_key = CaptchaStore.generate_key()
    to_json_response = {
        'key': new_key,
        'image_url': captcha_image_url(new_key),
    }
    return HttpResponse(json.dumps(to_json_response), content_type='application/json')

通过阅读源代码我们发现, views.captcha_refresh 只接受ajax提交,最后返回 key 和 image_url 的json数据,这里的key就是 hashkey, 需要我们写入id为id_captcha_1的隐藏字段, image_url为验证码图片的新url,这里我们加入ajax刷新,点击验证码图片即可实现刷新,最新的tempalte.html 代码为


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<form action='.' method='POST'>
    {% csrf_token %}
    {{ form }}
<input type="submit" value='submit' />
</form>


    <script>
    $(function(){
    $('.captcha').css({
        'cursor': 'pointer'
    })
    # ajax 刷新
    $('.captcha').click(function(){
        console.log('click');
         $.getJSON("/captcha/refresh/",
                  function(result){
             $('.captcha').attr('src', result['image_url']);
             $('#id_captcha_0').val(result['key'])
          });


});

    # ajax动态验证
    $('#id_captcha_1').blur(function(){  // #id_captcha_1为输入框的id,当该输入框失去焦点是触发函数
        json_data={
            'response':$('#id_captcha_1').val(),  // 获取输入框和隐藏字段id_captcha_0的数值
            'hashkey':$('#id_captcha_0').val()
        }
        $.getJSON('/ajax_val', json_data, function(data){ //ajax发送
            $('#captcha_status').remove()
            if(data['status']){ //status返回1为验证码正确, status返回0为验证码错误, 在输入框的后面写入提示信息
                $('#id_captcha_1').after('<span id="captcha_status" style="color:blue">*验证码正确</span>')
            }else{
                 $('#id_captcha_1').after('<span id="captcha_status" style="color:red">*验证码错误</span>')
            }
        });

    });


    })

    </script>
    <script src='./jquery.js'></script> 记得导入jquery.js
</body>
</html>

ok, 现在我们已经完成了对django-simple-captcha 的使用,自己学习的心得,希望能帮到更多的小伙伴。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

探索者v

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值