Pàgina privada

Pàgina privada

Quan un usuari s'autentica amb les seves credencials, pot accedir a una pàgina privada. Dins d'aquesta pàgina es troba:

• Les dades personals de l'usuari
• Les últimes 10 accions de l'usuari
• Les estadístiques d'autenticació
  • Última autenticació
  • Total d'autenticacions, autenticacions mitjançant login normal, auto-login o login-2fa, autenticacions errònies, etc
• Un botó per modificar les dades de l'usuari
• Un botó per tancar la sessió

Inicialització de la sessió i connexió a la BD

Sempre que es treballa amb sessions, el primer que hem de fer és iniciar-la abans d'escriure el codi HTML

session_start();

A més, hem de requerir el fitxer amb les funcions i una connexió a la BD. En aquest cas, únicament mostrarem dades dins la pàgina, per tant farem servir la connexió de lecutra.

require 'funcions.php';
require './connexioBD/connexioR.php';

Recuperació de les dades de l'usuari

Per poder mostrar les dades de l'usuari primer les haurem de recuperar de les taules de la BD

Per això recuperarem l’ID de l’usuari que ha iniciat sessió a partir de la sessió i esborrarem qualsevol codi de verificació residual que hagi quedat de l’autenticació amb 2FA o la verificació del correu electrònic.

// ID de l'usuari
$usuari_id = $_SESSION['usuari']['id'];

unset($_SESSION['codi_verificacio']); // Eliminar codi de sessió

Un cop recuperat la ID de l'usuari, realitzarem una consulta per recuperar les dades personals, les últimes accions i les estadístiques d'autenticació.

Recuperació de les dades personals

