注册简单流程及短信验证码的发送

一、书写前端页面并前端验证

1、对于注册页面进行排版布局

	<label class="control-label">手机号：</label>
  <input type="text" id="phone" name="phone" placeholder="请输入你的手机号" class="input-xfat input-xlarge">
<span class="error"></span>
<label for="inputPassword" class="control-label">验证码：</label>
<input type="text" id="code" name="code" placeholder="验证码" class="input-xfat input-xlarge" style="width:120px">
<button type="button" class="btn-xlarge" id="dyMobileButton" onclick="add($(this))">发送验证码</button>
<label for="inputPassword" class="control-label">登录密码：</label>
<input type="password" id="password" name="password" placeholder="设置登录密码" class="input-xfat input-xlarge">
<label for="inputPassword" class="control-label">确认密码：</label>
<input type="password" id="repassword" name="repassword" placeholder="再次确认密码" class="input-xfat input-xlarge">
<a onclick="insert()" id="reg_btn" class="sui-btn btn-block btn-xlarge btn-danger reg-btn" href="javascript:;">完成注册</a>

2、前端页面的验证 及 短信 倒计时

<script>
//短信验证码发送
     function add(onself) {
         //手机号
		 var phone=$("#phone").val();
		 if(phone=='' || phone.length!=11){
			 $("#phone").next().text('手机号码参数错误');
			 return false;
		 }else {
			 $("#phone").next().text('');
		 }
		 //ajax
		 $.ajax({
			 url:"code",
			 dataType:"json",
			 type:"post",
			 data:{
			 	phone:phone
			 },
			 success:function (res) {
                    console.log(res);
			 }
		 })
		 //计时器
		 var count =60;
		 var countdown = setInterval(Countdown,1000);
		 function Countdown() {
			 onself.attr("disabled",true);
			 onself.text(count+"s后重试!");
			 if(count == 0){
				 onself.text("发送验证码").removeAttr("disabled");
				 clearInterval(countdown);
			 }
			 count--;
		 }
	 }

//注册
	function insert() {
//找对象并验证
        //手机号码
		var phone=$("#phone").val();
		if(phone==''){
			$("#phone").next().text('手机号为空');
			return false;
		}else{
			$("#phone").next().text('');
		}
		//验证码
		var code=$("#code").val();
		if(code==''){
			$(".error").eq(1).text('验证码为空');
			return false;
		}else {
			$(".error").eq(1).text('');
		}
		//登录密码
		var password=$("#password").val();
		if(password==''){
			$("#password").next().text('登录密码为空');
			return false;
		}else{
			$("#password").next().text('');
		}
		//确认密码
		var repassword=$("#repassword").val();
		if(repassword==''){
			$("#repassword").next().text('确认密码为空');
			return false;
		} else if(repassword != password){
			$("#repassword").next().text('与登录密码不符');
			return false;
		}else{
			$("#repassword").next().text('');
		}
		//ajax提交
		$.ajax({
			url:"insert",
			dataType: "json",
			type: 'post',
			data:{
				phone:phone,
				code:code,
				password:password,
				repassword:repassword,
			},
			success:function (res) {
                   if(res.code==200){
                   	 alert('注册成功!');
                   	 return true;
				   }else {
                   	 alert('注册失败!');
                   	 return false;
				   }
			}
		})
	}
</script>

二、短信验证码接口

1、封装短信验证码 及curl 发送路径

1.1 短信验证码 可以通过短信宝 提供的实例接口说明_马上使用更好的短信服务-短信宝官网

/*
 * 短信验证码
 * */
