PHP Login mit AJAX{4}

Ich habe bereits in diesem Artikel erklärt, wie man ein PHP Login mit einer MySQL Datenbank erstellt. Nun möchte ich in diesem Artikel erklären, wie man ein PHP Login mit einer schöneren Benutzeroberfläche programmiert. Der Vorteil besteht darin, dass die Seite nicht neu geladen wird, wenn man sich einloggt. Zusätzlich werden wir das Passwort mit md5 verschlüsseln, um es nicht einfach so lesbar zu machen.

Für dieses Tutorial hier, brauche ich viele Dinge aus dem, welches ich oben verlinkt habe. Deshalb ist es von Vorteil, wenn man sich das Tutorial bereits durchgelesen hat, bevor man mit diesem hier beginnt.

Als erstes solltet ihr alle Dateien aus dem anderen Tutorial erstellen und testen, ob das ganze so funktioniert. Wenn ihr das getan habt, beginnen wir mit der Verschlüsselung der Daten. Man muss sich das so vorstellen, dass beim Eintragen in der Datenbank nicht das Passwort in Klartext abgelegt wird, sondern nur der Hashwert. Wenn sich nun jemand einloggen will, wird das Passwort zuerst auch zu einem md5 Hash verarbeitet und diese beiden Werte dann verglichen.

Dazu müssen wir in der Login.php folgendes verändern:

<?php
include('connect.php');
$username=$_POST['username'];
$password=md5($_POST['password']);
 
$query=mysql_query("SELECT username, password FROM users WHERE username ='".$username."'") or die("konnte nicht selecten!!!");
mysql_real_escape_string($username);
mysql_real_escape_string($password);
$result=mysql_fetch_array($query);
 
if(!$result['username']){
echo "Username oder Passwort falsch!";
die();
}
if($password != $result['password']){
echo "Username oder Passwort falsch!";
die();
}
session_register('username');
echo "Du bist erfolgreich registriert!";
?>

Dadurch wird das empfangene Passwort direkt als Hash in der Variable gespeichert. Das dies funktionieren kann, muss das Passwort auch als md5 Hash in der Datenbank vorhanden sein. Da ich hier keine Registrierungsfunktion einbaue, muss man aus dem Passwort manuell den md5 Hash generieren. Im Web gibt es zahlreiche Websiten, die das anbieten. Falls man so etwas selber machen will, reicht dieser kleine PHP Code:

<?php echo md5('Dein Passwort'); ?>

Als nächstes müssen wir die loginform.php anpassen. Zuerst benötigen wir aber JQuery. Wenn wir es heruntergeladen haben, verschieben wir die Datei ins gleiche Verzeichniss wie die anderen Dateien und verändern die loginform.php folgendermassen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Einfaches Loginscript -Tutorial</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
$.post("login.php", {username: $("#username").val(), password: $("#password").val()}, function(data){
$("#userdata").remove();
$("#result").append(data);
});
});
});
</script>
</head>
<body>
<div id="result">
</div>
<div id="userdata">
Deine Benutzerdaten:<br>
Benutzername:
<input type="text" size="35" id="username"><br>
Passwort:
<input type="password" size="35" id="password"><br>
<input type="submit" value="Login" id="submit">
</div>
</body>
</html>

Nun sollte man alle Dateien aus dem anderen Tutorial erstellt haben, die Dateien wie hier beschrieben anpassen  und die MySQL Einträge und Konfiguration vornehmen. Wenn das alles getan ist, kann man die Daten auf einen Webserver hochladen und das ganze Testen. Wenn ihr auf Login klickt, sollte die Loginmaske verschwinden und die Erfolgs-, oder Fehlermeldung erscheinen.

Falls ihr einen Fehler entdeckt oder Fragen habt, schreibt doch einfach einen Kommentar.

By Fredi Category: Tutorials Tags: , ,