Per recuperar les dades personals de l'usuari únicament consultarem els camps de la taula usuaris, cercant el registre amb la mateixa ID que s'ha recuperat de la sessió

    // Consultar dades de l'usuari
    $stmt = $pdo->prepare("
        SELECT nom_usuari, nom_complet, email, email_verificat, telefon, ciutat, edat
        FROM usuaris
        WHERE id = ?
    ");
    $stmt->execute([$usuari_id]);
    $usuari = $stmt->fetch();

Recuperació de les últimes accions

Per recuperar les últimes accions de l'usuari, cercarem de forma descendent per data (més recent a més antic) tots els registres amb l'ID de l'usuari de la sessió. Aquests resultats els limitarem a 10

// Consultar últimes 10 accions i últim login
    $stmt = $pdo->prepare("SELECT accio, ip_client, data_hora FROM activitat WHERE usuari_id = ? ORDER BY data_hora DESC LIMIT 10");
    $stmt->execute([$usuari_id]);
    $historial = $stmt->fetchAll();

Recuperació de les estadístiques d'autenticació

Primer, recuperarem la última autenticació, per això farem una consulta SQL on recuperem tots els registres de la taula activitat on la ID sigui la de l'usuari i l'acció sigui qualsevol tipus de login ordenada de forma descendent per data (més recent a més antiga). Limitarem el resultat a un sol registre que serà l'autenticació més recent.

Un cop recuperat el registre, extrarurem la data i hora de l'acció

    // Últim accés a l'aplicació
    $stmt = $pdo->prepare("
        SELECT data_hora
        FROM activitat
        WHERE usuari_id = ?
        AND accio IN ('login', 'auto-login', 'login-2fa')
        ORDER BY data_hora DESC
        LIMIT 1
    ");

    $stmt->execute([$usuari_id]);
    $ultima_activitat = $stmt->fetch(PDO::FETCH_ASSOC);

    $data_ultim_login = $ultima_activitat['data_hora'] ?? 'N/A';

Seguidament, recuperarem el total d'accions de cada tipus mitjançant una consulta SQL

   // Total autenticacions
   $stmt = $pdo->prepare("
       SELECT 
           SUM(accio = 'login')      AS logins_manuals,
           SUM(accio = 'auto-login') AS auto_logins,
           SUM(accio = 'login-2fa') AS logins_2fa,
           SUM(accio = 'error-login') AS error_logins,
           SUM(accio = 'restablir-contrasenya') AS restabliments_contrasenya,
           SUM(accio IN ('login', 'auto-login', 'login-2fa')) AS total
       FROM activitat
       WHERE usuari_id = ?
   ");
   $stmt->execute([$usuari_id]);
   $autenticacions = $stmt->fetch();

Mostra de les dades

Dades personals

Les dades personals les recuperarem de la consulta SQL realitzada per aquesta part. Mostrarem les dades amb escapament per evitar atacs XSS.

A més a més, es mostrarà si l'email està o no verificat. En cas que no ho estigui, s'inclourà un enllaç per poder verificar-lo

<div class="data-item"><strong>Nom d'usuari:</strong> <?= htmlspecialchars($usuari['nom_usuari']) ?></div>
                <div class="data-item"><strong>Nom complet:</strong> <?= htmlspecialchars($usuari['nom_complet']) ?></div>
                <div class="data-item"><strong>Ciutat:</strong> <?= htmlspecialchars($usuari['ciutat'] ?: '-') ?></div>
                <div class="data-item"><strong>Telèfon:</strong> <?= htmlspecialchars($usuari['telefon'] ?: '-') ?></div>
                <div class="data-item"><strong>Edat:</strong> <?= htmlspecialchars($usuari['edat'] ?: '-') ?> anys</div>
                <div class="data-item email-status">
                    <strong>Email:</strong> <?= htmlspecialchars($usuari['email']) ?>
                    <?php if ($usuari['email_verificat'] === 'si'): ?>
                        <span class="badge badge-success">Verificat</span>
                    <?php else: ?>
                        <span class="badge badge-danger">No verificat <a href="verificaCorreu.php">(Verificar ara)</a></span>
                    <?php endif; ?>
                </div>

Un exemple amb l'email verifcat es visualitzaria de la següent forma

Un exemple amb l'email sense verificar es visualitzaria de la següent forma:

Últimes accions

Mitjançant un foreach a l'array de la consulta SQL realitzada per aquesta part, obtenim els detalls de cada acció.

<section class="card history-card">
                <h3>Historial d'activitat</h3>
                <div class="activity-list">
                    <?php foreach ($historial as $index => $act): ?> 
                        <div class="activity-item <?= $index === 0 ? 'latest' : '' ?>"> <!-- Si és el primer de la llista afegim la classe "latest" -->
                            <span class="activity-date"><?= htmlspecialchars($act['data_hora']) ?></span>
                            <span class="activity-action"><?= htmlspecialchars($act['accio']) ?></span>
                            <span class="activity-ip"><?= htmlspecialchars($act['ip_client']) ?></span>
                        </div>
                    <?php endforeach; ?>
                </div>
            </section>

Un exemple amb diverses accions realitzades es veuria així

Estadístiques d'autenticació

Per últim, d'igual forma que amb les dades personals de l'usuari, mostrarem les estadístiques d'autenticació

<section class="card stats-card">
                <h3>Estadístiques d'accés</h3>
                <div class="stats-list">
                    <div class="stat-row"><span>Total autenticacions</span> <strong><?= $autenticacions['total'] ?></strong></div>
                    <div class="stat-row"><span>Logins manuals</span> <strong><?= $autenticacions['logins_manuals'] ?></strong></div>
                    <div class="stat-row"><span>Auto-logins</span> <strong><?= $autenticacions['auto_logins'] ?></strong></div>
                    <div class="stat-row"><span>Logins 2FA</span> <strong><?= $autenticacions['logins_2fa'] ?></strong></div>
                    <div class="stat-row"><span>Logins erronis</span> <strong class="text-danger"><?= $autenticacions['error_logins'] ?></strong></div>
                    <div class="stat-row"><span>Restabliments de contrasenya</span> <strong><?= $autenticacions['restabliments_contrasenya'] ?></strong></div>
                </div>
            </section>

Les quals es visualitzarien de la següent manera

L'últim accés es mostra a la part superior de la pàgina

<header class="welcome-header">
            <h1>Benvingut, <span><?php echo htmlspecialchars($_SESSION['usuari']['nom_complet']); ?></span></h1>
            <div class="last-access-banner">
                Darrer accés registrat: <strong><?php echo htmlspecialchars($data_ultim_login); ?></strong>
            </div>
        </header>

I es visualitza de la següent manera