shoppe项目04----注册之图片验证码

图片验证码

uuid, 唯一身份标识码， 在用户注册之前，网站没有任何东西来区分不同的客户端， 因此在客户端生成一个 uuid， django中通过不同的uuid来区分不同的客户端。

图片验证码生成与展示

1. django后端
   路由匹配

from django.urls import path
from user.views import *
urlpatterns = [
	#/users/image_code/xxx/ 生成图片验证码
    path('image_code/<uuid:uuid>/', ImageCode.as_view()), #也可以<str:uuid>
]

         视图接口

import random
import string
import redis
from django.http.response import HttpResponse
from rest_framework.views import APIView
from rest_framework.response import Response
from user.models import *
from captcha.image import ImageCaptcha

class ImageCode(APIView):
    def get(self, request, uuid):
		# 1.接收参数uuid
		
		# 2. 生成随机字符串
        # string.ascii_letters: 所有字母的字符串（大小写）
        # string.digits： 所有的数字字符串（0-9）
        # random.sample： 随机采集指定位数的字符
        salt = ''.join(random.sample(string.ascii_letters + string.digits, 4))
        # 2. 生成 图片验证码 流
        img = ImageCaptcha()
        image = img.generate(salt) #io.BytesIO对象
        #from PIL import Image
        #im = Image.open(image)
        #im.show() #查看生成的图片验证码
        
        # 3. 连接redis
        redis_conn = redis.Redis(host='localhost', port=6379, db=0)

        # 4. 存储图片验证码，设置过期时间10分钟
        redis_conn.setex(str(uuid), 60 * 10, salt)

        # 5. 返回图片流
        return HttpResponse(image, content_type='image/png')

2. Vue前端加载图片验证码

• 定义方法genImageCode
  • 生成uuid
  • 拼接图片验证码的url
• 将拼接好的图片验证码url绑定到 img 标签中
• 默认的图片验证码，初始加载页面时，需要 在钩子函数中 执行方法
• 主动生成图片验证码，定义图片的点击事件，触发方法，生成新的uuid，重新请求图片验证码

<!--  对img标签进行属性绑定          -->
<img :src="imageCodeUrl" alt="图形验证码" class="pic_code" @click="genImageCode">
<!-- 对img标签进行点击事件绑定 ，点击一次，执行一次方法，请求一次图片  -->

         
<script>
// 使用uuid模块，生成 uuid
import {v4 as uuid4} from 'uuid'   // 提前安装好uuid模块， npm install uuid --save 

export default {
    ...,
    data() {
        return {
        	//如下
            imageCodeID: '', // 实际就是uuid
            imageCodeUrl: '', // 图片验证码的地址
            ...,
        }
    },
    methods: {
    	//如下方法
        genImageCode() {
            //  1. 生成一个uuid
            this.imageCodeID = uuid4();

            // 2. 拼接一个图片地址
            this.imageCodeUrl = '/users/image_code/' + this.imageCodeID + '/'
        }
    },
    mounted() {
        //默认的图片验证码
        this.genImageCode();
    }
}
</script>

图片验证码认证

1. django后端
   路由配置

#校验图片验证码
#/users/check_image_code/?imageCodeID=xxx&imageCode=xxxx
path('check_image_code/', CheckImageCode.as_view()),

视图接口

class CheckImageCode(APIView):
    def get(self, request):
        """
        1. 接收前端发送的参数，imageCodeID & imageCode
        2. 取出redis中的 图片验证码
            如果取不到，说明过期，响应204
            如果取到验证码，进行对比，注意： 统一大小写
        3. 根据对比结果，返回响应
            对比成功，响应200
            对比失败，响应204
        """
        #1. 接收前端发送的参数，imageCodeID & imageCode
        uuid_ = request.query_params.get("imageCodeID")
        image_code_ = request.query_params.get("imageCode")

        # 2. 取出redis中的 图片验证码
        #     如果取不到，说明过期，响应204
        #     如果取到验证码，进行对比，注意： 统一大小写
        redis_conn = redis.Redis(host='localhost', port=6379, db=0)
        image_code = redis_conn.get(uuid_)

        if not image_code:
            return Response({"code":204, 'msg': '验证码过期'})

        # 3.
        # 根据对比结果，返回响应
        # 对比成功，响应200
        # 对比失败，响应204
        if image_code.decode().lower() == image_code_.lower():
            return Response({"code":200, 'msg': 'ok'})
        else:
            return Response({"code":204, 'msg': '验证码错误'})

2. Vue前端校验输入的图片验证码

// 校验图片验证码
let validateImageCode = (rule, value, callback) => {
  if (value === "") {
    return callback(new Error("请输入图片验证码"));
  }
  // 图片验证码是由字母、数字组成，长度为4
  const iamgeCodeRule = /^[a-zA-Z0-9]{4}$/;
  if (iamgeCodeRule.test(value)) {
    this.$axios.get("/users/check_image_code/", {
      params:{
        imageCodeID: this.imageCodeID,
        imageCode: this.RegisterUser.imageCode,
      }
    })
    .then(res => {
      if(res.data.code == 200){
        this.$refs.ruleForm.validateField("checkPass");
        return callback();
      }else{
        return callback(new Error(res.data.msg))
      }
    }).catch(err => {
      return Promise.reject(err)
    })
  } else {
    return callback(new Error("图片验证码不正确！"));
  }
};

用户注册

1. Vue前端接口
   点击注册，触发函数如下：

// 用户注册
Register() {
  // 是否同意用户协议
  if(!this.aggree){
    this.flag = true
    return
  }
  // 已勾选，则不显示提示信息
  this.flag = false
  // 通过element自定义表单校验规则，校验用户输入的用户信息
  this.$refs["ruleForm"].validate((valid) => {
    //如果通过校验开始注册
    if (valid) {
      this.$axios
        .post("/users/register/", {
          userName: this.RegisterUser.name,
          pwd: this.RegisterUser.pass,
          mobile: this.RegisterUser.mobile,
          agree: this.aggree,
        })
        .then((res) => {
          // 200代表注册成功，其他的均为失败
          if (res.data.code == 200) {
            // 隐藏注册组件
            this.isRegister = false;
            // 弹出通知框提示注册成功信息
            this.notifySucceed(res.data.msg);
          } else {
            // 弹出通知框提示注册失败信息
            this.notifyError(res.data.msg);
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    } else {
      return false;
    }
  });
},

2. django后端
   路由匹配

# /users/register/
path('register/', Register.as_view()),

        视图接口

from rest_framework.views import APIView
from rest_framework.response import Response
from user.models import *

#注册
class Register(APIView):
    def post(self, request):
        # 前端传入 userName, pwd, mobile, agree
        username = request.data.get("userName")
        password = request.data.get("pwd")
        mobile = request.data.get("mobile")
        agree = request.data.get("agree")
        #验证参数
        if not all([username, password, mobile]):
            return Response({"code":204, "msg":"注册信息不完整！"})
        if not agree:
            return Response({"code":204, 'msg':"未同意用户使用协议"})

        # 存入数据库
        User.objects.create_user(username=username, password=password, mobile=mobile)

        # 返回响应
        return Response({"code":200, "msg":"注册成功！"})