Flask项目-短信验证码

Posted 2021-01-07 littlefivebolg

 

　　本篇主要实现flask应用的短信验证码的逻辑实现，其用到的第三方应用为云通信，其也是通过前端更加需求发送请求，后端接收到请求完成相关业务逻辑。

一、前端业务逻辑实现

　　其html代码如下：

<div class="form_group">
    <input type="text" name="smscode" id="smscode" class="code_pwd">
    <div class="input_tip">手机验证码</div>
    <a href="javascript:;" class="get_code" onclick="sendSMSCode()">点击获取验证码</a>
    <div id="register-sms-code-err" class="error_tip">验证码不能为空</div>
</div>

　作为前端人员，需要做的是：

• 当用户点击获取验证码时，对用户的填写的信息做第一步校验，并且获取参数（用户手机号、图片验证码内容、以及图片验证码ID）。
• 在拿到参数之后，向后端发送请求。
• 若请求成功，并且后端完成短信验证码的功能时，设置计时器，得到用户填写短信验证码。

// 发送短信验证码
function sendSMSCode() {
    // 校验参数，保证输入框有数据填写
    $(".get_code").removeAttr("onclick");
    var mobile = $("#register_mobile").val();
    if (!mobile) {
        $("#register-mobile-err").html("请填写正确的手机号！");
        $("#register-mobile-err").show();
        $(".get_code").attr("onclick", "sendSMSCode();");
        return;
    }
    var imageCode = $("#imagecode").val();
    if (!imageCode) {
        $("#image-code-err").html("请填写验证码！");
        $("#image-code-err").show();
        $(".get_code").attr("onclick", "sendSMSCode();");
        return;
    }

    // 发送短信验证码
    var params = {
        "mobile": mobile,
        "image_code": imageCode,
        "image_code_id": imageCodeId
    }
    $.ajax({
        url: "/passport/sms_code",
        type: "post",
        data: JSON.stringify(params),
        headers: {
            "X-CSRFToken": getCookie("csrf_token")
        },
        contentType:"application/json",
        success: function (resp) {
            if (resp.errno == "0"){
                var num = 60;
                var t = setInterval(function () {
                    if (num == 1){

                        clearInterval(t);
                        $(".get_code").html("获取验证码");
                        $(".get_code").attr("onclick", "sendSMSCode();")

                    }else{
                        num -= 1;
                        $(".get_code").html(num + "秒")
                    }
                }, 1000)

            }else{
                $("#register-sms-code-err").html(resp.errmsg);
                $("#register-sms-code-err").show();
                $(".get_code").attr("onclick", "sendSMSCode();")
                if (resp.errno == "4004") {
                    generateImageCode()
                }
            }
        }
    })
}

　　通常会有一个接口文档，后端需要根据需求判断需要哪些参数，上例中：

• 手机号   ----（利用手机号通过第三方平台发送短信）
• 图片验证码内容  ----（做校验，若图片验证码错误自然不能发送短信）
• 图片验证码ID ----（后端需要通过该ID从redis中获取整数的图片验证码文本信息。）

二、后端业务逻辑实现

　对于后端而言，还是以下四个步骤：

　　获取参数、校验参数、业务逻辑、返回响应。

　我们需要实现的是：

　　一、对参数校验 ，校验手机号的规则是否正确、图片验证码是否与redis中真实验证码是否一致、该用户是否已经注册等

　　二、若校验均通过，需要利用第三方平台发送验证码，并将该短信验证码保存到redis中，方便用户点击注册的时候校验。

@passport_blu.route("/sms_code", methods=["POST"])
def send_sms_code():

    json_data = request.json
    mobile = json_data.get("mobile")
    image_code = json_data.get("image_code")
    image_code_id = json_data.get("image_code_id")

    if not all([mobile, image_code, image_code_id]):
        return jsonify(errno=RET.PARAMERR, errmsg="参数不全")

    if not re.match("^1[3578][0-9]{9}$", mobile):
        return jsonify(errno=RET.DATAERR, errmsg="手机号不正确")

    try:
        real_image_code = redis_store.get("ImageCode_" + image_code_id)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR,errmsg="数据库查询错误")

    if not real_image_code:
        return jsonify(errno=RET.DBERR,errmsg="验证码已经过期")

    if real_image_code.lower() != image_code.lower():
        return jsonify(errno=RET.DATAERR,errmsg="验证码输入错误")
    # num1 = int(real_image_code[:1])
    # num2 = int(real_image_code[2:3])
    # num = num1 + num2
    # if num != int(image_code):
    #     return jsonify(errno=RET.DATAERR, errmsg="验证码输入错误")

    try:
        user = User.query.filter_by(mobile=mobile).first()
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR,errmsg="数据库查询错误")

    if user:
        return jsonify(errno=RET.DATAEXIST,errmsg="该手机号已经被注册")

    # 后端自己生成验证码
    result = random.randint(0, 999999)
    sms_code = "%06d" % result
    print("短信验证码是：{}".format(sms_code))
    # 屌用第三方去发送短信
    # result = CCP().send_template_sms(mobile, [sms_code, constants.SMS_CODE_REDIS_EXPIRES / 60], "1")
    # if result != 0:
    #     return jsonify(errno=RET.THIRDERR, errmsg="发送短信失败")

    try:
        redis_store.set("SMS_" + mobile, sms_code, constants.SMS_CODE_REDIS_EXPIRES)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg="手机验证码保存失败")

    return jsonify(errno=RET.OK, errmsg="发送成功")

　　关于第三方平台，可以参考：

• 云通讯：http://www.yuntongxun.com/
• 文档及Demo地址：http://www.yuntongxun.com/doc/ready/demo/1_4_1_2.html

　　关于云通讯的使用接口，通过该官网的相关文档去获取，也可以找度娘，这里便不再复述了。