注冊模塊——圖片驗證碼的實現

在注冊上，我們一般都是以手機號的驗證碼短信來進行。為了防止有人惡意利用別人的手機來進行騷擾或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;
    }
});

 

 

​​​​