十七.用户注册 ---- 图形验证码 2021-04-03

十七.用户注册 ---- 图形验证码

注：该篇文章接上一篇 十六.静态页面抽取模板

一、用户模型设计

注意事项：涉及到用户登录功能，不管是前端还是后端都要进行登录信息校验

• 前端校验：静态化的校验，所有的校验用户可以见到
• 后端校验：匹配所有得信息(用户名,密码,手机号, 邮箱)与数据库中的信息进行对比校验

1. 用户表字段分析

• 用户名
• 密码
• 手机号
• 邮箱(目前在我们项目没有邮箱，在项目中默认邮箱状态没有激活)
• 图形验证码，短信验证码 (由于只是一次验证，有时间限制，所以我们用redis缓存，过期就无用了)

2.用户模型设计

django的强大之处在于开发效率高，内置了权限模块之类的很多常用功能。在开始一个新的django项目时，如果权限模块中的User模型不满足项目要求，我们需要扩展或者自定义User模型。

2.1 扩展User模型有两种方法

1. 如果你不需要改变数据库存储内容，只是改变行为，那么可以建立有一个基于User模型的代理模型。
2. 如果想存储与User模型关联的信息，可以使用OneToOneField到包含其他信息字段的模型。这种one-to-one模型经常被称作Profile模型，因为它可能存储站点用户的非身份验证的相关信息。例如：

from django.contrib.auth.models import User

