一、安装captcha
pip install django-simple-captcha
二、注册captcha
在 settings.py 的 INATALLED_APPS 中注册captcha。
I
NSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'login', 'captcha', ]
执行migrate命令，生成captcha数据库表，保存验证码。
python manage.py migrate
三、添加路由
在根目录的urls.py文件中添加captcha对应的url:
from django.contrib import admin from django.urls import path from django.urls import include from login import views urlpatterns = [ path('admin/', admin.site.urls), path('captcha/', include('captcha.urls')) # 增加这一行 path('captcha/refresh/', include('captcha.urls')) # 点击验证码，使用ajax刷新 ]
四、修改forms.py文件
from django import forms from captcha.fields import CaptchaField class UserForm(forms.Form): username = forms.CharField(label="用户名", max_length=128, widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': "Username",'autofocus': ''})) password = forms.CharField(label="密码", max_length=256, widget=forms.PasswordInput(attrs={'class': 'form-control', 'placeholder': "Password"})) captcha = CaptchaField(label='验证码')
五、修改login.html
添加{{ form.captcha }}和ajax刷新验证码功能。
{% load static %} <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>登录</title> <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css"> <link rel="stylesheet" type="text/css" href="{% static 'css/semantic.custom.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> <script src="/static/js/md5.js"></script> <script src="/static/js/sha1.js"></script> <script src="/static/js/funcbase64.js"></script> <script src="/static/js/aes.js"></script> </head> <body id="v-account-body"> <div class="ui middle aligned center aligned grid"> <div class="column v-account"> <img src="{% static 'img/registerLogo.png' %}" class="image"> <h2 class="ui teal image header"> </h2> <form class="ui large form" novalidate method="post" action="{% url 'users:login' %}" enctype="multipart/form-data" onsubmit='return checkForm()'> {% csrf_token %} <div class="ui stacked segment"> <div class="field"> <div class="ui left icon input"> <i class="user icon"></i> {{form.username}} </div> </div> <div class="field"> <div class="ui left icon input"> <i class="lock icon"></i> {{form.password}} </div> </div> <div class="field"> <div class="ui left icon input"> <i class="shield icon"></i> {{form.captcha}} </div> </div> <input type="hidden" name="next" value="{{ next }}"/> <button class="ui fluid large teal submit button" type="submit">登录</button> </div> {% include "base/form_errors.html" %} </form> <div class="ui message"> 还没有账号？<a href="{% url 'users:signup' %}">注册</a> </div> </div> </div> <script src="/static/js/jquery-1.11.3.min.js"></script> <script src="/static/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script> <script type="text/javascript"> //验证码动态刷新实现 $('.captcha').click(function () { $.getJSON("/captcha/refresh/", function (result) { $('.captcha').attr('src', result['image_url']); $('#id_captcha_0').val(result['key']) }); }); </script> </body> </html>
注意在写动态刷新验证码之前，需要先引入jquery-1.11.3.min.js 和 bootstrap.min.js
这样写完之后会出现 验证码在左边，输入框在右边，不符合正常审美，So：
在settings.py中添加下面一句：
# 验证码样式 CAPTCHA_OUTPUT_FORMAT = u'%(text_field)s %(hidden_field)s %(image)s'
