1. django-simple-captcha 模块

安装 django-simple-captcha

  1. pip install django-simple-captcha
  2. pip install Pillow

注册

和注册 app 一样，captcha 也需要注册到 settings 中。同时它也会创建自己的数据表，因此还需要数据同步。

  1. # settings.py
  2. INSTALLED_APPS = [
  3.     ...
  4.     'captcha',
  5. ]
  7. # 执行命令进行数据迁徙，会发现数据库中多了一个 captcha_captchastore 的数据表
  8. python manage.py migrate

添加路由

在项目根目录下的 urls.py中添加 captcha对应的路由：

  1. from django.contrib import admin
  2. from django.urls import path, include
  5. urlpatterns = [
  6.     path('admin/', admin.site.urls),
  7.     path('captcha', include('captcha.urls')),        # 验证码
  8. ]

修改 Form 表单

Django 中通常都是由 Form 生成表单，而验证码一般也伴随注册登录表单，因此需要在 forms.py 中添加验证码的字段。

  1. from django import forms
  2. from captcha.fields import CaptchaField     # 一定要导入这行
  5. class UserForm(forms.Form):
  6.     username = forms.CharField(
  7.         label='用户名',                # 在表单里表现为 label 标签
  8.         max_length=128,
  9.         widget=forms.TextInput(attrs={'class': 'form-control'})   # 添加 css 属性
  10.     )
  12.     captcha = CaptchaField(
  13.         label='验证码',
  14.         required=True,
  15.         error_messages={
  16.             'required': '验证码不能为空'
  17.         }
  18.     )

视图函数：

  1. from django.shortcuts import render
  2. from app.forms import UserForm
  5. def home(request):
  6.     register_form = UserForm(request.POST)
  7.     if register_form.is_valid():
  8.         pass
  9.     register_form = UserForm()
  10.     return render(request, 'index.html', {'register_form': register_form})

