一.邏輯分析
整體思路:(以下代碼塊都為僞代碼)
1,目前端按下擷取驗證碼按鈕的時候,執行js檔案中的send_sms_code方法,send_sms_code方法中,向後端發送請求。
2,發送的請求應該包括電話号碼,uuid,圖檔驗證碼,uuid是為了驗證圖檔驗證碼
同時因為需求是要求點選了按鈕之後,按鈕的顯示變成六十秒倒計時,是以是局部重新整理,應該是ajax請求
3,從redis資料庫中提取圖形驗證碼,提取到圖形驗證碼後删除圖形驗證碼,避免因為惡意使用者在圖形驗證碼重新整理之後仍然使用之前未過期的圖形驗證碼
4,生成随機的六位數驗證碼,儲存到redis資料庫
5,和第三方軟體容聯雲進行導入,實作發送手機驗證碼功能
二. 前端的實作(ajax請求)
send_sms_code(){
let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code+'&uuid='+ this.uuid+'&sms_code'+this.sms_code;
axios.get(url,{
responseType:'json'
})
.then(response => {
if(response.data.code == 0){
//展示倒計時60秒
let num = 60;
let t = setInterval(()=>{
if (num == 1){
//倒計時即将結束,停止回調函數
clearInterval(t);
this.sms_code_tip = '擷取短信驗證碼'
// 重新重新整理圖檔驗證碼
this.generate_image_code();
this.send_flag = false;
}else{
// 初始化計時器
num = num-1;
this.sms_code_tip = num+'秒';
}
},1000) // 回調函數,時間間隔
}else{
if(response.data.code == 4001){
//圖形驗證碼錯誤
this.error_image_code_message = response.data.error;
this.error_msg_code = true;
this.send_flag = false;
}
//
}
})
.catch(error=>{
console.log(error.response)
this.send_flag = false;
})
},
三.接受請求
在django中子應用中設定url接受請求位址,設定視圖,實作後端邏輯,電話号碼使用正規表達式從前端直接提取到,uuid和圖形驗證碼通過?key=value的方法,利用關鍵字然後get得到。
class SMSCodeVies(View):
def get(self, request, mobile):
# 接收參數(uuid,mobile,image_code
uuid = request.GET.get('uuid')
image_code_client = request.GET.get('image_code')
四.得到系統生成的圖形驗證碼
# 1,建立redis連接配接對象,先導入get_redis_connection
from django_redis import get_redis_connection
redis_conn = get_redis_connection('verify_code')`
# 參數為Redis的庫别名
# 2,`利用關鍵字,得到之前儲存的圖形驗證碼,key值為'img_%s' % uuid,是之前在建立圖形驗證碼的時候設定的儲存進入redis資料庫中的
image_code_server = redis_conn.get('img_%s' % uuid)
# 3, 删除圖形驗證碼
redis_conn.delete('img_%s' % uuid)
# 4, 對比圖形驗證碼
# 因為從redis中取出來的資料為byte資料類型,為了對比使用者輸入的圖形驗證碼,轉換為string資料類型
image_code_server = image_code_server.decode()
if image_code_server.lower() != image_code_client.lower():
return http.JsonResponse({'code': RETCODE.IMAGECODEERR, 'error':'圖形驗證碼有誤'})
五.生成短信驗證碼
# 如果生成不足六位的數字,則往前面補零形成六位字元串
sms_code = '%06d' % random.randint(0, 999999)
redis_conn.setex('sms_%s'% mobile,constants.SMS_CODE_REDIS_EXPIRES,sms_code)
六.發送短信驗證碼
# -*- coding:utf-8 -*-
# import ssl
# ssl._create_default_https_context =ssl._create_stdlib_context # 解決Mac開發環境下,網絡錯誤的問題
from verifications.libs.yuntongxun.CCPRestSDK import REST
# 說明:主賬号,登陸雲通訊網站後,可在"控制台-應用"中看到開發者主賬号ACCOUNT SID
_accountSid = '8a216da878005a800178bbcbfe3e4555'
# 說明:主賬号Token,登陸雲通訊網站後,可在控制台-應用中看到開發者主賬号AUTH TOKEN
_accountToken = '1ecddaae6aec4ba88083d46942056a4b'
# 請使用管理控制台首頁的APPID或自己建立應用的APPID
_appId = '8a216da878005a800178bbcbff29455c'
# 說明:請求位址,生産環境配置成app.cloopen.com
_serverIP = 'app.cloopen.com'
# 說明:請求端口 ,生産環境為8883
_serverPort = "8883"
# 說明:REST API版本号保持不變
_softVersion = '2013-12-26'
# 雲通訊官方提供的發送短信代碼執行個體
# 發送模闆短信
# @param to 手機号碼
# @param datas 内容資料 格式為數組 例如:{'12','34'},如不需替換請填 ''
# @param $tempId 模闆Id
# def sendTemplateSMS(to, datas, tempId):
# # 初始化REST SDK
# rest = REST(_serverIP, _serverPort, _softVersion)
# rest.setAccount(_accountSid, _accountToken)
# rest.setAppId(_appId)
#
# result = rest.sendTemplateSMS(to, datas, tempId)
# print(result)
class CCP(object):
# 發送短信驗證碼的單例類
def __new__(cls, *args, **kwargs):
if not hasattr(cls, '_instance'):
# 單例類
cls._instance = super(CCP, cls).__new__(cls, *args, **kwargs)
cls._instance.rest = REST(_serverIP, _serverPort, _softVersion)
cls._instance.rest.setAccount(_accountSid, _accountToken)
cls._instance.rest.setAppId(_appId)
return cls._instance
def send_template_sms(self,to, datas, tempId):
"""
:param to: 電話号碼
:param datas:内容資料
:param tempId:模闆id
:return:成功傳回0,失敗傳回-1
"""
result = self.rest.sendTemplateSMS(to, datas, tempId)
print(result)
if result.get('statusCode') == '000000':
return 0
else:
return -1
從容聯雲提供的文檔中下載下傳到ccp_sms.py檔案中更新自己的容聯雲資訊,包裝發送短信的CCP單類,将其導入到view中進行調用