[Javascript/Php] 用户登录验证从简易到进阶

最新推荐文章于 2024-07-27 11:58:54 发布

邓大帅

最新推荐文章于 2024-07-27 11:58:54 发布

阅读量1.2w

点赞数 16

分类专栏： ★ Web前后端开发 ★ PHP

本文链接：https://blog.csdn.net/deng_xj/article/details/96853696

版权

★ Web前后端开发同时被 2 个专栏收录

14 篇文章 4 订阅

订阅专栏

★ PHP

7 篇文章 2 订阅

订阅专栏

在搭建个人网站过程中，我们可能需要前置登陆页面以保护站点私密性与安全性，本文主要介绍如何使用javascript以及PHP，实现登录并跳转界面。

`（1）直接弹框验证`

直接在html头部插入：

<script type="text/javascript">
  loopy()
  function loopy() {
    var sWord =""
    while (sWord != "111111") {//初始密码111111
      sWord = prompt("请输入正确密码!")
    }
  }
</script>

在这里插入图片描述
当然，通过前端方式设置密码验证明显是存在安全问题的，虽然网页访问通过JS做了些防护，但只要在浏览器中关掉js功能就可以查看js源码，据此，我们可以通过给JS加密的方式防止密码的明文泄露。

例如通过 JS在线加密工具将js源码加密：

  <script type="text/javascript">
	var __encode ='sojson.com', _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1[_0xb483[0]]= _0xb483[1]})(window);var __Ox6d318=["","\u8BF7\u8F93\u5165\u6B63\u786E\u5BC6\u7801\x21","\x31\x31\x31\x31\x31\x31"];loopy();function loopy(){var _0xbcd5x2=__Ox6d318[0x0];while(_0xbcd5x2!= __Ox6d318[0x2]){_0xbcd5x2= prompt(__Ox6d318[0x1])}}
  </script>

复制密文测试，同样实现上述实现上述效果。

`（2）页面验证简单版`

首先给一段基础源码:

<script>
        function checkLogon(){
            var name = document.getElementById("username").value;
            var pass = document.getElementById("password").value;
//判断非空
            if((name==null || name=="") || (pass==null || pass=="")){
                alert("用户名或密码不能为空！！");
            }
            else{
                if(name=="你的账户名" && pass=="你的密码"){
                    alert("登录成功！");
//这里写你页面跳转的语句
                    window.location.href="跳转站点";
                }
                else{
                    alert("用户名或密码错误！！");
                }
            }
        }
    </script>

其次就是将代码运用到具体网页中去：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <script>
        function checkLogon(){
            var name = document.getElementById("username").value;
            var pass = document.getElementById("password").value;
//判断非空
            if((name==null || name=="") || (pass==null || pass=="")){
                alert("用户名或密码不能为空！！");
            }
            else{
                if(name=="123" && pass=="123"){
                    alert("登录成功！");
//这里写你页面跳转的语句
                    window.location.href="https://dengxj.blog.csdn.net/";
                }
                else{
                    alert("用户名或密码错误！！");
                }
            }
        }
    </script>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td height="25">用户名</td>
        <td><input name="textfield" type="text" size="14" id="username"></td>
    </tr>
    <tr>
        <td height="25">密码</td>
        <td><input name="textfield2" type="text" size="14" id="password"></td>
    </tr>
    <tr>
        <td height="25" colspan="2"><div align="center">
            <input type="submit" name="Submit" value="登录" onClick="checkLogon()">
        </div></td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

`（3）页面验证进阶——cookie`

前面的登陆需要设置默认访问入口为login页面，并且每次访问将统一跳至登陆页面，显然不利于合法用户的日常使用和访问。这时我们可以尝试用cookie值设置存活时长，在一次验证cookie值存活期间不再验证用户身份，提高用户体验。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
/*cookie获取*/ function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; }; /*登陆页面*/ $(function(){ if(getCookie('msg') != 1){ window.location.href="login.html";}; }); </script>

主页每次登陆后验证 Cookie 值是否为 1 ，如不是 1 跳转至用户验证界面，如是 1 ，跳过验证。

<script>
    function checkLogon(){
        var name = document.getElementById("username").value;
        var pass = document.getElementById("password").value;
//判断非空
        if((name==null || name=="") || (pass==null || pass=="")){
            alert("用户名或密码不能为空！！");
            location.reload() 
        }
        else{
            if(name=="root" && pass=="root"){
            	function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; }; setCookie('msg', '1', '1'); 
                alert("登录成功！");
                window.location.href="/";

            }
            else{
                alert("用户名或密码错误！！");
                location.reload() 
            }
        }
    }