class Employee(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    department = models.CharField(max_length=100)

2.2 自定义User模型

如果不想使用django内置的权限系统，当然你需要自定义用户模型，这种情况不讨论。当然也不建议这么做，django内置权限系统有大的自定义功能扩展，而不是重复造轮子。

开启一个新项目，官方强烈推荐用户自定义用户模型，即是默认的用户模型目前已经足够，但是未来可能会要扩展。

from django.contrib.auth.models import AbstractUser

class User(AbstractUser):
    pass

注意: 不要忘记在settings.py中设置AUTH_USER_MODEL指向它。

一旦已经创立数据库表之后再去修改AUTH_USER_MODEL，会困难很多，因为它会影响外键和多对多关系。这个改动并不能自动完成，需要手动修复（巨坑）。
官方文档

3.用户模型代码

Django学习 — UserManager 解析
Django学习笔记——内置用户类AbstractUser与内置认证校验系统
Python中的super()用法

3.1 用户模型

根据上面的分析我们的用户模型代码如下：

from django.db import models
from django.contrib.auth.models import AbstractUser, UserManager as _UserManager


class UserManager(_UserManager):
    """
    自定义 user manager 修改在使用`python manage.py createsuperuser`命令时
    可以提供email
    """
    def create_superuser(self, username, password, email=None, **extra_fields):
        return super().create_superuser(username=username, password=password, email=email, **extra_fields)


class User(AbstractUser):
    """
    add mobile, email_active fields to Django user model.
    """
    mobile = models.CharField('手机号', max_length=11, unique=True, help_text='手机号', error_messages={'unique': '此手机号码已注册'})

    email_active = models.BooleanField('邮箱状态', default=False)

    class Meta:
        db_table = 'tb_user'    # 指定数据库表名
        verbose_name = '用户'     # 在admin站点中显示名称
        verbose_name_plural = verbose_name  # 显示复数

    def __str__(self):
        return self.username

    #通过createsuperuser这个命令创建时需要的字段
    REQUIRED_FIELDS = ['mobile']
    # user 模型相当强大 还要修改必须输入email的这个行为
    # 管理器执行
    objects = UserManager()

3.2在settings.py文件中添加建立的模型

为什么在调用user模型的时候，不调用自带的user模型类，而调用我们重建的模型类呢？

• 在调用文件时会由上而下运行setting.py文件
• 运行到最后如果没有遇见我们自己定义的user模型声明，则调用自己自带的user模型
• 如果遇见了我们定义的user模型，则调用我们声明的user模型

在settings.py文件中添加如下配置：

# 自定义用户模型
AUTH_USER_MODEL = 'user.User'

然后运行命令进行数据库迁移：

python manage.py makemigrations

python manage.py migrate

3.3创建管理账户

再创建一个管理用户

(tzproject) ~/code/tztz$ python manage.py createsuperuser
用户名: admin
手机号: 158xxxxxxxx
Password: 
Password (again): 
密码长度太短。密码必须包含至少 8 个字符。
这个密码太常见了。
Bypass password validation and create user anyway? [y/N]: y
Superuser created successfully.

二、功能需求分析

1.设计接口思路

• 分析业务逻辑，明确在这个业务中需要涉及到几个相关子业务，将每个子业务党组欧一个接口来设计
• 分析接口的功能任务，明确接口的访问方式与返回数据：
  • 接口的请求方式，如GET，POST，PUT等
  • 接口的URL路径定义
  • 需要接受的参数及参数格式（如路径参数，查询字符串，请求表单，JSON等）
  • 返回的数据及数据格式

2.注册功能分析

2.1 流程图

2.2 功能

根据流程图总结注册业务包含如下功能

• 注册页面
• 图片验证码
• 用户名检测是否注册
• 手机号检测是否注册
• 短信验证码
• 注册保存用户数据

因为图片验证码，短信验证码考虑到后续可能会在其他业务中用到，因此将验证码功能独立出来，创建一个新应用verification。

三、图形验证码功能实现

1.接口设计

接口说明：

类目	说明
请求方法	GET
url定义	/image_code/
参数格式	查询参数

参数说明：

参数名	类型	是否必须	描述
rand	字符串	否	输入用户名

返回结果：
验证码图片

2.后端代码

1. 将验证码生成模块复制到根目录utils文件夹下
2. 创建新的app verification专门用来处理验证

cd ~/code/tztz/apps/
python ../manage.py startapp verification

别忘了在settings文件中注册app

3. 创建utils文件将captcha文件夹移到该文件夹下


在移入的captcha/captcha.py文件有PIL文件报错，需要在虚拟机中安装，命令如下：

pip install pillow

captcha文件资源：链接：https://pan.baidu.com/s/16y73V7mYfoNOHP52uNlzew
提取码：xxl4
captcha第三方插件介绍：验证码服务
使用 captcha 模块生成图形验证码
captcha 是一款适用于并发高并且易于集成的验证码服务。

功能简单介绍下：

1. 随机生成算术题，并随机将题目中的部分数字/运算符变成汉字
2. 每个文字随机颜色、字体倾斜度
3. 初始化生成 100 张验证码，运行过程中循环取图片，如果每 10s 大于 100 次请求，则开始替换图片 100 张（这些数字目前只能靠改代码）
4. HTTP 接口，返回图片内容 base64 和 答案，方便集成
   ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210403064658697.png

4.在verification中建立constants.py文件
constants.py文件用于存储过期时间，这样如我们需要更改验证码过期时间，方便更改

   # 图片验证码过期时间 单位秒
   IMAGE_CODE_EXPIRES = 600
   # 短信验证码长度
   SMS_CODE_LENGTH = 4
   SMS_CODE_INTERVAL = 60
   # 短信验证码过期时间 分
   SMS_CODE_EXPIRES = 5
   # 短信发送模板
   SMS_CODE_TEMP_ID = 1

5.verification/views.py代码如下：

from django.shortcuts import render

import logging
from django.http import HttpResponse

from utils.captcha.captcha import captcha  #导入验证码库
from . import constants #导入过期时间
# Create your views here.
# 日志器
logger = logging.getLogger('django')


def image_code_view(request):
    """
    生成图片验证码
    url:/image_code/
    :param request:
    :return:
    """
    #获取验证码的文字和图片
    text, image = captcha.generate_captcha()
    request.session['image_code'] = text
    # 将验证码存入session中，设置文本过期时间
    request.session['image_code']=text
    request.session.set_expiry(constants.IMAGE_CODE_EXPIRES)#设置过期时间
    logger.info('Image code:{}'.format(text))#记录日志

    return HttpResponse(content=image, content_type='image/jpg')

6.verification/urls.py代码如下：

from django.urls import path
from . import views
# url的命名空间
app_name = 'verification'

urlpatterns = [
    path('image_code/', views.image_code_view, name='image_code'),
]

7.项目根urls.py代码如下

from django.urls import path, include

urlpatterns = [
    path('', include('news.urls')),
    path('', include('verification.urls')),
]

四.注册页面

1.接口设计

1.1. 接口说明

类目	说明
请求方法	GET
url定义	/user/register/
参数格式	无参数

1.2 返回结果

注册页面

2.后端代码

1. user/views.py

from django.shortcuts import render
from django.views import View
​
​
class RegisterView(View):
    def get(self, request):
        return render(request, 'user/register.html')

2. user/urls.py

from django.urls import path, include
from . import views
app_name = 'user'
​
urlpatterns = [
    path('register/', views.RegisterView.as_view(), name='register')
]

3. 根urls.py

from django.urls import path, include
​
urlpatterns = [
    path('', include('news.urls')),
    path('', include('user.urls'))
]

3.前端代码

1.到前端register.html文件下设置验证码url

修改前：

修改后：

<img src="{% url 'verification:image_code' %}" alt="验证码" title="点击刷新">

register.html

{% extends 'base/base.html' %}
{% load static %}
{% block title %}注册{% endblock title %}

{% block link %}
<link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}">
{% endblock link %}

