Django学习实战之评论验证码功能（附A）

前言：

对于具有评论功能的博客来说，无论是否为知名博客，都会被恶意广告关注，上线没几天就会有人开始通过程序灌入广告评论，因此针对所有有用户输入的页面，验证码是必需品。

在Django系统中使用验证码非常简单，因为有足够多的库供你选择，只要到djangositepackages网站搜索下就能看到：https://djangopackages.org/grids/g/captcha/

一、使用 django-simple-captcha

要实现一个验证码，最简单的方式就是找一个使用量最大的库，或者GitHub上star数最多、最活跃的项目。只需要根据它的使用说明配置即可，比如我们将要用到的django-simple-captcha。

第一步安装：

pip install django-simple-captchao

第二步是配置 INSTALLED_APPS，修改settings.py:

INSTALLED_APPS = ['typeidea','blog.apps.BlogConfig','config.apps.ConfigConfig','comment.apps.CommentConfig','captcha',#省略其他配置
]

第三步是配置urls.py:

# typeidea/urls.py
from django.urls import path, re_path, includeurlpatterns = [#省略其他配置path('captcha/', include('captcha.urls')),
]

第四步是配置comment/forms.py:

# comment/forms.py
from captcha.fields import CaptchaFieldclass CommentForm(forms.ModelForm):# 省略其他代码captcha = CaptchaField()

第五步是创建表：

 python manage.py migrate

最后得到的验证码示例页面如下图所示：

在这里插入图片描述

二、配置验证码的几个要素

如果仅仅是使用的话，那么只需要经过上面5个步骤就好了，方便、简单、快捷。但是如果老板要求你来根据自己的业务实现验证码的话，那么怎么做呢？如果你没有梳理清楚验证码的实现逻辑，基本上不可能自己来实现一套验证机制。

我们梳理一下django-simple-captcha的实现逻辑，有这么几个要素：

用户端验证码的唯一标识；
在图片URL中通过唯一标识获取到对应的图片；
后端存储已经生成过的验证码及标识；
通过用户端的标识以及用户输入的验证码来判断是否存在这条记录。

在整个过程中，你会觉得跟用户名和密码验证很相似，只是密码是实时生成到图片中的。

三、配置Ajax校验验证码

理解了原理之后，要修改为Ajax验证的方式就很容易了。我们只需要实现通过接口拿到验证码标识以及验证码，然后判断数据库中是否存在即可。下面我们直接基于这个插件来改造。

现在开发接口。在comment/views.py中增加如下代码：

from captcha.helpers import captcha_image_url
from captcha.models import CaptchaStore
from django.http import JsonResponse
from django.utils import timezoneclass VerifyCaptcha(View):def get(self, request):captcha_id = CaptchaStore.generate_key()return JsonResponse({'captcha_id': captcha_id,'image_src': captcha_image_url(captcha_id),})def post(self, request):captcha_id = request.POST.get('captcha_id')captcha = request.POST.get('captcha', '')captcha = captcha.lower()try:CaptchaStore.objects.get(response=captcha, hashkey=captcha_id, expiration__gt=timezone.now()).delete()except CaptchaStore.DoesNotExist:return JsonResponse({'msg': '验证码错误'}, status=400)return JsonResponse({})

在View里面我们完成了两件事：在get中生成图片验证码，在post中校验验证码以及清理掉校验通过的验证码。

接下来，配置templates/comment/block.html，修改form位置的定义，并在下面新增script代码：

<hr/>
<div class="comment"><form id="comment_form" class="form-group" action="/comment/" method="POST">{% csrf_token %}<input name="target" type="hidden" value="{{ target }}"/>{{ comment_form }}<div id="captcha_section"></div><input id="verify" type="button" value="写好了！"/><input id="submit" type="submit" style="display:None" value="写好了！"/></form><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function(){var $form = $('.form-group');function init_captcha(){$.getJSON("{% url 'verify_captcha' %}", function(data){$('#captcha_section').html('<img src="' + data.image_src + '" id="captcha_id" data-id="'+ data.captcha_id +'"/>' +'<input id="captcha"/>');})}$( document ).on("click", '#captcha_id', init_captcha);$('#verify').on('click', function(){var captcha = $('#captcha').val();if (!captcha){alert('验证码不能为空');return;}$.ajax({url: "{% url 'verify_captcha' %}",method: 'POST',data: {'captcha_id': $('#captcha_id').data('id'),'captcha': captcha,'csrfmiddlewaretoken': '{{ csrf_token }}',},success: function(){$('#submit').click();setTimeout(init_captcha, 500);},error: function(res, data){alert(res.responseJSON.msg);return false;}});});init_captcha();});</script><!-- 评论列表 --><ul class="list-group">{% for comment in comment_list %}<li class="list-group-item"><div class="nickname"><a href="{{ comment.website }}">{{ comment.nickname }}</a> <span>{{ comment.created_time }}</span></div><div class="comment-content">{% autoescape off %}{{ comment.content }}{% endautoescape %}</div></li>{% endfor %}</ul>
</div>

修改urls.py配置：

# typeidea/urls.py
from comment.views import CommentView, VerifyCaptchaurlpatterns = [# 省略其他配置path('captcha/', include('captcha.urls')),path('verify_captcha/', VerifyCaptcha.as_view(), name='verify_captcha'),
]