Django自带图形验证码 django-simple-captcha
倪振海
一、安装captcha
pip install django-simple-captcha二、注册captcha
在 settings.py 的 INATALLED_APPS 中注册captcha。
INSTALLED_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'OK!!!
类似资料：