注册模块——图片验证码的实现

在注册上，我们一般都是以手机号的验证码短信来进行。为了防止有人恶意利用别人的手机来进行骚扰或redis缓存的破坏，我们都要在验证手机短信前加入图片验证码的验证。只有通过图片验证码的验证，才能允许收到手机短信验证。下面讲讲这一api的实现。

后端实现流程如下：

1. 创建类视图，写入get方法。
2. 从前端获取uuid。(uuid用于唯一标识一张图片)
3. 类视图的get方法内生成一张验证码图片及对应的文本。
4. 建立redis缓存，将key设置为imgcode_uuid，value为对应的文本信息，有效期为五分钟。
5. 将生成的图片返回给前端。

前端实现流程如下：

1. 利用js，获取验证码图片的标签
2. 生成uuid，再将图片的src改成后端类视图对应的url
3. 添加图片的点击事件
4. 再html页面上加入写好的js，加入方式一般采用{% static 路径 %} 模板标签，在使用这个模板标签前，要记得导入静态文件。{% load static %}

<script src="{% static 'js/users/auth.js' %}"></script>

视图类代码：

# Create your views here.
from utils.captcha.captcha import captcha
from django.views import View
from django_redis import get_redis_connection
from .constants import IMAGE_CODE_REDIS_EXPIRES

from django.http import HttpResponse
import logging

# 导入日志器
logger = logging.getLogger('django')
class ImageCode(View):
    """
    image verfiy
    url:  /image_codes/<uuid:image_code_id>/
    """
    def get(self,request,image_code_id):
        text,image = captcha.generate_captcha()  #生成验证码文本及图片
        con_redis = get_redis_connection(alias = 'verify_codes')
        img_key = 'imgcode_{}'.format(image_code_id).encode('utf-8')
        con_redis.setex(img_key, IMAGE_CODE_REDIS_EXPIRES, text)
        logger.info("Image code: {}".format(text))
        return HttpResponse(content=image, content_type="images/jpg")

url路由配置：

from django.urls import path
from . import views

app_name = 'verifications'

urlpatterns = [
    path('image_codes/<uuid:image_code_id>/',views.ImageCode.as_view(),name = 'image_code'),
        ]

js代码如下：

$(function () {
    var $img = $(".form-item .captcha-graph-img img");  // 获取图像标签
    var sImageCodeId = "";  // 定义图像验证码ID值

    generateImageCode();  // 生成图像验证码图片
    $img.click(generateImageCode);  // 点击图片验证码生成新的图片验证码图片

    // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
    function generateImageCode() {
        // 1、生成一个图片验证码随机编号
        sImageCodeId = generateUUID();
        // 2、拼接请求url /image_codes/<uuid:image_code_id>/
        var imageCodeUrl = "/image_codes/" + sImageCodeId + "/";
        // 3、修改验证码图片src地址
        $img.attr('src', imageCodeUrl)
    }

    // 生成图片UUID验证码
    function generateUUID() {
        var d = new Date().getTime();
        if (window.performance && typeof window.performance.now === "function") {
            d += performance.now(); //use high-precision timer if available
        }
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
    }
});

 

 

​​​​