【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 jsondef send_sms_code(smscode,phone):# APIID(用户中心【验证码通知短信】-【产品纵览】查看)account = settings.APIID# APIKEY(用户中心【验证码通知短信】-【产品纵览】查看)password = settings.APIKEYtext = "您的验证码是：%s。请不要把验证码泄露给其他人。"%smscodedata = {'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_codelogger=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.digitss=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不具备发送短信的功能，所以我们借助第三⽅的互亿⽆线短信平台来帮助我们发送短信验证码

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

SpringBoot 整合发送互亿无线短信验证码
这里提供的验证码是:https://user.ihuyi.com/ 互亿无线产品的百亿无线这个短信验证,需要固定格式的短信内容.否则,就判定为发送失败以下代码需要 Jsoup 支持自 ...
【django】图形验证码接口设计、后端逻辑、前端逻辑【15】
一.原理图将后端⽣成的图⽚验证码存储在redis数据库2号库结构:{'img_uuid':'0594'} 二.创建验证码⼦应⽤ python ../../manage.py startapp ve ...
怎么对接NODE.JS语言短信验证码接口？
本文为您提供了NODE.JS语言版本的验证码短信接口对接DEMO示例 /* * 接口类型:互亿无线触发短信接口,支持发送验证码短信.订单通知短信等. 账户注册:请通过该地址开通账户 http://us ...
怎么对接asp语言短信验证码接口？
对接asp语言短信demo示例 <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> <% '接口类型:互亿无线触发 ...
【互亿无线】ktv预定包厢短信怎么发？附ktv预定包厢短信模板
商家给用户发送包厢预订短信通知,这种方式不仅节省了商家的人力和物力成本,还能增强顾客的满意度和消费体验.同时,客户也可以通过短信来确认包厢预订情况,减少差错. 那怎么给客户发送ktv预定包厢短信?在这 ...
手机短信验证码接口在各领域的应用
很多网站.APP应用.内部管理软件在使用过程中,都需要会员进行手机号码验证.登录验证.操作验证,在各种验证形式中,手机短信验证的方式最为简单和方便.根据不同的应用领域,手机短信验证可以广泛应用在如下方 ...
短信验证码接口的实现
代码: sendsms.java //接口类型:互亿无线触发短信接口,支持发送验证码短信.订单通知短信等. // 账户注册:请通过该地址开通账户http://sms.ihuyi.com/registe ...
如何防止短信验证码接口、登录注册入口被恶意调用攻击?
目录前言 1.短信验证码是什么? 2.为什么要对短信验证码进行防护? 3.有哪些常见的防护手段? 4.这些防护手段有没有用呢,到底该如何选择? 5.结语前言最近遇到一个关于防止短信验证码被刷的问 ...
php短信接口加密_PHP短信接口、PHP短信验证码接口源码
PHP短信接口.PHP短信验证码接口源码时间:2016-06-13 11:53 来源:原创作者:admin PHP短信接口文档源码,PHP发短信接口,PHP在线发短信,PHP微信发短信接口 /* ...
短信验证码接口的应用场景和优势
短信验证码接口是常用于网络平台的一种短信功能接口,它在用户注册登录.密码找回.账户变更.确认支付.活动认证等场景都会应用到,短信接口作为网络平台与用户之间重要交互手段,凭借其速度快.到达率高.安全性好 ...