一、前端代码实现发送短信时间
[[ sms_code_tip ]]
[[ error_sms_code_message ]]
send_sms_code(){
# 保证无人使用
if (this.sending_flag == true){
return;
}
this.sending_flag = true;
# 电话及图形验证码符合规范
this.check_mobile();
this.check_image_code();
if (this.error_mobile == true || this.error_image_code == true) {
this.sending_flag = false;
return;
}
# 声明url指向SMSCodeView
# 在urls中声明路径:url(r'^sms_codes/(?P1[3-9]d{9})/$', views.SMSCodeView.as_view()),
# 路径中image_code和uuid为请求参数
let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code+'&uuid='+ this.uuid;
# 得到返回的json值并对其进行处理
axios.get(url, {responseType: 'json'})
.then(
response => {
# 发送成功,开始倒数
if (response.data.code == '0') {
var num = 60;
var t = setInterval(() =>{
if (num == 1) {
clearInterval(t);
this.sms_code_tip = '获取短信验证码';
this.sending_flag = false;
} else {
num -= 1;
this.sms_code_tip = num + '秒';
}
}, 1000, 60)
} else {
# 错误类型不同,显示地方不一样
# 4001:图形验证码有误(失效或错误)
if (response.data.code == '4001') {
this.error_image_code_message = response.data.errmsg;
this.error_image_code = true;
# 4003:短信验证码有误
} else {
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;
})
},
二、 后端实现验证图形验证码和发送短信验证码
class SMSCodeView(View):
def get(self, request, mobile):
# 接收and校验参数
image_code_client = request.GET.get('image_code')
uuid = request.GET.get('uuid')
if not all([image_code_client, uuid]):
return http.JsonResponse({'code': RETCODE.NECESSARYPARAMERR, 'errmsg': '缺少必传参数'})
# 获取服务器端的图形验证码
redis_conn = get_redis_connection('verify_code')
image_code_server = redis_conn.get('img_%s' % uuid)
if image_code_server is None:
# 图形验证码过期或者不存在
return http.JsonResponse({'code': RETCODE.IMAGECODEERR, 'errmsg': '图形验证码失效'})
try:
redis_conn.delete('img_%s' % uuid)
except Exception as e:
logger.error(e)
# 比较图形验证码
image_code_server = image_code_server.decode()
if image_code_client.lower() != image_code_server.lower():
return http.JsonResponse({'code': RETCODE.IMAGECODEERR, 'errmsg': '输入图形验证码有误'})
# 随机生成并发送短信验证码
sms_code = '%06d' % random.randint(0, 999999)
logger.info(sms_code)
# 保存 sms_mobile:sms_code键值对到redis中
redis_conn.setex('sms_%s' % mobile, constants.SMS_CODE_REDIS_EXPIRES, sms_code)
# 使用该接口发送验证码
CCP().send_template_sms(mobile, [sms_code, constants.SMS_CODE_REDIS_EXPIRES // 60],
constants.SEND_SMS_TEMPLATE_ID)
return http.JsonResponse({'code': RETCODE.OK, 'errmsg': '发送短信成功'})