Es gibt vorgefertigte Login-Skripte in PHP, die man nutzen kann. Diese sollten allerdings immer auf dem neuesten Stand sein. Techniken, die wir früher verwendet haben, sind heute nicht mehr ratsam.
Abhängig vom System, das man verwenden möchte bzw. programmieren will, kann man vorgefertigte CMS verwenden wie WordPress, Redaxo, Joomla, Typo3 etc.
Doch wenn man etwas Eigenes bauen möchte, dann will man es sicher aus einem Guss.
In diesem Tutorial schauen wir uns an, wie man ein einfaches Login-Skript schreiben kann.
Es ist nur ein Grundgerüst. Wir werden uns aber anschauen, wie man vorgeht und was man beachten muss.
Was benötigen wir?
Idealerweise testen und bauen wir es in einer sicheren Umgebung. Dazu kann man XAMPP (bzw. ein vergleichbares, lokales Serversystem) verwenden. Das ist eine Umgebung für euren lokalen Rechner, der einen Server simuliert. Es enthält alles, was man dafür benötigt: PHP, mySQL, Apache, phpMyAdmin etc.
Dann sollte man sich schon etwas mit PHP vertraut gemacht haben.
Ich persönlich habe immer noch ein Textdokument nebenbei geöffnet, in das ich meine Schritte dokumentiere. Sozusagen unser Hilfedokument oder Tutorial, um später schnell wieder in das Skript rein zu finden. Man sollte natürlich auch die wichtigsten Schritte im Skript selbst dokumentieren.
Wie gehen wir vor?
Zunächst überlegen wir uns, wie die Struktur unseres Skripts sein soll.
Wir können es natürlich alles in eine PHP-Datei schreiben. Aber das ist nicht sinnvoll und wird schnell unübersichtlich. Man benötigt nicht in jedem Moment jede Funktion oder Codezeile, um den entsprechenden Schritt auzuführen.
Also spalten wir das Skript auf.
Wir benötigen:
- Loginseite (logmein.php)
- Logoutseite (logout.php)
- Userpage (dashboard.php, eventuell noch profile.php)
- Datenprüfskript (authenticate.php)
- Datenbankverbindungsskript (connect.php)
- Styles (style.css)
Das ist zunächst unser Grundgerüst, das wir erstellen möchten.
Ich lagere gerne den Aufruf der Datenbank in ein eigenes Skript auf, das muss man aber nicht machen. Es erleichtert das Ändern der Daten zur Datenbank. Man muss es nur einmal ändern.
Man kann die Loginseite auch gerne als reine HTML-Seite erstellen, das bleibt euch überlassen.
Gehen wir der Reihe nach vor.
Die Loginseite
Logmein.php
Hier benötigen wir lediglich HTML und CSS, ich lege die Seite aber dennoch als PHP-Datei an.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Loginseite</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="login">
<h1>Anmelden</h1>
<div class=”logintext”>
Hier können Sie sich einloggen. Geben Sie dazu Ihre Zugangsdaten unten ein.
</div>
<form action="authenticate.php" method="post">
<label for="username">Benutzername</label>
<input type="text" name="username" placeholder="Benutzername" id="username" required>
<label for="password">Passwort</label>
<input type="password" name="password" placeholder="Passwort" id="password" required>
<input type="submit" value="Jetzt einloggen">
</form>
</div>
</body>
</html>
Nun haben wir die Login-Seite erstellt. Später werden wir die Seite noch etwas stylen.
Was haben wir hier gemacht?
Wir haben zunächst das HTML-Gerüst erstellt.
Mit <meta charset=”utf-8″> sagen wir dem Browser, er soll den Zeichensatz UTF-8 verwenden, um die Daten anzuzeigen.
Natürlich vergeben wir auch ein Title mit <title>Loginseite</title>.
Die stylesheet-Datei binden wir mit <link href=”style.css” rel=”stylesheet” type=”text/css”> ein. Um diese Datei kümmern wir uns später.
Damit der User sich einloggen kann, brauchen wir ein Formular, in das der User seine Zugangsdaten einträgt. Wir haben es hier klassisch gehalten und haben die Bezeichungen der Felder hingeschrieben. Wir könnten auch icons verwenden, dazu aber später.
Das Formular binden wir ein mit <form action=”authenticate.php” method=”post”></form>. Wir haben unter action unser Authentifizierungsskript angegeben, das mit Absenden des Skripts aufgerufen werden soll. Mit method=”post” geben wir die Art an, mit der die Daten übertragen werden sollen. Bei Formularen bitte immer die Methode post verwenden.
Dann haben wir noch die Logindaten, die wir hier abfragen.
Mit <label> geben wir die Bezeichnung vor dem Feld an, mit <input> erzeigen wir ein Eingabefeld.In diesem Fall verwenden wir ein Textfeld, in dem ein Platzhalter hinterlegt ist. Dies zeigen wir dem Browser an, indem wir type=”text” für den Nutzernamen angeben. Beim Passwortfeld haben wir auch ein Texrtfeld, aber mit type=”password” wird die Eingabe nicht im Klartext angezeigt, sondern “verdeckt”. Mit name=”” geben wir den Namen des Feldes an. Diesen Namen werden wir dann später an das Authentifizierungsskript übergeben mit dem dazugehörigen Wert(value), den der User eingibt. Required gibt an, dass der User das Feld ausfüllen muss, ansonsten wird eine Fehlermeldung ausgegeben.
Zum Absenden des Formulars haben wir dann den Button mit dem type=”submit” und dem Beschriftungstext “Jetzt einloggen” als value.
Logoutseite
Wenn man sich einloggen kann, sollte man sich später auch wieder ausloggen können. Damit der User vom System abgemeldet wird, erstellen wir das Logoutskript logout.php. Diese erstellen wir als PHP-Datei mit folgendem Inhalt:
<?php
session_start();
session_destroy();
// Redirect to the login page:
header('Location: index.html');
?>
Mehr benötigen wir hier nicht. Und jetzt sind wir schon mitten in der Materie: Wir haben ein PHP-Skript erstellt, das mit Sessions arbeitet. Diese Session wird speziell für diese Sitzung des Users generiert und genutzt. Sie zeigt unserem Skript und allen anderen Seiten, die wir nutzen wollen, dass der User berechtigtist,die entsprechenden Daten zu sehen. Sprich er ist eingeloggt.
Daher schreiben wir an oberster Stelle in unseren Skripten session_start();.
Da wir gerade das Logoutskript erstellt haben, möchten wir die Sitzung auch beenden, so dass sich kein anderer mit diesen Daten einloggen kann.
Diese Sitzung beenden wir mit session_destroy();.
Zu guter letzt schicken wir den User noch auf die Startseite zurück.
Nun haben wir den Login und Logout des Users.
Um das Design kümmern wir uns später noch.
Mit dem Login können wir nun noch nicht viel anfangen, denn wir haben noch keine Datenbank mit den Userdaten erstellt du ebenfalls noch kein Skript, das die Daten aus der Datenbank abruft.
Wir kümmern uns zuerst um die Datenbank. Auf eurem Webspace werdet ihr in der Regel eine vorgefertigte Datenbank vorfinden, die einen Datenbanknamen und einen Datenbanknutzer besitzt.
Einrichten der Datenbank
Jetzt müssen wir uns mit mySQL-Datenbanken beschäftigen und eine entsprechende Datenbank in unserem System erzeugen.
Im XAMPP können wir das einfach durchführen. .Nachdem wir das XAMPP-System gestartet haben, greifen wir einfach mit phpMyAdmin auf das Datenbanksystem zu.
Dazu geben wir in der Adressleiste unseres Browsers nun http://localhost/phpmyadmin/ ein.
- Nun klicken wir oben auf den Tab Datenbanken.
- Unter Neue Datenbank anlegen geben wir jetzt als Datenbankname Loginskriptdemo ein.
- Alz Zeichensatz geben wir unbedingt utf8_general_ci an.
- Nun klicken wir auf Anlegen.
Man kann natürlich als Datenbanknamen einen anderen Namen verwenden. Gerade im Produktivsystem auf dem Server wird man einen vorgefertigten Namen benutzen müssen, den wir dort nicht extra anlegen müssen.
Nun benötigen wir noch die Tabelle mit unseren Tabellenspalten, die wir für unser Skript benötigen. diese Tabelle wird dann unsere Login-Daten speichern, also Benutzername, Passwort, E-Mail-Adresse etc.
Nachdem wir die Datenbank angelegt haben, befinden wir uns bereits in dieser Datenbank. wir können auch links auf unsere Datenbank Loginskriptdemo klicken und unsere Tabelle erstellen.
Wir legen sie aber über ein SQL-Skript an, das wir über den Tab SQL oben laden.
CREATE TABLE IF NOT EXISTS `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL, `password` varchar(255) NOT NULL, `email` varchar(100) NOT NULL, PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
INSERT INTO `user` (`id`, `username`, `password`, `email`) VALUES (1, 'testuser', '$2y$10$SfhYIDtn.iOuCW7zfoFLuuZHX6lja4lF4XA4JqNmpiH/.P3zB8JCa', 'test@test.com');Mit diesem SQL-Aufruf legen wir unsere Tabelle an und fügen direkt einen ersten Benutzer hinzu. Dieser Benutzer heißt testuser und hat ein Passwort test. Es ist hier verschlüsselt hinterlegt. Daneben haben wir auch eine E-Mailadresse angelegt.
Mit der Datenbank per PHP verbinden
Jetzt haben wir unsere Datenbank und unsere Tabelle angelegt. Nun können wir sie in unseren PHP-Skripten verwenden. Dazu müssen wir aber uns mit ihr verbinden. Dazu erstellen wir ein Skirpt namens connect.php.
Wir können natürlich auch die Datenbank in jedem Skript verbinden. Ich finde es aber besser, wenn wir die Datenbank durch ein separates Skript aufrufen. So müssen wir die Zugangsdaten nur einmal anpassen, wenn wir später das Skript auf unseren Server bzw. auf unsere Website spielen.
<?php
// Change this to your connection info.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'loginskriptdemo';
// Try and connect using the info above.
$connect = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if ( mysqli_connect_errno() ) {
// If there is an error with the connection, stop the script and display the error.
exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}
?>
Wir können nun die Datenbank mit diesem Skript aufrufen. Dazu speichern wir es als connect.php.
Dieses Skript werden wir dann in jedes andere Skript, das auf die Datenbank zugreifen wird, mit einem require_once Befehl aufrufen.
Benutzer überprüfen
Jetzt können wir uns mit der Überprüfung der eingegebenen Daten beschäftigen. Mit unseren Skript authenticate.php überprüfen wir nun, ob die Daten, die auf der Login-Seite eingegeben wurden, vorhanden und korrekt sind.
Zunächst starten wir die Session, die wir bis zum Logout durchziehen werden. Zusätzlich laden wir das Skript connect.php nach, damit eine Verbindung zur Datenbank erfolgen kann.
<?php
session_start();
// We include once the connection script to the database
require_once('connect.php');
//We want to check if the data from the logmein.php script was submitted
if ( !isset($_POST['username'], $_POST['password'] )) exit('Bitte Benutzername und Passwort eingeben!'); }
Die if-Abfrage benötigen wir eigentlich nicht, da wir die Eingabefelder als required gekennzeichnet haben und der Browser hier bereits eine Fehlermeldung ausgibt. Zur Sicherheit haben wir sie aber integriert.
if ($abfrage=$connect->prepare('SELECT id, password FROM user WHERE username=?'))
{
$abfrage->bind_param('s',$_POST['username']);
$abfrage->execute();
$abfrage->store_result();
if ($abfrage->num_rows > 0)
{
$abfrage->bind_result($id, $password);
$abfrage->fetch();
if (password_verify($_POST['password'], $password))
{
session_regenerate_id();
$_SESSION['loggedin'] = TRUE;
$_SESSION['name'] = $_POST['username'];
$_SESSION['id'] = $id;
header('Location: dashboard.php');
}
else
{
echo 'Leider ist entweder der Benutzername oder das Passwort falsch. ';
}
}
else
{
echo 'Leider ist entweder der Benutzername oder das Passwort falsch.';
}
$abfrage->close();
}
?>
Was haben wir bisher gemacht?
Wir haben nachdem wir die Session gestartet und das Datenbankskript aufgerufen haben, eine if-Abfrage gestartet, die unsere Daten sicher, ohne die Möglichkeit einer SQL-Injection, abfragen wird.
Dabei haben wir die Ergebnisse abgefragt, die zum eingegebenen Benutzernamen gehört. Das haben wir mit einer bind-Funktion durchgeführt, die unser Benutzername-Abfrage and den Typ String bindet (bind_param(‘s’, …).
Wir haben zunächst geprüft, ob der Benutzername überhaupt existiert, falls nicht, geben wir eine Fehlermeldung aus, dass die Eingaben falsch sind.
Ebenso haben wir auch überprüft, ob das Passwort stimmt. Dies haben wir mit password_verify durchgeführt.
Bis hierhin haben wir das Login-Skript und das Logoutskript fertig.
Was nach dem Login passiert
Jetzt müssen wir uns noch überlegen, was nach dem Login passieren soll.
Wir wollen einen nun einen geschlossenen Bereich anlegen. Dieser ist zunächst für alle User gleich.
Für ein Projekt habe ich zwei Usergruppen angelegt, die unterschiedliche Rechte haben. Mit Hilfe einer einfachen Abfrage werden die entsprechenden Inhalte gesteuert. Somit kann man dann beispielsweise einen Adminbereich erstellen, der Inhalte und User verwalten kann.
Das ganze funktioniert mit den gleichen Abfragen und Skripten. Lediglich erweitern wir dann die Skripte um eine Abfrage der Berechtigungen, die jedem User zugeordnet werden. Das aber in einem weiteren Tutorial.
Wir leiten nun den User nach erfolgreicher Verifizierung auf eine Seite, die wir dashboard.php nennen.
Analog dazu können wir alle anderen Seiten anlegen, die wir erstellen und nutzen wollen.
Grundgerüst für unsere Seite:
Wir benötigen für unsere Seiten immer an erster Stelle nach dem <?php unseren Start der session.
<?php session_start();
Jetzt benötigen wir noch den User der Session. Diesen haben wir bereits gespeichert in $_SESSION[‘name’].
Damit aber nur der berechtigte User unser Dashboard sehen kann, fügen wir folgende Anweisung ein:
if (!isset($_SESSION['loggedin']))
{
header('Location: index.html');
exit;
}
?>
Damit haben wir einfach abgefragt, ob der User eingeloggt ist oder nicht. Das haben wir in unserem Verifizierungsskript festgelegt.
Jetzt erstellen wir das eigentliche Dashboard mit ein paar Informationen. Dazu benötigen wir wieder HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="topnavigation">
<div class="title">
<h1>LOGINSKRIPT DEMO</h1>
</div>
<div class="navlinks">
<a href="profile.php">Profil</a> | <a href="logout.php">Ausloggen</a>
</div>
</nav>
<div class="maincontent">
<h2>DASHBOARD von <? echo $_SESSION['name'] ?></h2>
<p>Willkommen auf deinem persönlichen Dashboard.</p>
</div>
</body>
</html>
Damit haben wir unseren Bereich für den eingeloggten User fertig.
