美多商城用户注册-展示用户注册页面-短信验证码-6
1.短信验证码逻辑分析，短信平台注册使用
保存短信验证码是为注册做准备的。
为了避免用户使用图形验证码恶意测试，后端提取了图形验证码后，立即删除图形验证码。
Django不具备发送短信的功能，所以我们借助第三方的https://user.ihuyi.com/new/login.html短信平台来帮助我们发送短信验证码。
https://user.ihuyi.com/new/login.html 这个配置 自己注册 自己配置
在verifications中创建一个软件包并导入三方平台的代码 代码平台有能发送即可
import random
import urllib.parse
import urllib.request
def get_code(num=4):
"""
生成指定位数的验证码，如果不传值，就默认生成4位的验证码
:param num: 要生成几位的验证码
:return: 生成的验证码
"""
return random.randint(
int('1{}'.format('0' * (num - 1))),
int('9{}'.format('9' * (num - 1)))
)
def send_sms(mobile, code_num=4):
"""
发送短信验证码
:param mobile: 你要发给谁
:param code_num: 发送几位的验证码
:return:
"""
# 接口地址，咱们不需要更改
url = 'http://106.ihuyi.com/webservice/sms.php?method=Submit'
# 定义请求的数据
values = {
'account': 'xxxxxxx', # 这个是对应的APIID
'password': 'xxxxxxx', # 这个是对应的APIKEY
'mobile': xxxxxxxx, # 发给谁
'content': '您的验证码是：{}。请不要把验证码泄露给其他人。'.format(get_code()),
# 没有购买套餐的，这个模板只能使用默认的，即你收到的短信长这样：【互亿无线】您的验证码是：7835。请不要把验证码泄露给其他人。
'format': 'json', # 不要动
}
# 将数据进行编码，下面代码不要动
data = urllib.parse.urlencode(values).encode(encoding='UTF8')
# 发起请求，下面代码不要动
req = urllib.request.Request(url, data)
response = urllib.request.urlopen(req)
res = response.read()
# 打印结果，然后你的手机应该就能接到短信了
print(res.decode("utf8")) # {"code":2,"msg":"提交成功","smsid":"16842079209571524017"}
if __name__ == '__main__':
send_sms('接收短信的手机号')
2.短信验证码后端逻辑接口设计
2.短信验证码接口views定义
logger = logging.getLogger('django')
class SMSCodeView(View):
"""短信验证码"""
def get(self, request, mobile):
# 接受参数
image_code_client = request.GET.get('image_code')
uuid = request.GET.get('uuid')
# 校验参数
if not all([image_code_client, uuid]):
return http.HttpResponseForbidden('缺少必传参数')
# 提取图形验证码
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': '图形验证码已失效'})
# 删除图形验证码
redis_conn.delete('img_%s' % uuid)
# 对比图形验证码
image_code_server = image_code_server.decode() # 将bytes转字符串，再比较
if image_code_client.lower() != image_code_server.lower(): # 转小写，再比较
return http.JsonResponse({'code': RETCODE.IMAGECODEERR, 'errmsg': '输入图形验证码有误'})
# 发送短信验证码
sms_code = str(send_sms(mobile, [SMS_CODE_REDIS_EXPIRES // 60]))
logger.info(sms_code) # 手动的输出日志，记录短信验证码
# 保存短信验证码
redis_conn.setex('sms_%s'% mobile, SMS_CODE_REDIS_EXPIRES, sms_code)
# 响应结果
return http.JsonResponse({'code': RETCODE.OK, 'errmsg': '发送短信成功'})
短信验证码前端逻辑
vue绑定验证码界面 register.html
<li>
<label>短信验证码:</label>
<input type="text" v-model="sms_code" @blur="check_sms_code" name="sms_code" id="msg_code" class="msg_input">
<a @click="send_sms_code" class="get_msg_code">[[ sms_code_tip ]]</a>
<span class="error_tip" v-show="error_sms_code">[[ error_sms_code_message ]]</span>
</li>
验证填写短信码 register.js
check_sms_code(){
if(this.sms_code.length != 6){
this.error_sms_code_message = '请填写短信验证码';
this.error_sms_code = true;
} else {
this.error_sms_code = false;
}
},
axios请求短信验证码
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;
}
// 请求短信验证码
let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code+'&uuid='+ this.uuid;
axios.get(url, {
responseType: 'json'
})
.then(response => {
if (response.data.code == '0') {
// 倒计时60秒
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 {
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;
})
},
