【django】短信验证码接口设计、互亿无线短信平台、后端逻辑、前端逻辑【16】

一、原理图

二、短信验证码接⼝设计

1、请求⽅式

2、请求参数：路径参数和查询字符串

3、响应结果：JSON

三、短信验证码接⼝定义

class SMScodeView(View):
    def get(self,request,phone):
        '''
        匹配并删除图形验证码
        发送短信验证码
        :param request:
        :param phone:
        :return:
        '''
        pass

四、互亿⽆线平台介绍

1、互亿⽆线官⽹
2、注册链接
3、登录链接
4、平台管理中⼼

5、接⼊⽂档
接口文档链接
6、配置参数
在dev.py配置⽂件中添加参数

#配置短信验证码参数（互亿无线平台）
APIID='C9*****32'
APIKEY='b71434***********************30f6d91'

7、下载Python3.8⽀持的SDK

代码实现：

# !/usr/local/bin/python
# -*- coding:utf-8 -*-

from urllib.request import urlopen
from urllib.parse import urlencode
from django.conf import settings
import json

def send_sms_code(smscode,phone):
    # APIID(用户中心【验证码通知短信】-【产品纵览】查看)
    account = settings.APIID
    # APIKEY(用户中心【验证码通知短信】-【产品纵览】查看)
    password = settings.APIKEY
    text = "您的验证码是：%s。请不要把验证码泄露给其他人。"%smscode
    data = {'account': account, 'password': password, 'content': text, 'mobile': phone, 'format': 'json'}
    req = urlopen(url='https://106.ihuyi.com/webservice/sms.php?method=Submit',data=urlencode(data).encode())
    content = req.read().decode()
    print(content)
    # code等于2代表提交成功，否则提交失败
    # smsid等于0代表提交失败，否则显示长度20流水号
    # b'{"code":2,"msg":"\xe6\x8f\x90\xe4\xba\xa4\xe6\x88\x90\xe5\x8a\x9f","smsid":"16063783563405105174"}'

    return json.loads(content)

五、短信验证码后端逻辑实现

1、校验传参（查询字符串参数、路径参数）
2、检验完整性（手机号、imgcode、uuid）
3、获取服务器生成的图片验证码
4、输入图片验证码与服务器获取生成的验证码进行匹配（一致性校验、非空校验）
5、删除图片验证码
6、服务端生成手机验证码
7、redis数据库存储手机验证码
8、发送短信验证码
9、根据外部接口返回响应前端结果

import django_redis
import django_redis.cache
from django.shortcuts import render
from django.views.generic.base import View
import random,string
from captcha.image import ImageCaptcha
from mgproject.utils.constants import IMAGE_CODE_REDIS_EXPIRES,SMS_CODE_REDIS_EXPIRES
from django.http import HttpResponse,JsonResponse
import logging
from mgproject.utils.huyi_sms.sms3 import send_sms_code

logger=logging.getLogger('django')

# Create your views here.


class SMScodeView(View):
    def get(self,request,phone):
        '''
        匹配并删除图形验证码
        发送短信验证码
        :param request:
        :param phone:
        :return:
        '''
        #todo ***获取手机短信验证码，前提输入手机号、输入图形验证码、uuid是图形验证码唯一编号***
        #todo 1、获取请求参数（路径参数、查询字符串）
        imgcode_client=request.GET.get('imgcode','')    #获取用户输入的图形验证码
        uuid=request.GET.get('uuid','')                 #
        #todo 2、校验参数(完整性判断)
        if not all([phone,imgcode_client,uuid]):
            return JsonResponse({'code':'4001','errormsg':'缺少必传参数'})

        #todo 3、获取服务器生成的图片验证码
        redis_conn=django_redis.get_redis_connection('verify_code')
        imgcode_server=redis_conn.get('img_{}'.format(uuid))

        #todo 4、匹配（非空判断、一致性判断）
        if imgcode_server is None:
            return JsonResponse({'code':'4002','errormsg':'图片验证码已过期'})

        if imgcode_client.lower()!=imgcode_server.decode('utf-8').lower():
            return JsonResponse({'code':'4003','errormsg':'图片验证码不一致'})

        #todo 5、删除图片验证码（避免用户恶意测试）
        try:
            redis_conn.delete('img_{}'.format(uuid))
        except Exception as e:
            logger.error(e)
        #todo 6、生成短信验证码(6位数字)
        seed=string.digits
        s=random.choices(seed,k=6)
        smscode_str=''.join(s)

        #todo 7、将短信验证码保存到redis数据库中
        redis_conn.setex('sms_{}'.format(uuid),SMS_CODE_REDIS_EXPIRES,smscode_str)
        #todo 8、发送短信验证码
        ret=send_sms_code(smscode_str,phone)
        #todo 9、根据外部接口返回值响应前端结果
        if ret.code==2:
            return JsonResponse({'code':200,'errormsg':'ok'})
        return JsonResponse({'code':'5001','errormsg':'发送短信验证码错误'})

六、短信验证码前端逻辑实现

1.register.html

<p class="form-row form-row-wide">
	<input style="width: 230px;" v-model="smscode" placeholder="短信验证码" @blur="check_smscode"  name="msgcode"  type="text" class="input-text" id="reg_mescode" >
	<span class="error-tip" v-show="error_smscode">${error_smscode_msg}</span><a href="javascript:;" style="font-size: 16px;text-align: center;font-weight: normal;float: right" id="reg_mescode_btn" able="able" @click="send_smscode" >${smscode_btn}</a>
/p>

2.register.js

check_smscode:function(){
       //短信验证码格式校验
       let reg = /^\d{6}$/;
       if(!reg.test(this.smscode)){
           this.error_smscode = true;
       }else{
           this.error_smscode = false;
       }
   },码片

七、axios请求短信验证码

1、发送短信验证码事件处理

send_smscode:function(){
           //发送短信验证码

           //1.判断短信验证码是否正在发送
           if(this.send_flag){
               return;
           }
       //
       //     //2.修改发送状态
           this.send_flag = true;

           //3.校验用户输入的手机号和图片验证码
           this.check_phone();
           this.check_imgcode();
           if(this.error_phone||this.error_imgcode){
               this.send_flag = false;
               return;
           }

           //4.发送短信验证码
           var url = '/smscodes/'+this.phone+'/?imgcode='+this.imgcode+'&uuid='+this.uuid+'/';
           axios.get(url,{
               responseType:'json'
           }).then(response=>{
               if(response.data.code=='200'){
                   let num = 60;
                   var i = setInterval(()=>{
                       if(num==1){
                           clearInterval(i);
                           this.smscode_btn = '获取短信验证码';
                           this.send_flag = false;
                       }else{
                           num -= 1;
                           this.smscode_btn = '倒计时：'+ num + '秒';
                       }
                   },1000,60)
               }else{// 4001 表示缺少必传参数
                   if(response.data.data =='4001' ||response.data.data =='4002' ||response.data.data =='4003'){
                       this.error_smscode_msg = response.data.errormsg;
                       this.error_smscode = true;
                       // 4002 图片验证码已经过期
                   }

                   //重新生成图片验证码
                   this.generate_imgcode();
                   //重置发送状态
                   this.send_flag = false;
               }
           }).catch(error=>{
               console.log(error.response);
           });

       },