短信验证码

短信验证码用的是阿里云的，目录结构如下：
其中aliyunsdkdysmsapi是在官方下载的 https://help.aliyun.com/document_detail/55359.html

aliyun.py

# -*- coding: utf-8 -*-
import sys
from utils.aliyunsdk.aliyunsdkdysmsapi.request.v20170525 import SendSmsRequest
from utils.aliyunsdk.aliyunsdkdysmsapi.request.v20170525 import QuerySendDetailsRequest
from aliyunsdkcore.client import AcsClient
import uuid
from aliyunsdkcore.profile import region_provider
from aliyunsdkcore.http import method_type as MT
from aliyunsdkcore.http import format_type as FT
import json


ACCESS_KEY_ID = "你的key"
ACCESS_KEY_SECRET = "你自己的key"


# 注意：不要更改
REGION = "cn-hangzhou"
PRODUCT_NAME = "Dysmsapi"
DOMAIN = "dysmsapi.aliyuncs.com"

acs_client = AcsClient(ACCESS_KEY_ID, ACCESS_KEY_SECRET, REGION)
region_provider.add_endpoint(PRODUCT_NAME, REGION, DOMAIN)


def send_sms(phone_numbers,code):

    business_id = uuid.uuid1()
    sign_name = '唯美博客'
    template_code = 'SMS_172170016'
    template_param = json.dumps({"code":code})
    smsRequest = SendSmsRequest.SendSmsRequest()
    # 申请的短信模板编码,必填
    smsRequest.set_TemplateCode(template_code)

    # 短信模板变量参数
    if template_param is not None:
        smsRequest.set_TemplateParam(template_param)

    # 设置业务请求流水号，必填。
    smsRequest.set_OutId(business_id)
    # 短信签名
    smsRequest.set_SignName(sign_name)
    # 数据提交方式
    # smsRequest.set_method(MT.POST)
    # 数据提交格式
    # smsRequest.set_accept_format(FT.JSON)
    # 短信发送的号码列表，必填。
    smsRequest.set_PhoneNumbers(phone_numbers)
    # 调用短信发送接口，返回json
    smsResponse = acs_client.do_action_with_exception(smsRequest)
    return smsResponse

项目js发送验证码相关的代码

Auth.prototype.smsSuccessEvent = function(){
    var self = this;
    var smsCaptcha = $('.sms_captcha_btn');
    messageBox.showSuccess('短信验证码发送成功');
    smsCaptcha.addClass('disabled');
    var count = 60;
    smsCaptcha.unbind('click');
    var timer = setInterval(function () {
        count -= 1;
        smsCaptcha.text(count+'s');
        if(count<=0){
            clearInterval(timer);
            smsCaptcha.removeClass('disabled');
            smsCaptcha.text('发送验证码');
            self.listenSmsCaptchaEvent();
        }
    },1000);
};


Auth.prototype.listenSmsCaptchaEvent = function(){
    var self = this;
    var smsCaptcha = $('.sms_captcha_btn');
    var telephoneInput = $('#p3');
    smsCaptcha.click(function () {
        if(!telephoneInput.val()){
            messageBox.showInfo('请输入手机号码！')
        }
        $.ajax({
            url:'/account/sms_captcha/',
            type:'get',
            data:{
                'telephone':telephoneInput.val()
            },
            success:function (result) {
                if(result['code']===200){
                    self.smsSuccessEvent();
                }
            },
            error:function (error) {
                console.log(error)
            },
        })
    });
};

用到的messageBox消息提示框

// 错误消息提示框

function Message() {
    var self = this;
    self.isAppended = false;
    self.wrapperHeight = 48;
    self.wrapperWidth = 300;
    self.initStyle();
    self.initElement();
    self.listenCloseEvent();
}

Message.prototype.initStyle = function () {
    var self = this;
    self.errorStyle = {
        'wrapper':{
            'background': '#f2dede',
            'color': '#993d3d'
        },
        'close':{
            'color': '#993d3d'
        }
    };
    self.successStyle = {
        'wrapper':{
            'background': '#dff0d8',
            'color': '#468847'
        },
        'close': {
            'color': "#468847"
        }
    };
    self.infoStyle = {
        'wrapper': {
            'background': '#d9edf7',
            'color': '#5bc0de'
        },
        'close': {
            'color': '#5bc0de'
        }
    }
};

Message.prototype.initElement = function () {
    var self = this;
    self.wrapper = $("<div></div>");
    self.wrapper.css({
        'padding': '10px',
        'font-size': '14px',
        'width': '300px',
        'position': 'fixed',
        'z-index': '10000',
        'left': '50%',
        'top': '-48px',
        'margin-left':'-150px',
        'height': '48px',
        'box-sizing': 'border-box',
        'border': '1px solid #ddd',
        'border-radius': '4px',
        'line-height': '24px',
        'font-weight': 700
    });
    self.closeBtn = $("<span>×</span>");
    self.closeBtn.css({
        'font-family': 'core_sans_n45_regular,"Avenir Next","Helvetica Neue",Helvetica,Arial,"PingFang SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi MicroHei",sans-serif;',
        'font-weight': '700',
        'float': 'right',
        'cursor': 'pointer',
        'font-size': '22px'
    });

    self.messageSpan = $("<span class='xfz-message-group'></span>");

    self.wrapper.append(self.messageSpan);
    self.wrapper.append(self.closeBtn);
};

Message.prototype.listenCloseEvent = function () {
    var self = this;
    self.closeBtn.click(function () {
        self.wrapper.animate({"top":-self.wrapperHeight});
    });
};

Message.prototype.showError = function (message) {
    this.show(message,'error');
};

Message.prototype.showSuccess = function (message) {
    this.show(message,'success');
};

Message.prototype.showInfo = function (message) {
    this.show(message,'info');
};

Message.prototype.show = function (message,type) {
    var self = this;
    if(!self.isAppended){
        $(document.body).append(self.wrapper);
        self.isAppended = true;
    }
    self.messageSpan.text(message);
    if(type === 'error') {
        self.wrapper.css(self.errorStyle['wrapper']);
        self.closeBtn.css(self.errorStyle['close']);
    }else if(type === 'info'){
        self.wrapper.css(self.infoStyle['wrapper']);
        self.closeBtn.css(self.infoStyle['close']);
    }else{
        self.wrapper.css(self.successStyle['wrapper']);
        self.closeBtn.css(self.successStyle['close']);
    }
    self.wrapper.animate({"top":0},function () {
        setTimeout(function () {
            self.wrapper.animate({"top":-self.wrapperHeight});
        },3000);
    });
};

window.messageBox = new Message();