ThinkPHP5聚合数据短信验证码接口实现注册/忘记密码功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_32958797/article/details/83997414

1、前端页面主要代码

这里点击发送验证码按钮通过ajax将相关信息传到后端getSms方法中。

<form class="form-horizontal form-signin" method="post" action="{:url('register/forget')}">
        <div class="page-header">
            <h1 class="text-center"><small>Ustate忘记密码</small></h1>
        </div>

        <div class="form-group">
            <label for="mobile" class="sr-only">Mobile</label>
            <input type="tel" id="mobile" class="form-control" placeholder="手机号" name="mobile" required>
        </div>

        <div class="form-group">
            <label for="inputMobileCode" class="sr-only">MobileCode</label>
            <input type="text" id="inputMobileCode" class="form-control" style="display: inline;width: 200px;" name="mobile_code" placeholder="验证码" required>
            <button class="btn btn-info" type="button" id="getyzm" onclick="getCode(document.getElementById('mobile').value)">获取验证码</button>
        </div>

        <div class="form-group">
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" name="password" placeholder="密码" required>
        </div>

        <div class="form-group">
            <label for="inputSecondPassword" class="sr-only">SecPassword</label>
            <input type="password" id="inputSecondPassword" class="form-control" name="password_confirm" placeholder="确认密码" required>
        </div>

        <a href="{:url('login/index')}" class="button pull-right" style="margin: 0 0 10px 0;">返回登录</a>
        <div class="form-group">
            <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
        </div>
    </form>

点击发送验证码之后，根据状态码判断是否启动定时器，如果为true则验证码发送成功，定时器启动，如果为false则跳出相关错误信息的弹窗。

function getCode(phone){
        if(!(/^1[34578]\d{9}$/.test(phone))){
            alert("手机号码有误，请重填");
            return ;
        }
        $.ajax({
            type : "post",
            url : "{:url('getSms')}",
            data : {'mobile':phone,'type':'forget'},
            dataType : "json",
            success:function(result){
                if(!result.bools){
                    alert(result.msg)
                }else{
                    showtime(60);
//                    console.log(result.msg);
                }
            }
        })
    }
    //显示时间
    var showtime = function(t){
        $("#getyzm").attr('disabled',true);
        for(i=1;i<=t;i++){
            window.setTimeout(updatetime, i * 1000,i,t);
        }
    }
    //更新时间
    var updatetime = function(num,t){
        if(num == t){
            $("#getyzm").attr('disabled',false);
            $("#getyzm").text("重新发送");
        }else{
            remaintime = t - num;
            $("#getyzm").text(remaintime + " 秒后重新发送");
        }

2、后端主要代码

getSms主要进行一些逻辑性的判断和调用。

//发送验证码
    public function getSms(){

        if(!request()->isPost()){
            $this->error('当前请求非法！');
        }

        $data = input('post.');
        if(!isMobile($data['mobile'])){
            return json(array('bools'=>false,'msg'=>'手机号码不符合格式'));
        }
        //判断是否超过验证码有效期
        if(Session::has('mobile_code','yzm')){
            if(time() - session('session_start_time','','yzm') < 60*15){
                return json(array('bools'=>false,'msg'=>'验证码15分钟内有效'));
            }else{
                session('mobile_code',null,'yzm');
            }
        }
        //判断是忘记密码还是注册账户
        if($data['type'] == 'forget'){
            $result = AdminModel::hasUser($data['mobile']);
            if($result['flag']){
                return $this->sendSms($data['mobile']);
            }else{
                return json(array('bools'=>false,'msg'=>'该手机号未注册'));
            }
        }
        if($data['type'] == 'register'){
            $result = AdminModel::hasUser($data['mobile']);
            if($result['flag']){
                return json(array('bools'=>false,'msg'=>$result['msg']));
            }{
                return $this->sendSms($data['mobile']);
            }
        }
    }

sendSms为发送验证码的核心方法，sendSms的主要代码在聚合数据给的案例里也有，我这里进行了部分修改。将生成验证码的时间也存储到session中，在上面调用的时候可以对验证码的时效进行严格的控制。

//发送验证码
    public function sendSms($mobile){
        $code = rand(1000,9999);
        session('mobile_code',$code,'yzm');
        session('session_start_time',time(),'yzm');
        $params = array(
            'key'   => Config::get('juheSMS')['key'], //您申请的APPKEY
            'mobile'    => $mobile, //接受短信的用户手机号码
            'tpl_id'    => Config::get('juheSMS')['tpl_id'], //您申请的短信模板ID，根据实际情况修改
            'tpl_value' =>'#code#='.$code.'&#company#=蛋叔科技' //您设置的模板变量，根据实际情况修改
        );

        $paramstring = http_build_query($params);
        $content = juheCurl(Config::get('juheSMS')['url'], $paramstring, 1);
        if($content){
            $result = json_decode($content, true);
            $error_code = $result['error_code'];
            if($error_code == 0){
                //状态为0，说明短信发送成功
                return json(array('bools'=>true,'msg'=>'短信发送成功，短信ID：'.$result['result']['sid']));
            }else{
                //状态非0，说明失败
                $msg = $result['reason'];
                return json(array('bools'=>false,'msg'=>'短信发送失败！('.$error_code.'):'.$msg));
            }
        }else{
            return json(array('bools'=>false,'msg'=>'短信已发送，未收到请重试'));
        }
    }