系統架構

• 登錄頁 (login.html)：輸入帳號密碼，AJAX 提交至 login_check.php。
• 驗證端 (login_check.php)：查詢資料庫，驗證成功寫入 Session，返回 JSON。
• 狀態檢查 (check_status.php)：頁面載入時自動檢測是否已登錄。
• 受保護頁 (dashboard.php)：需登錄訪問，驗證 Session。

1. 登錄頁面 (login.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用戶登錄</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<style>
    .form-group { margin-bottom: 15px; }
    label { display: inline-block; width: 80px; }
    input[type=text], input[type=password] { padding: 8px; width: 250px; }
    #msg { margin-top: 10px; height: 20px; }
    .success { color: #090; }
    .error { color: #c33; }
</style>
</head>
<body>
<h2>會員登錄</h2>
<div class="form-group">
    <label>帳號：</label>
    <input type="text" id="username" autocomplete="username">
</div>
<div class="form-group">
    <label>密碼：</label>
    <input type="password" id="password" autocomplete="current-password">
</div>
<button id="btnLogin">登錄</button>
<div id="msg"></div>

<script>
$(function() {
    // 頁面載入檢查登錄狀態
    checkLoginStatus();

    $('#btnLogin').click(function() {
        const username = $('#username').val().trim();
        const password = $('#password').val();
        if (!username || !password) {
            showMsg('請輸入帳號密碼', 'error');
            return;
        }
        $.ajax({
            url: 'login_check.php',
            type: 'POST',
            dataType: 'json',
            data: { username, password },
            beforeSend: () => $('#btnLogin').prop('disabled', true).text('登錄中...'),
            success: function(res) {
                if (res.code === 0) {
                    showMsg('登錄成功，跳轉中...', 'success');
                    setTimeout(() => location.href = 'dashboard.php', 800);
                } else {
                    showMsg(res.msg || '登錄失敗', 'error');
                }
            },
            error: () => showMsg('網絡錯誤', 'error'),
            complete: () => $('#btnLogin').prop('disabled', false).text('登錄')
        });
    });

    function checkLoginStatus() {
        $.getJSON('check_status.php', function(res) {
            if (res.loggedIn) {
                $('#msg').html('<span class="success">已登錄：' + res.username + '</span> <a href="logout.php">登出</a>');
                $('#username, #password, #btnLogin').hide();
            }
        });
    }

    function showMsg(text, type) {
        $('#msg').html('<span class="' + type + '">' + text + '</span>');
    }
});
</script>
</body>
</html>

2. 登錄驗證 (login_check.php)

<?php
session_start();
header('Content-Type: application/json; charset=UTF-8');

$dsn = "mysql:host=localhost;dbname=test;charset=utf8mb4";
$pdo = new PDO($dsn, "root", "", [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);

$username = trim($_POST['username'] ?? '');
$password = $_POST['password'] ?? '';

if (!$username || !$password) {
    exit(json_encode(['code' => 1, 'msg' => '參數缺失']));
}

// 查詢用戶 (實際項目密碼應使用 password_hash 驗證)
$stmt = $pdo->prepare("SELECT id, username, password FROM users WHERE username = ? LIMIT 1");
$stmt->execute([$username]);
$user = $stmt->fetch();

if ($user && password_verify($password, $user['password'])) {
    // 登錄成功
    $_SESSION['user_id'] = $user['id'];
    $_SESSION['username'] = $user['username'];
    $_SESSION['login_time'] = time();
    exit(json_encode(['code' => 0, 'msg' => '登錄成功']));
} else {
    exit(json_encode(['code' => 1, 'msg' => '帳號或密碼錯誤']));
}

3. 狀態檢查 (check_status.php)

<?php
session_start();
header('Content-Type: application/json; charset=UTF-8');

if (!empty($_SESSION['user_id'])) {
    echo json_encode([
        'loggedIn' => true,
        'username' => $_SESSION['username'],
        'user_id' => $_SESSION['user_id']
    ]);
} else {
    echo json_encode(['loggedIn' => false]);
}

4. 受保護頁面 (dashboard.php)

<?php
session_start();
if (empty($_SESSION['user_id'])) {
    header('Location: login.html');
    exit;
}
// 此處為登錄後才可見內容
?>




歡迎，
登錄時間：
安全登出

5. 登出 (logout.php)

<?php
session_start();
$_SESSION = [];
session_destroy();
header('Location: login.html');

安全加固建議

1. 密碼加密： 註冊時使用 password_hash($pwd, PASSWORD_DEFAULT)，驗證用 password_verify()。
2. 防暴力破解： 同一 IP 5 分鐘內登錄失敗超過 5 次暫時封禁（可用 Redis 計數）。
3. HTTPS 強制： 登錄頁必須全站 HTTPS，防止明文傳輸。
4. Session 安全： ini_set('session.cookie_httponly', 1); ini_set('session.cookie_secure', 1); // 僅 HTTPS
5. CSRF 保護： 表單加入隱藏 Token，AJAX 請求攜帶自定義標頭 X-CSRF-Token。