Flask项目-短信验证码

Posted littlefivebolg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flask项目-短信验证码相关的知识,希望对你有一定的参考价值。

 

  本篇主要实现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="发送成功")

  关于第三方平台,可以参考:

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

 

以上是关于Flask项目-短信验证码的主要内容,如果未能解决你的问题,请参考以下文章

Flask实战第41天:发送短信验证码

我的第一个Flask项目

Web项目中手机注册短信验证码实现的全流程及代码

短信验证码api

Vue实战项目之获取手机短信验证码

源码分享php怎样接入短信验证码,对接短信验证码接口