8.1. 安装 captcha
直接安装: pip install django-simple-captcha
Django 自动帮我们安装了相关的依赖库 six,olefile 和 Pillow, 其中的 Pillow 是大名鼎鼎的绘图模块.
注册 captcha
在 settings 中, 将'captcha'注册到 App 列表里:
- INSTALLED_APPS = [
- 'django.contrib.admin',
- 'django.contrib.auth',
- 'django.contrib.contenttypes',
- 'django.contrib.sessions',
- 'django.contrib.messages',
- 'django.contrib.staticfiles',
- 'login',
- 'captcha',
- ]
captcha 需要在数据库中建立自己的数据表, 所以需要执行 migrate 命令生成数据表:
python manage.py migrate
8.2. 添加 url 路由
根目录下的 urls.py 文件中增加 captcha 对应的网址:
- from django.conf.urls import url
- from django.conf.urls import include
- from django.contrib import admin
- from login import views
- urlpatterns = [
- url
- (r
- '^admin/'
- , admin.site.urls),
- url
- (r
- '^index/', views.index),
- url
- (r
- '^login/', views.login),
- url
- (r
- '^register/', views.register),
- url
- (r
- '^logout/', views.logout),
- url
- (r
- '^captcha'
- ,
- include
- ('captcha.urls')) # 增加这一行
- ]
8.3. 修改 forms.py
如果上面都 OK 了, 就可以直接在我们的 forms.py 文件中添加 CaptchaField 了.
- 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'
- }))
- password = forms.CharField(label="密码", max_length=256, widget=forms.PasswordInput(attrs={
- 'class'
- :
- 'form-control'
- }))
- captcha
- =
- CaptchaField
- (label='验证码')
需要提前导入 from captcha.fields import CaptchaField, 然后就像写普通的 form 字段一样添加一个 captcha 字段就可以了!
8.4. 修改 login.html
由于我们前面是手动生成的 form 表单, 所以还要修改一下, 添加 captcha 的相关内容, 如下所示:
- <form class='form-login' action="/login/" method="post">
- <h2 class="text-center">
欢迎登录
- </h2>
- <div
- class
- =
- "form-group">
- {
- {
- login_form
- .
- username.label_tag
- }
- }
- {
- {
- login_form.username
- }
- }
- </div>
- <div
- class
- =
- "form-group">
- {
- {
- login_form
- .
- password.label_tag
- }
- }
- {
- {
- login_form.password
- }
- }
- </div>
- <div
- class
- ="form-group">
- {
- {
- login_form
- .
- captcha.errors
- }
- }
- {
- {
- login_form
- .
- captcha.label_tag
- }
- }
- {
- {
- login_form.captcha
- }
- }
- </div>
- <button
- type
- =
- "reset"
- class
- =
- "btn btn-default pull-left"
- >
重置
- </button>
- <button
- type
- =
- "submit"
- class
- =
- "btn btn-primary pull-right"
- >
提交
- </button>
- </form>
- </div>
- </div
- >
- <!
- --
- /container -->
- {
- % endblock %
- }
这里额外增加了一条 {{ login_form.captcha.errors }} 用于明确指示用户, 你的验证码不正确
对于刷新验证码
修改 login.HTML:
<div class="form-group">
{{login_form.captcha.label_tag}}<a id="refesh">刷新</a>
- <p>
- {{login_form.captcha}}
- {{login_form.captcha.errors}}</p>
- </div>
JS:
- // 验证码动态刷新实现
- $('#refesh').click(function () {
- $.getJSON("/captcha/refresh/", function (result) {
- $('.captcha').attr('src', result['image_url']);
- $('#id_captcha_0').val(result['key'])
- });
- });
- // 后端返回验证失败后的动作
- if('{{ status }}' == 'error'){
- alert("验证失败, 请重新登录!");
- Windows.location.assign("/accounts/login/")
- }
来源: http://www.bubuko.com/infodetail-3344114.html