首页  >  文章  >  后端开发  >  PHP实现的登录,注册及密码修改功能

PHP实现的登录,注册及密码修改功能

墨辰丷
墨辰丷原创
2018-05-30 14:40:414238浏览

这篇文章主要介绍了PHP实现的登录,注册及密码修改功能,结合实例形式分析了php实现登陆功能的相关数据库操作、ajax交互、数据验证及验证码相关操作技巧,需要的朋友可以参考下

这里介绍注册,登录,修改密码的界面布局与功能实现:

1.登录

2.忘记密码

3.免费注册

页面布局:

<p id="views" class="views">
  <p id="view-login" class="page-view view-login active">
    <present name="wxuser">
      <p id="wxuser" class="form-group text-center">
        <p>
          <img src="{sh:$wxuser.headimgurl}">
        </p>
        <h4 class="nickname">{sh:$wxuser.nickname}</h4>
      </p>
    </present>
    <!--登录-->
    <p id="login" class="step">
      <h4 class="popup-title login">登录</h4>
      <p class="go-forget">忘记密码</p>
      <form class="form-horizontal" role="form" type="get">
        <p class="form-group">
          <label>手机号码</label>
          <input type="tel" name="tel" class="form-item" id="tel_num" placeholder="请输入手机号码" value="">
        </p>
        <p class="form-group">
          <label>登录密码</label>
          <input type="password" name="password" class="form-item" placeholder="请填写密码">
        </p>
        <p class="js-help-info error"></p>
      </form>
      <p class="popup-options">
        <button type="button" class="btn btn-block btn-success js-login">确认</button>
      </p>
      <p class="go-register">免费注册</p>
    </p>
    <!--注册-->
    <p id="register" class="step" style="display:none;">
      <h4 class="popup-title">注册账号</h4>
      <form role="form" class="form-horizontal">
        <p class="form-group">
          <label>手机号码</label>
          <input type="tel" name="tel" class="form-item" id="tel_num" placeholder="请输入手机号码" value="">
        </p>
        <p class="form-group form-group-r">
          <label>验证码</label>
          <button class="btn-sm btn-white js-sms-code" type="button">获取验证码</button>
          <input type="text" placeholder="请填写验证码" class="form-item" name="smscode" />
        </p>
        <p class="form-group">
          <label>登录密码</label>
          <input type="password" placeholder="设置登录密码" class="form-item" name="password" maxlength="30">
        </p>
        <p class="form-group">
          <label>确认密码</label>
          <input type="password" placeholder="确认登录密码" class="form-item" name="re_password" maxlength="30">
        </p>
        <p class="js-help-info error">
        </p>
      </form>
      <p class="popup-options">
        <button type="button" class="btn btn-block btn-success js-register">确认</button>
      </p>
      <p class="go-login">立即登录</p>
    </p>
    <!--修改密码-->
    <p id="changePwd" class="step" style="display:none;">
      <h4 class="popup-title">修改密码</h4>
      <form role="form" class="form-horizontal">
        <p class="form-group">
          <label>手机号码</label>
          <input type="tel" name="tel" class="form-item" id="tel_num" placeholder="请输入手机号码" value="">
        </p>
        <p class="form-group form-group-r">
          <label>验证码</label>
          <button class="btn-sm btn-white js-sms-excode" type="button">获取验证码</button>
          <input type="text" placeholder="请填写验证码" class="form-item" name="smscode" />
        </p>
        <p class="form-group">
          <label>新密码</label>
          <input type="password" placeholder="设置登录密码" class="form-item" name="password" maxlength="30">
        </p>
        <p class="form-group">
          <label>确认密码</label>
          <input type="password" placeholder="确认登录密码" class="form-item" name="re_password" maxlength="30">
        </p>
        <p class="js-help-info error">
        </p>
      </form>
      <p class="popup-options">
        <button type="button" class="btn btn-block btn-success js-changePwd">确认</button>
      </p>
      <p class="go-login">立即登录</p>
    </p>
  </p>
