Mysql
 sql >> Datenbank >  >> RDS >> Mysql

Benutzerkontenverwaltung, Rollen, Berechtigungen, Authentifizierung PHP und MySQL - Teil 3

Dies ist Teil 3 einer Reihe von Tutorials zum Erstellen eines Benutzerkontenverwaltungssystems. Die anderen Teile findest du hier: Teil 1, Teil 2.

Formularvalidierung

Wenn Sie an dieser Stelle auf der Seite signup.php einfach auf die Anmeldeschaltfläche klicken, ohne eines der Formularfelder auszufüllen, erhalten Sie kein Feedback, aber das Formular tut auch nichts. Es bleibt einfach da und starrt dich an. Es bleibt so, weil es Fehler in einem $errors aus unserer zuvor definierten validateUser() Funktion gibt, die wir noch nicht auf dem Formular anzeigen. Diese Fehler treten in Schlüssel/Wert-Paaren auf.

Beispiel: $errors['username'] enthält den Fehler, falls vorhanden, für das Feld "Nutzername". Damit wir überprüfen können, ob der Benutzernamenfehler vorhanden ist, fügen wir die Bootstrap-Klasse has-error dem div-Element hinzu, das das Benutzernamen-Eingabefeld umschließt. Dadurch werden der Beschriftungstext und der Eingaberahmen rot, was auf einen Fehler hinweist.

Wir validieren die Felder für Nutzername, E-Mail, Passwort und Passwortbestätigung. Öffnen Sie also Ihre signup.php-Datei und ersetzen Sie diese vier Felder durch diesen Code:

<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>

Direkt unter jedem Eingabefeld zeigen wir bedingt die Fehlermeldung für jedes Formularfeld an.

Falls Sie den ternären Operator noch nicht kannten, hier eine kurze Erklärung.

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

Diese Anweisung besagt im Wesentlichen, dass, wenn die Variable $errors['username'] auf einen Wert gesetzt ist (nicht leer ist), "has-error" angezeigt wird, andernfalls eine leere Zeichenfolge angezeigt wird. Es ist im Grunde nur eine if-else-Anweisung.

Jetzt können Sie diese Validierung ausprobieren, indem Sie auf das leere Formular klicken. Sie werden schön formatierte Bestätigungsnachrichten sehen.

Benutzeranmeldung

Erstellen Sie im Stammordner Ihrer Anwendung eine Datei namens 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") ?>

Öffnen Sie nun userSignup.php und fügen Sie am Ende der Datei diesen Code hinzu, um den Benutzer anzumelden:

// ...

// 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";
		}
	}
}

Wenn Sie auf die Login-Schaltfläche klicken, ohne sie auszufüllen, werden Bestätigungsmeldungen auf dem Formular angezeigt, genau wie im Fall der Anmeldeseite.

Geben Sie nun die E-Mail-Adresse und das Passwort für das zuvor erstellte Benutzerkonto ein und klicken Sie auf die Schaltfläche Anmelden. Wenn die Zugangsdaten korrekt waren, werden Sie eingeloggt und auf die Startseite weitergeleitet. Eine Flash-Nachricht wird angezeigt, die Ihnen mitteilt, dass Sie jetzt angemeldet sind. 

Aber Sie werden feststellen, dass, obwohl der Benutzer jetzt angemeldet ist, die Anmelde- und Anmeldelinks in der Navigationsleiste immer noch angezeigt werden, was keinen Sinn ergibt, oder? Ersetzen wir sie durch den angemeldeten Benutzernamen und ein Dropdown-Menü mit einem Abmeldelink darauf.

Öffnen Sie die Datei navbar.php und ersetzen Sie sie der Code, der mit diesem drin ist:

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>

Aktualisieren Sie nun die Seite index.php. Wenn Sie noch angemeldet waren, sehen Sie, dass sich die Kopfzeile geändert hat und jetzt Ihren Benutzernamen in der Navigationsleiste anzeigt. Wenn Sie auf den Benutzernamen klicken, wird ein Dropdown-Menü mit einem Abmeldelink darauf angezeigt. Wenn Sie darauf klicken, wird angezeigt, dass die Seite nicht gefunden wurde, da wir die Datei logout.php noch nicht erstellt haben. Lassen Sie uns diese Datei jetzt im Stammordner unserer Anwendung erstellen.

logout.php: 

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

Und wir sind mit der normalen Benutzerauthentifizierung fertig. Jetzt kommen wir zum Kern der Sache, dem Admin-Bereich. Ich hoffe, Sie genießen es.

Im Moment melden wir den Benutzer nur über eine Funktion an, die Funktion loginById(). Wenn in dieser Funktion festgestellt wird, dass der Benutzer, der sich anmeldet, ein Administrator ist, wird er zur Datei dashboard.php umgeleitet.

Verwaltungsbereich

Erstellen Sie im Admin-Ordner die Datei 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>

Besuchen Sie in Ihrem Browser http://localhost/user-accounts/admin/dashboard.php und Sie werden einige Warnmeldungen sehen. Das liegt daran, dass wir einige zwei Dateien einschließen, die noch nicht existieren:middleware.php und admin_navbar.php.

Was die middleware.php betrifft, werden wir später daran arbeiten. Aber jetzt erstellen Sie es einfach im Admin-Ordner und lassen Sie es leer, damit die Warnmeldung verschwindet und uns in Ruhe lässt.

Erstellen Sie die admin_navbar.php im Ordner includes/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") ?>

Aktualisieren Sie jetzt in Ihrem Browser die Seite dashboard.php und die Warnmeldungen sind verschwunden.

Die dashboard.php ist der Admin-Bereich, richtig? Normale Benutzer sollten nicht darauf zugreifen. Daher müssen wir jeden normalen Benutzer, der versucht, diese Seite zu besuchen, zurück auf die Homepage umleiten. Außerdem erstellen/verwalten wir noch keine Administratorbenutzer und -rollen. All das kommt bald.

Lassen Sie uns diesen Teil hier beenden. Im nächsten Teil fahren wir mit der Verwaltung von Admin-Benutzerkonten und der Zugriffskontrolle fort.

Wenn Ihnen diese Tutorials gefallen und Sie mehr davon möchten, denken Sie bitte darüber nach, die Tutorials mit Ihren Freunden zu teilen/zu empfehlen. Das wird mich sehr dabei unterstützen, mehr davon zu schaffen.

Danke fürs Folgen und bis zum nächsten Teil.