Mysql
 sql >> Database >  >> RDS >> Mysql

Gestione account utente, ruoli, permessi, autenticazione PHP e MySQL - Parte 3

Questa è la parte 3 di una serie di tutorial su come creare un sistema di gestione degli account utente. Puoi trovare le altre parti qui: parte 1, parte 2.

Convalida del modulo

A questo punto della pagina signup.php, se fai semplicemente clic sul pulsante di registrazione senza compilare nessuno dei campi del modulo, non ricevi alcun feedback ma anche il modulo non fa nulla. Rimane semplicemente lì a fissarti. Rimane così perché ci sono errori in un $errors dalla nostra funzione validateUser() definita in precedenza che non stiamo ancora visualizzando sul modulo. Questi errori esistono in coppie chiave-valore.

Ad esempio, $errors['username'] contiene l'errore, se presente, per il campo del nome utente. Quindi possiamo verificare se l'errore del nome utente esiste, quindi aggiungiamo la classe bootstrap has-error all'elemento div che racchiude il campo di input del nome utente. Ciò rende il testo dell'etichetta e il bordo di input di colore rosso, indicando che c'è un errore.

Convalideremo il nome utente, l'e-mail, la password e i campi di conferma della password. Quindi apri il tuo file signup.php e sostituisci questi quattro campi con questo codice:

<div class="form-group <?php echo isset($errors['username']) ? 'has-error' : '' ?>">
  <label class="control-label">Username</label>
  <input type="text" name="username" value="<?php echo $username; ?>" class="form-control">
  <?php if (isset($errors['username'])): ?>
    <span class="help-block"><?php echo $errors['username'] ?></span>
  <?php endif; ?>
</div>
<div class="form-group <?php echo isset($errors['email']) ? 'has-error' : '' ?>">
  <label class="control-label">Email Address</label>
  <input type="email" name="email" value="<?php echo $email; ?>" class="form-control">
  <?php if (isset($errors['email'])): ?>
    <span class="help-block"><?php echo $errors['email'] ?></span>
  <?php endif; ?>
</div>
<div class="form-group <?php echo isset($errors['password']) ? 'has-error' : '' ?>">
  <label class="control-label">Password</label>
  <input type="password" name="password" class="form-control">
  <?php if (isset($errors['password'])): ?>
    <span class="help-block"><?php echo $errors['password'] ?></span>
  <?php endif; ?>
</div>
<div class="form-group <?php echo isset($errors['passwordConf']) ? 'has-error' : '' ?>">
  <label class="control-label">Password confirmation</label>
  <input type="password" name="passwordConf" class="form-control">
  <?php if (isset($errors['passwordConf'])): ?>
    <span class="help-block"><?php echo $errors['passwordConf'] ?></span>
  <?php endif; ?>
</div>

Appena sotto ogni campo di input, stiamo visualizzando condizionalmente il messaggio di errore per ogni campo del modulo.

Nel caso non sapessi dell'operatore ternario, ecco una breve spiegazione.

<?php echo isset($errors['username']) ? 'has-error' : '' ?>

Questa affermazione in pratica dice che se la variabile $errors['username'] è impostata su un valore (non è vuota), mostra has-error, altrimenti mostra una stringa vuota. Fondamentalmente è solo un'istruzione if-else.

Ora puoi provare questa convalida facendo clic sul modulo vuoto. Vedrai dei bei messaggi di convalida formattati.

Accesso utente

Nella cartella principale della tua applicazione, crea un file chiamato login.php.

login.php:

<?php include('config.php'); ?>
<?php include(INCLUDE_PATH . '/logic/userSignup.php'); ?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>UserAccounts - Login</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <!-- Custome styles -->
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <?php include(INCLUDE_PATH . "/layouts/navbar.php") ?>
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-md-offset-4">
        <form class="form" action="login.php" method="post">
          <h2 class="text-center">Login</h2>
          <hr>
          <!-- display form error messages  -->
          <?php include(INCLUDE_PATH . "/layouts/messages.php") ?>
          <div class="form-group <?php echo isset($errors['username']) ? 'has-error' : '' ?>">
            <label class="control-label">Username or Email</label>
            <input type="text" name="username" id="password" value="<?php echo $username; ?>" class="form-control">
            <?php if (isset($errors['username'])): ?>
              <span class="help-block"><?php echo $errors['username'] ?></span>
            <?php endif; ?>
          </div>
          <div class="form-group <?php echo isset($errors['password']) ? 'has-error' : '' ?>">
            <label class="control-label">Password</label>
            <input type="password" name="password" id="password" class="form-control">
            <?php if (isset($errors['password'])): ?>
              <span class="help-block"><?php echo $errors['password'] ?></span>
            <?php endif; ?>
          </div>
          <div class="form-group">
            <button type="submit" name="login_btn" class="btn btn-success">Login</button>
          </div>
          <p>Don't have an account? <a href="signup.php">Sign up</a></p>
        </form>
      </div>
    </div>
  </div>
<?php include(INCLUDE_PATH . "/layouts/footer.php") ?>

Ora apri userSignup.php e alla fine del file, aggiungi questo codice per accedere utente:

// ...

// USER LOGIN
if (isset($_POST['login_btn'])) {
	// validate form values
	$errors = validateUser($_POST, ['login_btn']);
	$username = $_POST['username'];
	$password = $_POST['password']; // don't escape passwords.

	if (empty($errors)) {
		$sql = "SELECT * FROM users WHERE username=? OR email=? LIMIT 1";
		$user = getSingleRecord($sql, 'ss', [$username, $username]);

		if (!empty($user)) { // if user was found
			if (password_verify($password, $user['password'])) { // if password matches
				// log user in
				loginById($user['id']);
			} else { // if password does not match
				$_SESSION['error_msg'] = "Wrong credentials";
			}
		} else { // if no user found
			$_SESSION['error_msg'] = "Wrong credentials";
		}
	}
}

Se fai clic sul pulsante di accesso senza riempirlo, sul modulo verranno visualizzati messaggi di convalida proprio come nel caso della pagina di registrazione.

Ora inserisci l'e-mail e la password per l'account utente che abbiamo creato in precedenza e fai clic sul pulsante di accesso. Se le credenziali erano corrette, verrai loggato e reindirizzato alla home page. Verrà visualizzato un messaggio flash che ti informa che ora hai effettuato l'accesso. 

Ma noterai che anche se l'utente è ora connesso, i collegamenti di registrazione e di accesso nella barra di navigazione vengono ancora visualizzati, il che non ha senso, giusto? Sostituiamoli con il nome utente di accesso e un menu a discesa con un link di disconnessione su di esso.

Apri il file navbar.php e sostituisci il codice che contiene con questo:

navbar.php:

<!-- the whole site is wrapped in a container div to give it some margin on the sides -->
<!-- closing container div can be found in the footer -->
<div class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">UserAccounts</a>
      </div>
      <!-- <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
      </ul> -->
      <ul class="nav navbar-nav navbar-right">
        <?php if (isset($_SESSION['user'])): ?>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              <?php echo $_SESSION['user']['username'] ?> <span class="caret"></span></a>

              <?php if (isAdmin($_SESSION['user']['id'])): ?>
                <ul class="dropdown-menu">
                  <li><a href="<?php echo BASE_URL . 'admin/profile.php' ?>">Profile</a></li>
                  <li><a href="<?php echo BASE_URL . 'admin/dashboard.php' ?>">Dashboard</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="<?php echo BASE_URL . 'logout.php' ?>" style="color: red;">Logout</a></li>
                </ul>
              <?php else: ?>
                <ul class="dropdown-menu">
                  <li><a href="<?php echo BASE_URL . 'logout.php' ?>" style="color: red;">Logout</a></li>
                </ul>
              <?php endif; ?>
          </li>
        <?php else: ?>
          <li><a href="<?php echo BASE_URL . 'signup.php' ?>"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
          <li><a href="<?php echo BASE_URL . 'login.php' ?>"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        <?php endif; ?>
      </ul>
    </div>
  </nav>

Ora aggiorna la pagina index.php. Se eri ancora connesso, vedrai che l'intestazione è cambiata e ora mostra il tuo nome utente sulla barra di navigazione. Quando fai clic sul nome utente, verrà visualizzato un menu a discesa con un collegamento di disconnessione su di esso. Se fai clic su di esso, verrà visualizzato il messaggio Pagina non trovata perché non abbiamo ancora creato il file logout.php. Creiamo quel file ora nella cartella principale della nostra applicazione.

