Django實現短信驗證碼

Django短信驗證

最終實現效果:

在前端頁面添加有關短信驗證的標簽:

<input type="text" name="msg_code" id="msg_code" v-model="sms_code" @blur="check_sms_code">
<a href="javascript:;" @click="send_sms_code">[[sms_code_tip]]</a>
<span v-show="error_image_code">[[ error_sms_code_message ]]</span>

name="msg_code"用於視圖函數中接收參數

v-model="sms_code"用於vue中雙向綁定數據

@blur="check_sms_code"調用vue中的校驗方法

href="javascript:;"請求地址由vue生成

@click="send_sms_code"調用vue中的發送短信驗證碼方法

[[sms_code_tip]]當未發送短信驗證碼時,顯示"點擊發送短信驗證碼".點擊之后變為60s倒計時.因此vue中也要聲明這個變量

v-show="error_sms_code"布爾類型,true表示顯示錯誤信息,false表示不顯示.默認為false

[[ error_sms_code_message ]]顯示的錯誤提示,如"請填寫短信驗證碼"

vue中添加相應的字段和方法:

data:{
    error_sms_code:false,
    error_sms_code_message:'請填寫短信驗證碼',
    sms_code:'',
    sms_code_tip: '獲取短信驗證碼',
    sending_flag:false
},
methods:{
    // 校驗短信驗證碼
        check_sms_code:function(){
            // 校驗非空
            if(this.sms_code == ""){
                this.error_sms_code_message = "短信驗證碼不能為空"
                this.error_sms_code = true;
            }
        },
        // 發送短信驗證碼
        send_sms_code:function(){
            if(this.sending_flag == true){
                return;
            }
            this.sending_flag = true;

            // 校驗參數,保證輸入框中數據非空
            this.check_phone();
            this.check_image_code();
            if(this.error_image_code == true || this.check_phone == true){
                this.sending_flag == false;
                return;
            }

            // 向后端發送ajax請求,調用發送驗證碼方法
            var url = this.host + '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code + '&image_code_id=' + this.image_code_id;
            axios.get(url, {
                responseType:'json'
            }).then(response=>{
                if(response.data.code == '0'){
                    // 倒計時60秒，60秒后允許用戶再次點擊發送短信驗證碼的按鈕
                    var num = 60;
                    // 設置一個計時器
                    var t = setInterval(() => {
                        if (num == 1) {
                            // 如果計時器到最后, 清除計時器對象
                            clearInterval(t);
                            // 將點擊獲取驗證碼的按鈕展示的文本回復成原始文本
                            this.sms_code_tip = '獲取短信驗證碼';
                            // 將點擊按鈕的onclick事件函數恢復回去
                            this.sending_flag = false;
                        } else {
                            num -= 1;
                            // 展示倒計時信息
                            this.sms_code_tip = num + '秒';
                        }
                    }, 1000, 60)
                }
                else{
                    if (response.data.code == '4001') {
                        this.error_image_code_message = response.data.errmsg;
                        this.error_image_code = true;
                    } else { // 4002
                        this.error_sms_code_message = response.data.errmsg;
                        this.error_sms_code = true;
                    }
                    this.generate_image_code();
                    this.sending_flag = false;
                }
            }).catch(error=>{
                console.log(error.response);
                this.sending_flag = false;
            })
        },
}

現在,點擊"發送短信驗證碼"后,開始60s倒計時,vue向服務器發送ajax請求,調用發送驗證碼方法,請求url為:

127.0.0.1:8000/sms_codes/電話號/?image_code=驗證碼內容&image_code_id=驗證碼唯一標識uuid

添加匹配這個請求的路由表:

url(r'^sms_codes/(?P<mobile>1[3-9]\d{9})/$', views.SmscodeView.as_view()),

添加相應的視圖函數:

class SmscodeView(View):
    def get(self, request, mobile):
        # 接收
        # 驗證
        # 處理
        # 獲取redis客戶端對象
        redis_cli = get_redis_connection('verify_code')
        redis_pl = redis_cli.pipeline()
        # 1.生成6位隨機數
        sms_code = '%06d' % random.randint(0, 999999)
        # 2.保存到redis,鍵為:sms_13327437752
        redis_pl.setex('sms_' + mobile, constants.SMS_CODE_EXPIRES, sms_code)
        # 3.存儲60s發送的標記
        redis_pl.setex('sms_flag_' + mobile, constants.SMS_CODE_FLAG_EXPIRES, 1)
        redis_pl.execute()
        # 響應
        return http.JsonResponse({
            'code': RETCODE.OK,
            'errmsg': 'OK'
        })

在配置文件里應有連接redis的配置:

CACHES = {
    "verify_code": {  # 驗證碼
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/2",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    }
}

源碼