PHP+HTML+bootstrap 简单的页面验证

Madman

效果图,输入密码就能访问原始的页面。

超级简单,超级使用的代码!

20240705225405873-图片-1024x433.png

代码:

// 验证密码逻辑
$correct_password = 'www.pbba.cn'; // 设置正确的密码
$is_authenticated = false;

if (isset($_POST['password'])) {
    if ($_POST['password'] === $correct_password) {
        $is_authenticated = true;
    } else {
        echo "<script>alert('密码错误,请重新输入!');</script>";
    }
}

// 如果未经过验证,显示密码输入框
if (!$is_authenticated) {
    echo '
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>密码验证</title>
          <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
        </head>
        <body>
          <div class="container mt-5">
            <div class="row justify-content-center">
              <div>
                <div>
                  <div>
                    <h3 class="card-title text-center">请输入访问密码</h3>
                    <form method="post">
                      <div>
                        <label for="password">密码:</label>
                        <input type="password" id="password" name="password" required>
                      </div>
                      <div>
                        <button type="submit" class="btn btn-primary">确认</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
          <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha1/js/bootstrap.bundle.min.js"></script>
        </body>
        </html>
    ';
    exit; // 停止加载原页面内容

    }

下面是进阶版的代码!

 输入密码后,可以开启缓存。 

 再次刷新,不用继续输入。

session_start();
$correct_password = 'www.pbba.cn'; // 设置正确的密码
// 检查是否已验证过且未过期
if (isset($_SESSION['password_verified']) && $_SESSION['password_verified'] === true) {
    // 检查过期时间
    if (isset($_SESSION['password_expire']) && $_SESSION['password_expire'] >= time()) {
        // 验证通过,继续执行页面加载
        // 你的页面内容和逻辑放在这里
    } else {
        // 过期了,要求重新输入密码
        unset($_SESSION['password_verified']);
        unset($_SESSION['password_expire']);
        require_password();
    }
} else {
    // 如果是第一次访问或者验证未通过,要求输入密码
    require_password();
}
function require_password() {
    if (isset($_POST['password'])) {
        global $correct_password;
        // 验证密码
        if ($_POST['password'] === $correct_password) {
            // 设置验证通过的 Session 变量和过期时间
            $_SESSION['password_verified'] = true;
            $_SESSION['password_expire'] = time() + (2 * 24 * 60 * 60); // 两天后的时间戳
            // 重定向或继续加载页面
            header('Location: ' . $_SERVER['PHP_SELF']);
            exit;
        } else {
            echo "<script>alert('密码错误,请重新输入!');</script>";
        }
    }
    // 显示密码输入框的 HTML
    echo '
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>密码验证</title>
          <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
        </head>
        <body>
          <div class="container mt-5">
            <div class="row justify-content-center">
              <div>
                <div>
                  <div>
                    <h3 class="card-title text-center">请输入访问密码</h3>
                    <form method="post">
                      <div>
                        <label for="password">密码:</label>
                        <input type="password" id="password" name="password" required>
                      </div>
                      <div>
                        <button type="submit" class="btn btn-primary">确认</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
          <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha1/js/bootstrap.bundle.min.js"></script>
        </body>
        </html>
    ';
    exit; // 停止加载原页面内容
}
// 继续加载原页面内容



文章版权声明:除非注明,否则均为Madman博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,1472人围观)

还没有评论,来说两句吧...