logout.php: 

<?php
  session_start();
  session_destroy();
  unset($_SESSION['user']);
  header("location: login.php");
?>

E abbiamo finito con la normale autenticazione dell'utente. Ora passiamo al nocciolo della questione che è la sezione di amministrazione. Spero che ti stia divertendo.

In questo momento stiamo registrando l'utente tramite una sola funzione, la funzione loginById(). In tale funzione, se l'utente che sta effettuando l'accesso risulta essere un utente amministrativo, viene reindirizzato al file dashboard.php.

Sezione Amministrazione

All'interno della cartella admin, crea il file dashboard.php:

dashboard.php:

<?php include('../config.php') ?>
<?php include(ROOT_PATH . '/admin/middleware.php') ?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Admin</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <!-- Custome styles -->
  <link rel="stylesheet" href="../static/css/style.css">
</head>
<body>
  <?php include(INCLUDE_PATH . "/layouts/admin_navbar.php") ?>

  <div class="col-md-4 col-md-offset-4">
      <h1 class="text-center">Admin</h1>
      <br />
      <ul class="list-group">
        <a href="<?php echo BASE_URL . 'admin/posts/postList.php' ?>" class="list-group-item">Manage Posts</a>
        <a href="<?php echo BASE_URL . 'admin/users/userList.php' ?>" class="list-group-item">Manage Users</a>
        <a href="<?php echo BASE_URL . 'admin/roles/roleList.php' ?>" class="list-group-item">Manage Roles</a>
      </ul>
  </div>
  <?php include(INCLUDE_PATH . "/layouts/footer.php") ?>
</body>
</html>

Sul tuo browser, visita http://localhost/user-accounts/admin/dashboard.php e vedrai alcuni messaggi di avviso. Questo perché stiamo includendo due file che non esistono ancora:middleware.php e admin_navbar.php.

Per quanto riguarda middleware.php, ci lavoreremo in seguito. Ma per ora crealo nella cartella admin e lascialo vuoto in modo che il messaggio di avviso possa scomparire e lasciarci in pace.

Per quanto riguarda admin_navbar.php, crealo all'interno della cartella include/layouts:

admin_navbar.php:

<!-- the whole site is wrapped in a container div to give it some margin on the sides -->
<!-- closing container div can be found in the footer -->
<div class="container">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="<?php echo BASE_URL . 'admin/dashboard.php' ?>">Dashboard</a>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <?php if (isset($_SESSION['user'])): ?>
          <li><a href="<?php echo BASE_URL . 'index.php' ?>"><span class="glyphicon glyphicon-globe"></span></a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              <?php echo $_SESSION['user']['username'] . ' (' . $_SESSION['user']['role'] . ')'; ?> <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="<?php echo BASE_URL . 'admin/users/editProfile.php' ?>">Profile</a></li>
              <li><a href="<?php echo BASE_URL . 'admin/dashboard.php' ?>">Dashboard</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="<?php echo BASE_URL . 'logout.php' ?>" style="color: red;">Logout</a></li>
            </ul>
          </li>
        <?php endif; ?>
      </ul>
    </div>
  </nav>
  <?php include(INCLUDE_PATH . "/layouts/messages.php") ?>

Sul tuo browser, aggiorna ora la pagina dashboard.php e i messaggi di avviso sono spariti.

Il dashboard.php è l'area di amministrazione, giusto? Non dovrebbe essere accessibile da utenti ordinari. Quindi dobbiamo reindirizzare qualsiasi utente normale che tenta di visitare questa pagina alla home page. Inoltre, non stiamo ancora creando/gestendo utenti e ruoli amministratori. Tutto questo arriverà presto.

Chiudiamo qui questa parte. Nella parte successiva, procediamo con la gestione degli account utente amministratore e anche con il controllo degli accessi.

Se ti piacciono questi tutorial e ne vuoi altri, considera la possibilità di condividere/consigliare i tutorial tra i tuoi amici. Questo farà davvero molto per supportarmi nella creazione di più di questo.

Grazie per aver seguito e alla prossima parte.