</p>

js处理:

<script type="text/javascript">
var tel = &#39;&#39;;
$(function() {
  var check = {
    checkPwd: function(password) {
      if (typeof password == &#39;undefined&#39; || password == &#39;&#39;) {
        return false;
      }
      return true;
    },
    checkSmscode: function(code) {
      if (typeof code == &#39;undefined&#39; || code == &#39;&#39;) {
        return false;
      }
      return true;
    },
    validTel: function(value) {
      return /^((\+86)|(86))?(1)\d{10}$/.test(&#39;&#39; + value);
    }
  }
  //登录
  $(".js-login").click(function() {
    var tel = $("#login").find("input[name=&#39;tel&#39;]").val();
    if (!check.validTel(tel)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入正确的手机号&#39;); //**提示下个页面还有
      return false;
    }
    var password = $("#login").find("input[name=&#39;password&#39;]").val();
    if (!check.checkPwd(password)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入密码&#39;);
      return false;
    }
    $(&#39;.js-login&#39;).attr("disabled", "disabled");
    $.ajax({
      url: "{sh::U(&#39;Home/userLogin&#39;)}",
      type: &#39;POST&#39;,
      dataType: "json",
      data: {
        tel: tel,
        password: password
      },
      success: function(response) {
        if (response.result) {
          location.href = response.href;
        } else {
          setTimeout(function() {
            $(&#39;.js-login&#39;).removeAttr("disabled");
          }, 500);
          $(&#39;.js-help-info&#39;).html(response.error);
        }
      },
      error: function() {
        $(&#39;.js-help-info&#39;).html("请求失败");
      }
    });
  });
  //注册
  $(".js-register").click(function() {
    var tel = $("#register").find("input[name=&#39;tel&#39;]").val();
    if (!check.validTel(tel)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入正确的手机号&#39;); //**提示下个页面还有
      return false;
    }
    var password = $("#register input[name=&#39;password&#39;]").val();
    var smscode = $("#register input[name=&#39;smscode&#39;]").val();
    var re_password = $("#register input[name=&#39;re_password&#39;]").val();
    if (!check.checkSmscode(smscode)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入验证码&#39;);
      return false;
    }
    if (!check.checkPwd(password)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入登录密码&#39;);
      return false;
    }
    if (!check.checkPwd(re_password)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入确认密码&#39;);
      return false;
    } else if (password != re_password) {
      $(&#39;.js-help-info&#39;).html(&#39;两次输入的密码不一致&#39;);
      return false;
    }
    $(&#39;.js-login&#39;).attr("disabled", "disabled");
    $.ajax({
      url: "{sh::U(&#39;Home/userRegister&#39;)}",
      type: &#39;POST&#39;,
      dataType: "json",
      data: {
        tel: tel,
        password: password,
        smscode: smscode
      },
      success: function(response) {
        if (response.result) {
          location.href = response.href;
        } else {
          setTimeout(function() {
            $(&#39;.js-login&#39;).removeAttr("disabled");
          }, 500);
          $(&#39;.js-help-info&#39;).html(response.error);
        }
      },
      error: function() {
        $(&#39;.js-help-info&#39;).html("请求失败");
      }
    });
  });
  //发送验证码
  $(&#39;.js-sms-code&#39;).click(function() {
    var tel = $(&#39;#register #tel_num&#39;).val();
    if (!check.validTel(tel)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入正确的手机号&#39;); //**提示下个页面还有
      return false;
    }
    // 检测是否已经注册
    $.ajax({
      url: "{sh::U(&#39;Home/checkTel&#39;)}",
      type: &#39;POST&#39;,
      dataType: "json",
      async: false,
      data: {
        tel: tel
      },
      success: function(json) {
        checkRes = json.status;
      },
      error: function(json) {
        $(&#39;.js-help-info&#39;).html("发送失败");
      }
    });
    if (checkRes == 1) {
      $(&#39;.js-help-info&#39;).html("已是注册用户");return false;
    }
    if (checkRes == 3) {
      $(&#39;.js-help-info&#39;).html("错误的请求");return false;
    }
    $(this).attr("disabled", "disabled").html("<span style=&#39;color:#666&#39;><span id=&#39;countdown&#39;>60</span>s 后再试</span>");
    countdown();
    $.ajax({
      url: "{sh::U(&#39;Home/sendSmscode&#39;)}",
      type: &#39;POST&#39;,
      dataType: "json",
      data: {
        tel: tel
      },
      success: function() {},
      error: function() {
        $(&#39;.js-help-info&#39;).html("发送失败");
      }
    });
  });
  //修改密码
  $(&#39;.go-forget&#39;).click(function() {
    var tel = $(&#39;#login #tel_num&#39;).val();
    $("#login").hide();
    $("#register").hide();
    $("#changePwd").show();
    $("#changePwd #tel_num").val(tel).focus();
    $(&#39;.js-help-info&#39;).html(&#39;&#39;);
  });
  //免费注册
  $(&#39;.go-register&#39;).click(function() {
    var tel = $(&#39;#login #tel_num&#39;).val();
    $("#login").hide();
    $("#changePwd").hide();
    $("#register").show();
    $("#register #tel_num").val(tel).focus();
    $(&#39;.js-help-info&#39;).html(&#39;&#39;);
  });
  //立即登录
  $(&#39;#changePwd .go-login&#39;).click(function() {
    var tel = $(&#39;#changePwd #tel_num&#39;).val();
    $("#register").hide();
    $("#changePwd").hide();
    $("#login").show();
    $("#login #tel_num").val(tel).focus();
    $(&#39;.js-help-info&#39;).html(&#39;&#39;);
  });
  //立即登录
  $(&#39;#register .go-login&#39;).click(function() {
    var tel = $(&#39;#register #tel_num&#39;).val();
    $("#register").hide();
    $("#changePwd").hide();
    $("#login").show();
    $("#login #tel_num").val(tel).focus();
    $(&#39;.js-help-info&#39;).html(&#39;&#39;);
  });
  $(&#39;.js-changePwd&#39;).click(function() {
    var tel = $("#changePwd").find("input[name=&#39;tel&#39;]").val();
    if (!check.validTel(tel)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入正确的手机号&#39;); //**提示下个页面还有
      return false;
    }
    var password = $("#changePwd input[name=&#39;password&#39;]").val();
    var smscode = $("#changePwd input[name=&#39;smscode&#39;]").val();
    var re_password = $("#changePwd input[name=&#39;re_password&#39;]").val();
    if (!check.checkSmscode(smscode)) {
      $(&#39;#changePwd .js-help-info&#39;).html(&#39;请输入验证码&#39;);
      return false;
    }
    if (!check.checkPwd(password)) {
      $(&#39;#changePwd .js-help-info&#39;).html(&#39;请输入新密码&#39;);
      return false;
    }
    if (!check.checkPwd(re_password)) {
      $(&#39;#changePwd .js-help-info&#39;).html(&#39;请输入确认密码&#39;);
      return false;
    } else if (password != re_password) {
      $(&#39;#changePwd .js-help-info&#39;).html(&#39;两次输入的密码不一致&#39;);
      return false;
    }
    $.ajax({
      url: "{sh::U(&#39;Home/changePwd&#39;)}",
      type: "POST",
      dataType: "json",
      data: {
        tel: tel,
        password: password,
        smscode: smscode
      },
      success: function(response) {
        if (response.result) {
          location.href = response.href;
        } else {
          setTimeout(function() {
            $(&#39;.js-login&#39;).removeAttr("disabled");
          }, 500);
          $(&#39;.js-help-info&#39;).html(response.error);
        }
      },
      error: function() {
        $(&#39;.js-help-info&#39;).html("请求失败");
      }
    });
  });
  //发送短信修改密码
  $(&#39;.js-sms-excode&#39;).click(function() {
    var tel = $(&#39;#changePwd #tel_num&#39;).val();
    if (!check.validTel(tel)) {
      $(&#39;.js-help-info&#39;).html(&#39;请输入正确的手机号&#39;); //**提示下个页面还有
      return false;
    }
    // 检测是否已经注册
    $.ajax({
      url: "{sh::U(&#39;Home/checkTel&#39;)}",
      type: &#39;POST&#39;,
      dataType: "json",
      async: false,
      data: {
        tel: tel
      },
      success: function(json) {
        checkRes = json.status;
      },
      error: function(json) {
        $(&#39;.js-help-info&#39;).html("发送失败");
      }
    });
    if (checkRes == 2) {
      $(&#39;.js-help-info&#39;).html("号码尚未注册");return false;
    }
    if (checkRes == 3) {
      $(&#39;.js-help-info&#39;).html("错误的请求");return false;
    }
    $(this).attr("disabled", "disabled").html("<span style=&#39;color:#666&#39;><span id=&#39;countdown&#39;>60</span>s 后再试</span>");
    countdown();
    $.ajax({
      url: "{sh::U(&#39;Home/sendSmsexcode&#39;)}",
      type: &#39;POST&#39;,
      dataType: "json",
      data: {
        tel: tel
      },
      success: function(data) {},
      error: function() {
        $(&#39;.js-help-info&#39;).html("请求失败");
      }
    });
  });
});
function countdown() { // 递归 验证码倒计时
  setTimeout(function() {
    var time = $("#countdown").text();
    if (time == 1) {
      $(&#39;.js-sms-code&#39;).removeAttr("disabled");
      $(&#39;.js-sms-code&#39;).html("发送验证码");
      $(&#39;.js-sms-excode&#39;).removeAttr("disabled");
      $(&#39;.js-sms-excode&#39;).html("发送验证码");
    } else {
      $("#countdown").text(time - 1);
      countdown();
    }
  }, 1000);
}
</script>

php后台处理:

//用户登录
public function userLogin() {
  if(IS_AJAX && !$this->member) {
   $tel = $this->_post(&#39;tel&#39;, &#39;trim&#39;);
   $password = $this->_post(&#39;password&#39;, &#39;trim,md5&#39;);
   $member = M(&#39;Member&#39;)->where(array(&#39;tel&#39; => $tel))->find();
   if ($member && $member[&#39;password&#39;] === $password) {
    //检测是否存在微信用户需要绑定
    if ($member[&#39;wxuser_id&#39;] == 0 && $this->wxuser) {
     M(&#39;Member&#39;)->where(array(&#39;id&#39; => $member[&#39;id&#39;]))->save(array(&#39;wxuser_id&#39; => $this->wxuser_id));
    }
    $href = session(LASTREQUEST);
    session(MEMBER, $member[&#39;id&#39;]);
    session(LASTREQUEST, null);
    $this->ajaxReturn(array(&#39;result&#39; => true, &#39;href&#39; => $href ? $href : U(&#39;Member/index&#39;)));
   } else {
    if (empty($member)) {
     $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;手机号尚未注册.&#39;));
    } else {
     $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;密码不正确.&#39;));
    }
   }
  } else {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;非法请求.&#39;));
  }
}
// 用户退出
public function userLogout() {
  session(WXUSER, null);
  session(MEMBER, null);
  $this->success(&#39;退出成功&#39;,U(&#39;Store/Member/index&#39;));
}
// 用户注册
public function userRegister() {
  $tel = $this->_post(&#39;tel&#39;, &#39;trim&#39;);
  $password = $this->_post(&#39;password&#39;, &#39;trim,md5&#39;);
  $smscode = $this->_post(&#39;smscode&#39;, &#39;trim&#39;);
  $session_smscode = session($this->smscode);
  $user_exit = M(&#39;Member&#39;)->where(array(&#39;tel&#39; => $tel))->find();
  if (!preg_match("/1[3458]{1}\d{9}$/", $tel) && $user_exit) {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;手机号不合法&#39;));
  }
  $memberModel = M(&#39;Member&#39;);
  // 检测是否已注册
  $member = $memberModel-> where(array(&#39;tel&#39; =>$tel,&#39;status&#39;=>1))->find();
  if (!empty($member)) {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;已是注册用户&#39;));
  }
  if (time() > $session_smscode[&#39;time&#39;] || $smscode != $session_smscode[&#39;code&#39;]) {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;验证码不正确&#39;)); //--调试,先把验证功能关闭
  }
  $data = array(&#39;tel&#39; => $tel, &#39;password&#39; => $password, &#39;wxuser_id&#39; => intval($this->wxuser_id), &#39;addtime&#39; => time());
  $insert_id = $memberModel->add($data);
  if ($insert_id) {
   $href = session(LASTREQUEST);
   session(MEMBER, $insert_id); //*****只是一个id值
   $this->ajaxReturn(array(&#39;result&#39; => true, &#39;href&#39; => $href ? $href : U(&#39;Member/index&#39;)));
  } else {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;操作失败&#39;, &#39;msg&#39; => M(&#39;Member&#39;)->getError()));
  }
}
//用户更改密码
public function changePwd(){
  $tel = $this->_post(&#39;tel&#39;,&#39;trim&#39;);
  $password = $this ->_post(&#39;password&#39;,&#39;trim&#39;);
  $smscode = $this ->_post(&#39;smscode&#39;,&#39;trim&#39;);
  $session_smscode = session($this ->smscode);
  if (time() > $session_smscode[&#39;time&#39;] || $smscode != $session_smscode[&#39;code&#39;]) {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;验证码不正确&#39;)); //--调试成功
  }
  $data = array(&#39;password&#39; => md5($password), &#39;addtime&#39; => time());
  $memberModel = M(&#39;Member&#39;);
  // 检测是否已注册
  $member = $memberModel-> where(array(&#39;tel&#39; =>$tel,&#39;status&#39;=>1))->find();
  if (empty($member)) {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;号码尚未注册&#39;));
  }
  if ($memberModel->where(array(&#39;tel&#39;=> $tel))->save($data)) {
   $href = session(LASTREQUEST);
   session(MEMBER, $member[&#39;id&#39;]);
   $this->ajaxReturn(array(&#39;result&#39; => true, &#39;href&#39; => $href ? $href : U(&#39;Member/index&#39;)));
  } else {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;操作失败&#39;, &#39;msg&#39; => M(&#39;Member&#39;)->getError()));
  }
}
// ajax检测号码是否注册
public function checkTel() {
  $tel = $this->_post(&#39;tel&#39;, &#39;trim&#39;);
  if (IS_AJAX && preg_match("/1[3458]{1}\d{9}$/",$tel)) {
   $memberModel = M(&#39;Member&#39;);
   $member = $memberModel->where(array(&#39;tel&#39;=>$tel,&#39;status&#39;=>1))->find();
   if (!empty($member)) {
    $this->ajaxReturn(array(&#39;status&#39; => 1, &#39;info&#39; => &#39;已注册&#39;));
   } else {
    $this->ajaxReturn(array(&#39;status&#39; => 2, &#39;info&#39; => &#39;未注册&#39;));
   }
  } else {
   $this->ajaxReturn(array(&#39;status&#39; => 3, &#39;info&#39; => &#39;错误的请求&#39;));
  }
}
//发送注册验证码
public function sendSmscode() {
  session($this->smstime, null);
  $smstime = session($this->smstime);
  $tel = $this->_post(&#39;tel&#39;, &#39;trim&#39;);
  if (IS_AJAX && (!$smstime || time() > $smstime) && preg_match("/1[3458]{1}\d{9}$/",$tel)) {
   $smscode = rand(1000, 9999);
   //发送验证码
   require LIB_PATH . &#39;ORG/Taobao-sdk-php/TopSdk.php&#39;;
   $c = new TopClient;
   $c->appkey = &#39;23307560&#39;; // 原23294081
   $c->secretKey = &#39;21ef24dd4c51e20693c5db0983c433e7&#39;; // 原0402169f466d8fed780e7f07edd25177
   $req = new AlibabaAliqinFcSmsNumSendRequest;
   $req->setSmsType("normal");
   $req->setSmsFreeSignName("注册验证");
   $req->setSmsParam(&#39;{"code":"&#39;. $smscode .&#39;","product":"【多多助店宝】"}&#39;);
   $req->setRecNum("{$tel}");
   $req->setSmsTemplateCode("SMS_5056863");
   $resp = $c->execute($req);
   if(!$resp->code) {
    //设置发送限制时间
    session($this->smstime, time() + 50);
    //设置验证码5分钟内有效
    session($this->smscode, array(&#39;code&#39; => $smscode, &#39;time&#39; => time() + 600));
   } else {
    //发送失败写入日志文件
    $log = date(&#39;Y-m-d H:i:s&#39;) . " 发送失败 sub_code:{$resp->sub_code} sub_msg:{$resp->sub_msg}" . PHP_EOL;
    file_put_contents(RUNTIME_PATH . &#39;Log/smscode.log&#39;, $log, FILE_APPEND);
   }
   $this->ajaxReturn(array(&#39;result&#39; => !$resp->code));
  } else {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;错误的请求&#39;));
  }
}
//发送修改密码验证码
public function sendSmsexcode(){
  session($this->smstime, null);
  $smstime = session($this->smstime);
  $tel = $this->_post(&#39;tel&#39;, &#39;trim&#39;);
  if (IS_AJAX && (!$smstime || time() > $smstime) && preg_match("/1[3458]{1}\d{9}$/",$tel)) {
   $smscode = rand(1000, 9999);
   //发送验证码
   require LIB_PATH . &#39;ORG/Taobao-sdk-php/TopSdk.php&#39;;
   $c = new TopClient;
   $c->appkey = &#39;23307560&#39;; // 原23294081
   $c->secretKey = &#39;21ef24dd4c51e20693c5db0983c433e7&#39;; // 原0402169f466d8fed780e7f07edd25177
   $req = new AlibabaAliqinFcSmsNumSendRequest;
   $req->setSmsType("normal");
   $req->setSmsFreeSignName("变更验证"); //短信签名固定,不可以换其他字
   $req->setSmsParam(&#39;{"code":"&#39;. $smscode .&#39;","product":"【多多助店宝】"}&#39;);
   $req->setRecNum("{$tel}");
   $req->setSmsTemplateCode("SMS_5056861");
   $resp = $c->execute($req);
   if(!$resp->code) {
    //设置发送限制时间
    session($this->smstime, time() + 50);
    //设置验证码5分钟内有效
    session($this->smscode, array(&#39;code&#39; => $smscode, &#39;time&#39; => time() + 600));
   } else {
    //发送失败写入日志文件
    $log = date(&#39;Y-m-d H:i:s&#39;) . " 发送失败 sub_code:{$resp->sub_code} sub_msg:{$resp->sub_msg}" . PHP_EOL;
    file_put_contents(RUNTIME_PATH . &#39;Log/smscode.log&#39;, $log, FILE_APPEND);
   }
   $this->ajaxReturn(array(&#39;result&#39; => !$resp->code));
  } else {
   $this->ajaxReturn(array(&#39;result&#39; => false, &#39;error&#39; => &#39;错误的请求&#39;));
  }
}

小结:

1.注册与修改密码用到了短信验证。
2.安全起见,前端ajax验证。后端亦进行验证。
3.流程合理,切换自如。
4.功能全面,登录,注册,密码修改齐全。

以上就是本文的全部内容,希望对大家的学习有所帮助。


相关推荐:

PHP实现获取文本框、密码域、按钮的值

PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算的方法

php随机字符串生成方法详解

以上是PHP实现的登录,注册及密码修改功能的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn