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

导读:本篇文章讲解 【django】短信验证码接口设计、互亿无线短信平台、后端逻辑、前端逻辑【16】,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、原理图

在这里插入图片描述

二、短信验证码接⼝设计

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);
           });

       },

知识要点

1、保存短信验证码是为注册做准备的
2、为了避免⽤户使⽤图形验证码恶意测试,后端提取了图形验证码后,⽴即删除图形验证码
3、Django不具备发送短信的功能,所以我们借助第三⽅的互亿⽆线短信平台来帮助我们发送短信验证码

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/74089.html

(0)

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!