前端渲染

  1. <html>
  2.     <head></head>
  3.     <body>
  4.         <form action='#' method='post'>
  5.             {{ register_form.captcha.label_tag }}
  6.             {{ register_form.captcha }} {{ 
  7.         </form>
  8.     </body>
  9. </html>

2. 手动生成验证码

主要利用的是画图模块 PIL 以及随机模块 random 在后台生成一个图片和一串随机数，然后保存在内存中（也可以直接保存在 Django 项目中）。
在前端指定一个 img 标签，其 src 属性路径为：生成验证码的路径 Django之验证码实现 - 图1

画图程序 check_code.py

  1. #!/usr/bin/env python
  2. # -*- coding:utf-8 -*-
  4. import random
  5. from PIL import Image, ImageDraw, ImageFont, ImageFilter
  7. _letter_cases = "abcdefghjkmnpqrstuvwxy"  # 小写字母，去除可能干扰的i，l，o，z
  8. _upper_cases = _letter_cases.upper()  # 大写字母
  9. _numbers = ''.join(map(str, range(3, 10)))  # 数字
  10. init_chars = ''.join((_letter_cases, _upper_cases, _numbers))
  12. # PIL
  14. def create_validate_code(size=(120, 30),
  15.                          chars=init_chars,
  16.                          img_type="GIF",
  17.                          mode="RGB",
  18.                          bg_color=(255, 255, 255),
  19.                          fg_color=(0, 0, 255),
  20.                          font_size=18,
  21.                          font_type="static/font/Monaco.ttf",
  22.                          length=4,
  23.                          draw_lines=True,
  24.                          n_line=(1, 2),
  25.                          draw_points=True,
  26.                          point_chance=2):
  27.     """
  28.     @todo: 生成验证码图片
  29.     @param size: 图片的大小，格式（宽，高），默认为(120, 30)
  30.     @param chars: 允许的字符集合，格式字符串
  31.     @param img_type: 图片保存的格式，默认为GIF，可选的为GIF，JPEG，TIFF，PNG
  32.     @param mode: 图片模式，默认为RGB
  33.     @param bg_color: 背景颜色，默认为白色
  34.     @param fg_color: 前景色，验证码字符颜色，默认为蓝色#0000FF
  35.     @param font_size: 验证码字体大小
  36.     @param font_type: 验证码字体，默认为 ae_AlArabiya.ttf
  37.     @param length: 验证码字符个数
  38.     @param draw_lines: 是否划干扰线
  39.     @param n_lines: 干扰线的条数范围，格式元组，默认为(1, 2)，只有draw_lines为True时有效
  40.     @param draw_points: 是否画干扰点
  41.     @param point_chance: 干扰点出现的概率，大小范围[0, 100]
  42.     @return: [0]: PIL Image实例
  43.     @return: [1]: 验证码图片中的字符串
  44.     """
  46.     width, height = size  # 宽高
  47.     # 创建图形
  48.     img = Image.new(mode, size, bg_color)
  49.     draw = ImageDraw.Draw(img)  # 创建画笔
  51.     def get_chars():
  52.         """生成给定长度的字符串，返回列表格式"""
  53.         return random.sample(chars, length)
  55.     def create_lines():
  56.         """绘制干扰线"""
  57.         line_num = random.randint(*n_line)  # 干扰线条数
  59.         for i in range(line_num):
  60.             # 起始点
  61.             begin = (random.randint(0, size[0]), random.randint(0, size[1]))
  62.             # 结束点
  63.             end = (random.randint(0, size[0]), random.randint(0, size[1]))
  64.             draw.line([begin, end], fill=(0, 0, 0))
  66.     def create_points():
  67.         """绘制干扰点"""
  68.         chance = min(100, max(0, int(point_chance)))  # 大小限制在[0, 100]
  70.         for w in range(width):
  71.             for h in range(height):
  72.                 tmp = random.randint(0, 100)
  73.                 if tmp > 100 - chance:
  74.                     draw.point((w, h), fill=(0, 0, 0))
  76.     def create_strs():
  77.         """绘制验证码字符"""
  78.         c_chars = get_chars()
  79.         strs = ' %s ' % ' '.join(c_chars)  # 每个字符前后以空格隔开
  81.         font = ImageFont.truetype(font_type, font_size)
  82.         font_width, font_height = font.getsize(strs)
  84.         draw.text(((width - font_width) / 3, (height - font_height) / 3),
  85.                   strs, font=font, fill=fg_color)
  87.         return ''.join(c_chars)
  89.     if draw_lines:
  90.         create_lines()
  91.     if draw_points:
  92.         create_points()
  93.     strs = create_strs()
  95.     # 图形扭曲参数
  96.     params = [1 - float(random.randint(1, 2)) / 100,
  97.               0,
  98.               0,
  99.               0,
  100.               1 - float(random.randint(1, 10)) / 100,
  101.               float(random.randint(1, 2)) / 500,
  102.               0.001,
  103.               float(random.randint(1, 2)) / 500
  104.               ]
  105.     img = img.transform(size, Image.PERSPECTIVE, params)  # 创建扭曲
  107.     img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)  # 滤镜，边界加强（阈值更大）
  109.     return img, strs

这里需要指定 Monaco.ttf 字体：

  1. font_type="static/font/Monaco.ttf",
  3. # https://pan.baidu.com/s/1XwyaFC_MROFA4fXujVwH3A 提取码:17f8

视图函数 views.py

  1. from django.shortcuts import render, redirect, HttpResponse
  2. from blog.check_code import create_validate_code
  3. from io import BytesIO
  4. from django.contrib import auth
  5. from django.http import JsonResponse
  8. def check_code(request):
  9.     """
  10.     获取验证码
  11.     :param request:
  12.     :return:
  13.     """
  14.     stream = BytesIO()
  15.     # 生成图片 img、数字代码 code，保存在内存中，而不是 Django 项目中
  16.     img, code = create_validate_code()
  17.     img.save(stream, 'PNG')
  19.     # 写入 session
  20.     request.session['valid_code'] = code
  21.     print(code)
  22.     return HttpResponse(stream.getvalue())
  25. def login(request):
  26.     """
  27.     登录视图
  28.     :param request:
  29.     :return:
  30.     """
  31.     if request.method == 'POST':
  32.         ret = {'status': False, 'message': None}
  33.         username = request.POST.get('username')
  34.         password = request.POST.get('password')
  36.         # 获取用户输入的验证码
  37.         code = request.POST.get('check_code')
  38.         p = request.POST.get('p')
  41.         # 用户输入的验证码与 session 中取出的验证码比较
  42.         if code.upper() == request.session.get('valid_code').upper():
  43.             # 验证码正确，验证用户名密码是否正确
  44.             user_obj = auth.authenticate(username=username, password=password)
  45.             if user_obj:
  46.                 # 验证通过，则进行登录操作
  47.                 # 封装到 request.user 中
  48.                 auth.login(request, user_obj)
  49.                 return redirect('accounts:home')
  50.             else:
  51.                 ret['status'] = True
  52.                 ret['message'] = '用户名或密码错误'
  53.                 return render(request, 'accounts/login.html', ret)
  54.         else:
  55.             ret['status'] = True
  56.             ret['message'] = '验证码错误'
  57.         return render(request, 'accounts/login.html', ret)
  59.     return render(request, 'accounts/login.html')

登录页面 login.html

  1. {% load static %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>登录</title>
  7.     <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.css' %}">
  8.     <style>
  9.         .login-col {
  10.             margin-top: 100px;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <div class="container">
  16.     <div class="row">
  17.         <div class="well col-md-6 col-md-offset-3 login-col">
  18.             <h3 class="text-center">登录</h3>
  20.             <!--错误信息-->
  21.             {% if status %}
  22.                 <div class="alert alert-danger" role="alert">
  23.                     <p id="login-error">{{ message }}</p>
  24.                     <p id="login-error"></p>
  25.                 </div>
  26.             {% endif %}
  28.             <form action="{% url 'accounts:login' %}" method="post" novalidate>
  29.                 {% csrf_token %}
  30.                 <div class="form-group">
  31.                     <label for="exampleInputUsername">用户名：</label>
  32.                     <input type="text" class="form-control" id="exampleInputUsername" placeholder="用户名" name="username">
  33.                 </div>
  35.                 <div class="form-group">
  36.                     <label for="exampleInputPassword1">密码：</label>
  37.                     <input type="password" class="form-control" id="exampleInputPassword" placeholder="密码"
  38.                            name="password">
  39.                 </div>
  41.                 <!--验证码-->
  42.                 <div class="form-group">
  43.                     <label for="id_code">验证码：</label>
  44.                     <div class="row">
  45.                         <div class="col-md-7 col-xs-7">
  46.                             <input type="text" class="form-control" id="id_code" placeholder="请输入验证码" name="check_code">
  47.                         </div>
  49.                         <div class="col-md-5 col-xs-5">
  50.                             <img src="/accounts/check_code" onclick="changeImg(this)" class="img">
  51.                         </div>
  52.                     </div>
  53.                 </div>
  56.                 <div class="checkbox">
  57.                     <label>
  58.                         <input type="checkbox"> 记住我
  59.                     </label>
  60.                 </div>
  61.                 <button type="submit" class="btn btn-primary btn-block" id="login-button">提交</button>
  62.             </form>
  63.         </div>
  64.     </div>
  65. </div>
  67. <script src="{% static 'js/jquery-3.1.1.js' %}"></script>
  68. <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.js' %}"></script>
  70. <script>
  71.     function changeImg(ths) {
  72.         // 硬编码
  73.         ths.src = '/accounts/check_code/?temp=' + Math.random();
  75.         // 使用命名空间，发送请求
  76.         // ths.src = '{% url 'accounts:check_code' %}' + '?temp=' + Math.random();
  78.     }
  80. </script>
  82. </body>
  83. </html>

给验证码图片 img 标签绑定 onclick 事件，当用户点击验证码时，相当于访问 http://127.0.0.1:8000/accounts/check_code/?temp=一个随机数，即向 http://127.0.0.1:8000/accounts/check_code/ 发送一个 get 请求，再次从后台生成一个验证码并返回。

路由 accounts/urls.py

  1. from django.urls import path
  2. from accounts import views
  4. app_name = 'accounts'
  5. urlpatterns = [
  6.     # 登录
  7.     path('login/', views.login, name='login'),      
  9.     # 获取验证码
  10.     path('check_code/', views.check_code, name='check_code'),
  12.     # 首页
  13.     path('home/', views.home, name='home'),
  15.     # 注销
  16.     path('logout/', views.logout, name='logout'),
  17. ]
  • 画图程序 check_code.py 保存在项目任意位置即可，只需在视图函数中导入即可。
  • Monaco.ttf 字体不可或缺，放置在静态文件中即可，但是需要修改 check_code.py 中的字体引入路径。
  • 验证用户输入的验证码是否正确，只需从 session 中取出生成的验证码与其比较即可。
  • 验证码刷新，只需让其再发送一次 get 请求即可。

    3. 极验科技之滑动验证码

    除上述两种图片验证码以外，还有一种滑动验证码，用的比较多有 极验科技。

    官方下载源码包，并安装 geetest 模块

    官网
    访问官网，选择：技术文档 —— 行为验证 —— 选择服务端部署为 Python —— 使用 git 或直接下载
    gt3-python-sdk 文件。 ```python pip install geetest pip install requests # 有可能还需要 requests 模块
  1. <a name="jMb9e"></a>
  2. ## 登录页面 login2.html
  3. **html 部分**
  4. ```python
  5. {% load static %}
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9.     <meta charset="UTF-8">
  10.     <title>登录</title>
  11.     <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.css' %}">
  12.     <style>
  13.         .login-col {
  14.             margin-top: 100px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <div class="container">
  20.     <div class="row">
  21.         <div class="well col-md-6 col-md-offset-3 login-col">
  22.             <h3 class="text-center">登录</h3>
  23.             <form>
  24.                 {% csrf_token %}
  25.                 <div class="form-group">
  26.                     <label for="username">用户名：</label>
  27.                     <input type="text" class="form-control" id="username" placeholder="用户名" name="username">
  28.                 </div>
  30.                 <div class="form-group">
  31.                     <label for="password">密码：</label>
  32.                     <input type="password" class="form-control" id="password" placeholder="密码" name="password">
  33.                 </div>
  36.                 <!--极验科技滑动验证码-->
  37.                 <div class="form-group">
  38.                     <!-- 放置极验的滑动验证码 -->
  39.                     <div id="popup-captcha"></div>
  40.                 </div>
  42.                 <!--记住我-->
  43.                 <div class="checkbox">
  44.                     <label>
  45.                         <input type="checkbox"> 记住我
  46.                     </label>
  47.                 </div>
  49.                 <!--登录按钮-->
  50.                 <button type="button" class="btn btn-primary btn-block" id="login-button">提交</button>
  52.                 <!--错误信息-->
  53.                 <span class="login-error"></span>
  54.             </form>
  55.         </div>
  56.     </div>
  57. </div>
  58. </body>
  59. </html>
  1. <script src="{% static 'js/jquery-3.3.1.js' %}"></script>
  2. <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.js' %}"></script>
  3. <!-- 引入封装了failback的接口--initGeetest -->
  4. <script src="http://static.geetest.com/static/tools/gt.js"></script>
  7. <script>
  8.     var handlerPopup = function (captchaObj) {
  9.         // 成功的回调
  10.         captchaObj.onSuccess(function () {
  11.             var validate = captchaObj.getValidate();
  12.             var username = $('#username').val();
  13.             var password = $('#password').val();
  14.             console.log(username, password);
  15.             $.ajax({
  16.                 url: "/accounts/login2/", // 进行二次验证
  17.                 type: "post",
  18.                 dataType: 'json',
  19.                 data: {
  20.                     username: username,
  21.                     password: password,
  22.                     csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
  23.                     geetest_challenge: validate.geetest_challenge,
  24.                     geetest_validate: validate.geetest_validate,
  25.                     geetest_seccode: validate.geetest_seccode
  26.                 },
  27.                 success: function (data) {
  28.                     console.log(data);
  29.                     if (data.status) {
  30.                         // 有错误，在页面上显示
  31.                         $('.login-error').text(data.msg);
  32.                     } else {
  33.                         // 登录成功
  34.                         location.href = data.msg;
  35.                     }
  36.                 }
  37.             });
  38.         });
  40.         // 当点击登录按钮时，弹出滑动验证码窗口
  41.         $("#login-button").click(function () {
  42.             captchaObj.show();
  43.         });
  45.         // 将验证码加到id为captcha的元素里
  46.         captchaObj.appendTo("#popup-captcha");
  47.         // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
  48.     };
  50.     $('#username, #password').focus(function () {
  51.         // 将之前的错误清空
  52.         $('.login-error').text('');
  53.     });
  55.     // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
  56.     $.ajax({
  57.         url: "/accounts/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
  58.         type: "get",
  59.         dataType: "json",
  60.         success: function (data) {
  61.             // 使用initGeetest接口
  62.             // 参数1：配置参数
  63.             // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
  64.             initGeetest({
  65.                 gt: data.gt,
  66.                 challenge: data.challenge,
  67.                 product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
  68.                 offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
  69.                 // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
  70.             }, handlerPopup);
  71.         }
  72.     });
  74. </script>

JS 代码主要分为两部分，第一部分是获取表单的 value 值，向后台发送 Ajax 请求，以验证用户名及密码是否正确，若有错误将错误信息显示出来。第二部分向后台获取验证码所需相关参数。

视图函数 views.py

  1. from django.shortcuts import render, redirect, HttpResponse
  2. from django.http import JsonResponse
  3. from geetest import GeetestLib
  6. def login2(request):
  7.     if request.method == 'POST':
  8.         ret = {'status': False, 'msg': None}
  9.         username = request.POST.get('username')
  10.         password = request.POST.get('password')
  12.         print(username, password)
  14.         # 获取极验，滑动验证码相关参数
  15.         gt = GeetestLib(pc_geetest_id, pc_geetest_key)
  16.         challenge = request.POST.get(gt.FN_CHALLENGE, '')
  17.         validate = request.POST.get(gt.FN_VALIDATE, '')
  18.         seccode = request.POST.get(gt.FN_SECCODE, '')
  19.         status = request.session[gt.GT_STATUS_SESSION_KEY]
  20.         user_id = request.session["user_id"]
  22.         print(gt, challenge, validate, seccode, status)
  24.         if status:
  25.             result = gt.success_validate(challenge, validate, seccode, user_id)
  26.         else:
  27.             result = gt.failback_validate(challenge, validate, seccode)
  28.         if result:
  29.             # 验证码正确
  30.             # 利用auth模块做用户名和密码的校验
  31.             user_obj = auth.authenticate(username=username, password=password)
  32.             if user_obj:
  33.                 # 用户名密码正确
  34.                 # 给用户做登录
  35.                 auth.login(request, user_obj)
  36.                 ret["msg"] = "/accounts/home/"
  37.                 # return redirect('accounts:home')
  38.             else:
  39.                 # 用户名密码错误
  40.                 ret["status"] = True
  41.                 ret["msg"] = "用户名或密码错误！"
  42.         else:
  43.             ret["status"] = True
  44.             ret["msg"] = "验证码错误"
  46.         return JsonResponse(ret)
  47.     return render(request, "accounts/login2.html")
  49. # 请在官网申请ID使用，示例ID不可使用
  50. pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
  51. pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"
  53. # 处理极验 获取验证码的视图
  54. def get_geetest(request):
  55.     user_id = 'test'
  56.     gt = GeetestLib(pc_geetest_id, pc_geetest_key)
  57.     status = gt.pre_process(user_id)
  58.     request.session[gt.GT_STATUS_SESSION_KEY] = status
  59.     request.session["user_id"] = user_id
  60.     response_str = gt.get_response_str()
  61.     return HttpResponse(response_str)

路由 accounts/urls.py

  1. from django.urls import path
  2. from accounts import views
  4. app_name = 'accounts'
  5. urlpatterns = [
  6.     path('home/', views.home, name='home'),
  8.     # 极验滑动验证码 获取验证码的url
  9.     path('pc-geetest/register/', views.get_geetest, name='get_geetest'),
  11.     path('login2/', views.login2, name='login2'),
  12. ]

总结

  • 极验滑动验证码除了支持 Django，还支持 flask、tornado 等
  • 上述以 Ajax 形式发送的 post 请求，因此注意查看是否设置了 csrf_token，并且提交按钮 button 的提交类型应该为 button 而非 submit （踩坑）
  • 同时它还有嵌入式，移动端等，更多示例请参考下载的官方源码。