</script>

身份验证成功后将 Cookie 值设置为 1 。

在这里插入图片描述

`（4）页面验证进阶——PHP`

为便于将密码与数据库打通，可以了解Php的实现模式：

<?php
header("Content-type: text/html; charset=utf-8");
function code($user, $pass) {
      $users = ['admin'=>'123456'];
      if(isset($users[$user]) && $users[$user] === $pass) {
        return true;
      } else {
        return false;
      }
}
if(!code(@$_SERVER['PHP_AUTH_USER'], @$_SERVER['PHP_AUTH_PW'])) {
     http_response_code(401);
     header('WWW-Authenticate:Basic realm="My website"');
     echo '需要用户名和密码才能继续访问'; 
     exit;
} else {
    
}
echo "验证成功";

`（5）页面验证再进阶`

在这里插入图片描述

<?php 
$password = "1234"; // 这里是密码 
$p = ""; 
if(isset($_COOKIE["isview"]) and $_COOKIE["isview"] == $password){ 
$isview = true; 
}else{ 
if(isset($_POST["pwd"])){ 
if($_POST["pwd"] == $password){ 
setcookie("isview",$_POST["pwd"],time()+3600*3); 
$isview = true; 
}else{ 
$p = (empty($_POST["pwd"])) ? "需要密码才能查看，请输入密码。" : "密码不正确，请重新输入。"; 
} 
}else{ 
$isview = false; 
$p = "请输入密码查看，获取密码可联系我。"; 
} 
} 
if($isview){ ?> 
这里是密码成功后显示的地方 
<?php }else{ ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns=" http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="pragma" content="no-cache" /> 
<meta http-equiv="cache-control" content="no-cache" /> 
<meta http-equiv="expires" content="0" /> 
<title>请输入密码</title> 
<!--[if lt IE 6]> 
<style type="text/css"> 
.z3_ie_fix{ 
float:left; 
} 
</style> 
<![endif]--> 
<style type="text/css"> 
<!-- 
body{ 
background:none; 
} 
.passport{ 
border:1px solid red; 
background-color:#FFFFCC; 
width:400px; 
height:100px; 
position:absolute; 
left:49.9%; 
top:49.9%; 
margin-left:-200px; 
margin-top:-55px; 
font-size:14px; 
text-align:center; 
line-height:30px; 
color:#746A6A; 
} 
--> 
</style> 
<div class="passport"> 
<div style="padding-top:20px;"> 
<form action="?yes" method="post" style="margin:0px;">输入查看密码 
<input type="password" name="pwd" /> <input type="submit" value="查看" /> 
</form> 
<?php echo $p; ?> 
</div> 
</div> 
<?php 
} ?> 
</body> 
</html>

`（6）页面验证再进阶——连接数据库`

感谢博主：不争气丸子

在这里插入图片描述
一共5个文件：

`login.php`——登录界面

在这里插入图片描述

<!DOCTYPE html>
<html><head>
<title>登录</title>
<meta name="content-type"; charset="UTF-8">
</head><body> 
<div class="content" align="center"> <!--头部-->
 <div class="header"> <h1>登录页面</h1> </div> 
<!--中部--> 
<div class="middle">
 <form id="loginform" action="loginaction.php" method="post"> 
<table border="0"> <tr> 
    <td>用户名：</td> 
<td> <input type="text" id="name" name="username" 
required="required" value="<?php
echo isset($_COOKIE[""]) ? $_COOKIE[""] : ""; ?>"> </td> </tr> 
<tr> <td>密   码：</td> <td><input type="password" id="password" name="password"></td> 
</tr> <tr> <td colspan="2"> <input type="checkbox" name="remember"><small>记住我 </td> </tr> <tr> <td 
colspan="2" align="center" style="color:red;font-size:10px;"> <!--提示信息--> <?php
$err = isset($_GET["err"]) ? $_GET["err"] : "";
switch ($err) {
    case 1:
        echo "用户名或密码错误！";
        break;

    case 2:
        echo "用户名或密码不能为空！";
        break;
} ?> </td> </tr> <tr> <td colspan="2" align="center"> 
<input type="submit" id="login" name="login" value="登录"> <input type="reset" id="reset" 
name="reset" value="重置"> </td> </tr> 
<tr> 
    <td colspan="2" align="center"> 还没有账号，快去<a href="register.php">注册</a>吧</td>
</tr> 
</table> 
</form> 
</div> 
<!--脚部--> 
<div class="footer"> <small>Copyright &copy; 版权所有·欢迎翻版 </div> </div>
</body>
</html>