if(!function_exists("code")){
    function code($phone,$code){
        $statusStr = array(
            "0" => "短信发送成功",
            "-1" => "参数不全",
            "-2" => "服务器空间不支持,请确认支持curl或者fsocket，联系您的空间商解决或者更换空间！",
            "30" => "密码错误",
            "40" => "账号不存在",
            "41" => "余额不足",
            "42" => "帐户已过期",
            "43" => "IP地址限制",
            "50" => "内容含有敏感词"
        );
        $smsapi = "http://api.smsbao.com/";
        $user = "******"; //短信平台帐号
        $pass = '*********'; //短信平台密码
        $content="【未来科技】您的验证码为 {$code}，5分钟内有效。若非本人操作，请忽略此消息。";//要发送的短信内容
        $phone = $phone;//要发送短信的手机号码
        $sendurl = $smsapi."sms?u=".$user."&p=".$pass."&m=".$phone."&c=".urlencode($content);
        #使用curl 返回
//        $result =file_get_contents($sendurl) ;
        $resutl=curl($sendurl);
        return $statusStr[$resutl];
    }
}

2.2CURL发送路径

/*
 * 封装curl
 * */
if(!function_exists('curl')){
    function curl($url,$post_data='',$method='get',$header='',$type='http'){
        #第一步 初始化一个句柄
        $ch = curl_init($url);
        #如果提交选项 post
        if(strtolower($method)=='post'){
            #curl_setopt 设置一个curl传输此项
            curl_setopt($ch,CURLOPT_POST,true);
            curl_setopt($ch,CURLOPT_POSTFIELDS,$post_data);
        }
        #第二步执行
        curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
        $result = curl_exec($ch);
        #关闭
        curl_close($ch);
        return $result;
    }
}

2、验证码需要手机号

    /*
     * 验证码
     * */
     public function code(Request $request){
         try {
             //接值 手机号
             $phone=$request->param('phone');
             //业务逻辑层
            $data= \app\home\business\Login::code($phone);
             return success(200,'验证码发送成功',$data);
         }catch (Exception $exception){
             return fail(200,$exception->getMessage(),'');
         }
     }

3、通过手机号发送反正验证码

 //验证码
    public static function  code($phone){
        //随即生成验证码
        $code=rand(0000,9999);
        $code_key='code_key'.$phone;   #每个手机号都是独立的
        $time_key='key_key'.$phone;    #存储发送时间
        cache($code_key,$code,300);
        //一分钟只能发送一次
        #获取第一次发送时间
        $first_send_time=cache($time_key);
        #判断第二次发送请求是否在1分钟内
        #当前时间-第一次时间小于60s
        if($first_send_time && time()-$first_send_time<60){
            throw  new Exception('发送频繁,请稍后尝试');
        }
        #记录第一次时间
        cache($time_key,time(),60);
        return $code;
        //发送验证码
        code($phone,$code);

    }

三、注册接口

3.1 接收表单值 并验证

   public function save(Request $request)
    {
        try{
            //接值
            $data=$request->all();
            //验证参数
            //业务逻辑添加入库
            \app\home\business\Login::insert($data);
            return success(200,'注册成功','');

        }catch (ValidateException $exception){
            return fail(2001,$exception->getError(),'');
        }catch (Exception $exception){
            return fail(2001,$exception->getMessage(),'');
        }
    }

3.2 判断验证码是否输入正确、手机号是否注册、完成入库

//注册
    public static function insert($data){
        //验证验证码是否输入正确
        #获取表单验证码
        $code =$data['code'];
        #cache中验证码
        $cache_code=cache('code_key'.$data['phone']);
        #验证码验证
        if(empty($cache_code)){
            throw new Exception('验证码失效');
        }else if($code != $cache_code){
            throw new Exception('验证码错误');
        }
        //验证手机号是否注册
        #查库验证
        $is_phone=User::where('phone',$data['phone'])->find();
        if($is_phone){
            throw new Exception('手机号已经被注册');
        }
        //添加入库
        return User::create([
            'username'=>$data['phone'],
            'nickname'=>substr_replace($data['phone'],'****',4,4),
            'phone'=>$data['phone'],
            'password'=>$data['password'],
        ]);
    }