django短信验证码的发送功能的实现及后台逻辑处理(上)


发布时间:2019-02-15 13:08    作者: 晖哥哥   已过去:2 年,8 月   阅读总量:556 已被赞:0


在网站开发过程当中,常常需要使用短信验证功能,经过学习,今天初步完成了后台的逻辑发送与前端js+ajax的显示处理,经验记录如下:

第一步:要使用短信验证,需要使用第三方的API,我这里使用的是聚合数据https://www.juhe.cn/提供的短信API,首先去官网注册,开通短信API,送10条短信,测试时够用的。开通后,要第一时间去设置短信模板,等待审核通过!

第二步:为了让Django能操作urlAPI,我们安装一个库 pip install requests 

第三步:在utils工具目录下,新建一个发送短信验证码的py文件。smssender.py

smssender.py:

#encoding: utf-8
#pip install requests 该模块可以帮助我们实现API
import requests
#本模块是基于聚合数据的短信API实现的,应先去注册一个账号,开通
#短信验证码服务,提交短信模板审核通过
#定义短信验证码的实现方法,传入手机号和code值
def send(mobile,captcha):
    url = "http://v.juhe.cn/sms/send" #接口地址,由聚合官网提供
    params = {
        "mobile": mobile, #接收短信的手机号,自己传入
        "tpl_id": "132204",#模板ID,由官网提供
        "tpl_value": "#code#="+captcha,#code值,自己定义,要4位数字
        "key": "79016870b2b2836add77bbef4" #由官网提供的AppKey
    }
    #采用GET方式提交数据给聚合数据,返回一个对象
    response = requests.get(url,params=params)
    #判断返回结果,如是0,就表示成功发送
    result = response.json()
    if result['error_code'] == 0:
        return True
    else:
        return False
    #下一步应该去视图里定义一个操作本方法的一个视图

第四步:在需要的视图里,定义一个处理短信发送的视图

views.py/

sms_captcha:
from utils.smssender import send #导入短信验证码发送方法
#短信验证码发送视图
def sms_captcha(request):
    #通过GET方法获取URL上的手机号码
    telephone = request.GET.get('telephone')
    #获取随机数字,这里直接通过验证码模块里生成的随机数拿来使用
    #def gene_text(cls):是Captcha 里自定义的一个方法
    code = Captcha.gene_text()
    #调用发送模块
    result = send(telephone,code)
    #返回JSON结果,这里使用我们自已的的那些错误提示
    print(result)
    if result == True:
        return restful.ok()
    else:
        return restful.params_error(message='发送失败!')

code值可以使用随机函数来生成一些自定义的,这里为了方便,使用了前面图像验证码的随机数 注意不要少于4位

第五步:路由映射

path('sms_captcha/', sms_captcha,name='sms_captcha'),#短信证码

第六步:前端代码部分

1.给短语验证码input 添加一个input代码段,作为提交按钮

<div class="input-group-addon">
    <input type="button" class="obtain generate_code" value=" 发送验证码">
</div>

2.给手机号输入input代码指定一个ID,便于JS获取

<input type="text" class="form-control" name="telephone" placeholder="手机号码" id="mobile">

3.在JS文件目录下,新建一个js文件,存放JS代码

sms_captcha.js:

$(function(){
  $(".generate_code").click(function(){
    var disabled = $(".generate_code").attr("disabled");
    if(disabled){
      return false;
    }
    if($("#mobile").val() == "" || isNaN($("#mobile").val()) || $("#mobile").val().length != 11 ){
      alert("请填写正确的手机号!");
      return false;
    }
    $.ajax({
      async:false,
      type: "GET",
      url: "/account/sms_captcha/",
      data: {telephone:$("#mobile").val()},
      dataType: "json",
      async:false,
      success:function(data){
        console.log(data);
        settime();
      },
      error:function(err){
        console.log(err);
      }
    });
  });
  var countdown=60;
  var _generate_code = $(".generate_code");
  function settime() {
    if (countdown == 0) {
      _generate_code.attr("disabled",false);
      _generate_code.val("发送验证码");
      countdown = 60;
      return false;
    } else {
      $(".generate_code").attr("disabled", true);
      _generate_code.val("重新发送(" + countdown + ")");
      countdown--;
    }
    setTimeout(function() {
      settime();
    },1000);
  }
});

data: {telephone:$("#mobile").val()}, 会产生一一条http://11.22.11/aaa/?telephone=1111111111的格式URL

4.将这个JS引入到页面。

<script src="{% static 'js/sms_captcha.js' %}"></script>

基本功能实现了,点击测试一下,感觉不错,显示有点丑,后期再优化一下吧,下篇文章,我在来实现后台接收验证码与校验验证码。

点赞

0




登陆后方可评论