`loginaction.php`——使login.php实现与数据库的连接，并校正输入

mysqli_connect(“localhost”, “服务器名”, “数据库密码”, “连接的数据库名”);

mysqli_query()函数执行某个针对数据库的查询：mysqli_query(connection,query,resultmode);

connection 必需。规定要使用的 MySQL 连接。
query 必需，规定查询字符串。（这是一个存放mysql命令的字符串，命令内容要用该函数才可实现）
resultmode 可选。一个常量。可以是下列值中的任意一个：

MYSQLI_USE_RESULT（如果需要检索大量数据，请使用这个）
MYSQLI_STORE_RESULT（默认）

mysqli_fetch_array(result,resulttype) 从结果集中取得一行作为关联数组，或数字数组，或二者兼有。

result 必需。规定由 mysqli_query()、mysqli_store_result() 或 mysqli_use_result() 返回的结果集标识符。
resulttype 可选。规定应该产生哪种类型的数组。可以是以下值中的一个：

MYSQLI_ASSOC
MYSQLI_NUM
MYSQLI_BOTH

<?php
// $Id:$ //声明变量
$username = isset($_POST['username']) ? $_POST['username'] : "";
$password = isset($_POST['password']) ? $_POST['password'] : "";
$remember = isset($_POST['remember']) ? $_POST['remember'] : ""; //判断用户名和密码是否为空
if (!empty($username) && !empty($password)) { //建立连接
    $conn = mysqli_connect('localhost', '', '', '连接的数据库名'); //准备SQL语句
    $sql_select = "SELECT username,password FROM usertext WHERE username = '$username' AND password = '$password'"; //执行SQL语句
    $ret = mysqli_query($conn, $sql_select);
    $row = mysqli_fetch_array($ret); //判断用户名或密码是否正确
    if ($username == $row['username'] && $password == $row['password']) 
    { //选中“记住我”
        if ($remember == "on") 
        { //创建cookie
            setcookie("", $username, time() + 7 * 24 * 3600);
        } //开启session
        session_start(); //创建session
        $_SESSION['user'] = $username; //写入日志
        $ip = $_SERVER['REMOTE_ADDR'];
        $date = date('Y-m-d H:m:s');
        $info = sprintf("当前访问用户：%s,IP地址：%s,时间：%s /n", $username, $ip, $date);
        $sql_logs = "INSERT INTO logs(username,ip,date) VALUES('$username','$ip','$date')";
        //日志写入文件，如实现此功能，需要创建文件目录logs
        $f = fopen('./logs/' . date('Ymd') . '.log', 'a+');
        fwrite($f, $info);
        fclose($f); //跳转到loginsucc.php页面
        header("Location:loginsucc.php"); //关闭数据库,跳转至loginsucc.php
        mysqli_close($conn);
    }
    else 
    { 
        //用户名或密码错误，赋值err为1
        header("Location:login.php?err=1");
    }
} else { //用户名或密码为空，赋值err为2
    header("Location:login.php?err=2");
} ?>

mysqli_connect(“localhost”, “服务器名”, “数据库密码”, “连接的数据库名”);

`register.php`——注册界面

在这里插入图片描述

<!DOCTYPE html>
<html>
<head><title>注册</title>
<meta name="content-type"; charset="UTF-8">
</head><body> 
<div class="content" align="center"> <!--头部--> 
<div class="header"> <h1>注册页面</h1> </div> <!--中部--> 
<div class="middle"> 
<form action="registeraction.php" method="post"> <table border="0"> 
<tr> <td>用户名：</td> 
<td><input type="text" id="id_name" name="username" required="required"></td> 
</tr> <tr>
 <td>密   码：</td> <td><input type="password" id="password" name="password" 
required="required"></td> 
</tr> <tr>
 <td>重复密码：</td> <td><input type="password" id="re_password" 
name="re_password" required="required"></td> </tr> <tr>
 <td>性别：</td> <td> <input type="radio" id="sex" name="sex" value="mam">男 <input type="radio" id="sex" name="sex" value="woman">女 </td> </tr> <tr>
 <td>QQ：</td> <td><input type="text" id="qq" name="qq" required="required"></td> </tr> <tr> 