{% block main_start %}
    <main id="container">
  <div class="register-contain">
    <div class="top-contain">
      <h4 class="please-register">请注册</h4>
      <a href="javascript:void(0);" class="login">立即登录 &gt;</a>
    </div>
    <form action="" method="post" class="form-contain">


      <div class="form-item">
        <input type="text" placeholder="请输入用户名" name="username" class="form-control" autocomplete="off">
      </div>
      <div class="form-item">
        <input type="password" placeholder="请输入密码" name="password" class="form-control">
      </div>
      <div class="form-item">
        <input type="password" placeholder="请输入确认密码" name="password_repeat" class="form-control">
      </div>
      <div class="form-item">
        <input type="tel" placeholder="请输入手机号" name="telephone" class="form-control" autocomplete="off" autofocus>
      </div>
      <div class="form-item">
        <input type="text" placeholder="请输入图形验证码" name="captcha_graph" class="form-captcha">
        <a href="javascript:void(0);" class="captcha-graph-img">
          <img src="{% url 'verification:image_code' %}" alt="验证码" title="点击刷新">
        </a>
      </div>
      <div class="form-item">
        <input type="text" placeholder="请输入短信验证码" name="sms_captcha" class="form-captcha" autocomplete="off">
        <a href="javascript:void(0);" class="sms-captcha" title="发送验证码">获取短信验证码</a>
      </div>
      <div class="form-item">
        <input type="submit" value="立即注册" class="register-btn">
      </div>
    </form>
  </div>
</main>
{% endblock main_start %}
{% block script %}
    <script src="{% static 'js/user/auth.js' %}"></script>
{% endblock script %}

4.运行结果

可以看出只有刷新才能实现验证码刷新，无法实现点按验证码刷新

解决办法：通过建立js代码实现点按验证码刷新

5.JS 代码

1.在static/js文件夹下建立user文件夹

2.在user文件夹下建立auth.js文件

auth.js文件代码

$(function () {
    let $img = $('.form-contain .form-item .captcha-graph-img img');
    
    // 1.点击刷新图像验证码
    $img.click(function () {
        $img.attr('src', '/image_code/?rand=' + Math.random())
    });
});

6.最终运行结果

实现了点按更换验证码