<td>Email：</td> <td><input type="email" id="email" name="email" required="required"></td> </tr> <tr> 
<td>电话：</td> <td><input type="text" id="phone" name="phone" required="required"></td> </tr> <tr> 
<td>地址：</td> <td><input type="text" id="address" name="address" required="required"></td> </tr> 
<tr> <td colspan="2" align="center" style="color:red;font-size:10px;"> <!--提示信息--> 
<?php
$err = isset($_GET["err"]) ? $_GET["err"] : "";
switch ($err) {
    case 1:
        echo "用户名已存在！";
        break;

    case 2:
        echo "密码与重复密码不一致！";
        break;

    case 3:
        echo "注册成功！";
        break;
}
?> 
</td> </tr> <tr> <td colspan="2" align="center"> 
<input type="submit" id="register" name="register" value="注册">
 <input type="reset" id="reset" name="reset" value="重置"> </td></tr> 
 <tr> <td colspan="2" align="center"> 
如果已有账号，快去<a href="login.php">登录</a>吧！ </td> </tr> </table> </form> </div> 
<!--脚部--> 
<div class="footer"> <small>Copyright &copy; 版权所有·欢迎翻版 </div> </div></body></html>

`registeraction.php`——实现register.php连接数据库

<?php
// $Id:$ //声明变量
$username = isset($_POST['username']) ? $_POST['username'] : "";
$password = isset($_POST['password']) ? $_POST['password'] : "";
$re_password = isset($_POST['re_password']) ? $_POST['re_password'] : "";
$sex = isset($_POST['sex']) ? $_POST['sex'] : "";
$qq = isset($_POST['qq']) ? $_POST['qq'] : "";
$email = isset($_POST['email']) ? $_POST['email'] : "";
$phone = isset($_POST['phone']) ? $_POST['phone'] : "";
$address = isset($_POST['address']) ? $_POST['address'] : "";
if ($password == $re_password) { //建立连接
    $conn = mysqli_connect("localhost", "", "", "连接的数据库名"); //准备SQL语句,查询用户名
    $sql_select = "SELECT username FROM usertext WHERE username = '$username'"; //执行SQL语句
    $ret = mysqli_query($conn, $sql_select);
    $row = mysqli_fetch_array($ret); //判断用户名是否已存在
    if ($username == $row['username']) { //用户名已存在，显示提示信息
        header("Location:register.php?err=1");
    } else { //用户名不存在，插入数据 //准备SQL语句
        $sql_insert = "INSERT INTO usertext(username,password,sex,qq,email,phone,address) 
VALUES('$username','$password','$sex','$qq','$email','$phone','$address')"; //执行SQL语句
        mysqli_query($conn, $sql_insert);
        header("Location:register.php?err=3");
    } //关闭数据库
    mysqli_close($conn);
} else {
    header("Location:register.php?err=2");
} ?>

mysqli_connect(“localhost”, “服务器名”, “数据库密码”, “连接的数据库名”);

`loginsucc.php`——登录成功后界面

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title>登录成功</title>
<meta name="content-type";
 charset="UTF-8">
</head>
<body> 
<div> 
<?php
// $Id:$ //开启session
session_start(); //声明变量
$username = isset($_SESSION['user']) ? $_SESSION['user'] : ""; //判断session是否为空
if (!empty($username)) { ?> 
<h1>登录成功！</h1> 欢迎您！
<?php
    echo $username; ?> 
<br/> <a href="login.php">退出</a> //跳转至主网页
<?php
} else { //未登录，无权访问
     ?>
 <h1>你无权访问！！！</h1> 
<?php
} ?> </div>
</body>
</html>

可以将login.php改为其他网页

修改loginaction.php和registeraction.php两个文件中的：
mysqli_connect(“localhost”, “服务器名”, “数据库密码”, “连接的数据库名”);

表名如果不为usertext，需要修改所有为usertext的地方。

在这里插入图片描述

邓大帅

关注

16
点赞
踩
56

收藏

觉得还不错? 一键收藏
打赏
15
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

[Javascript/Php] 用户登录验证 从简易到进阶

（1）直接弹框验证

（2）页面验证简单版

（3）页面验证进阶——cookie

（4）页面验证进阶——PHP

（5）页面验证再进阶

（6）页面验证再进阶——连接数据库

login.php——登录界面

loginaction.php——使login.php实现与数据库的连接，并校正输入

register.php——注册界面

registeraction.php——实现register.php连接数据库

loginsucc.php——登录成功后界面

[Javascript/Php] 用户登录验证从简易到进阶

`（1）直接弹框验证`

`（2）页面验证简单版`

`（3）页面验证进阶——cookie`

`（4）页面验证进阶——PHP`

`（5）页面验证再进阶`

`（6）页面验证再进阶——连接数据库`

`login.php`——登录界面

`loginaction.php`——使login.php实现与数据库的连接，并校正输入

`register.php`——注册界面

`registeraction.php`——实现register.php连接数据库

`loginsucc.php`——登录成功后界面