Wachtwoord beveiliging toevoegen aan je pagina's

In dit artikel bouwen we een eenvoudige wachtwoord beveiliging m.b.v. WYSIWYG Web Builder en PHP, zodat gebruikers kunnen/moeten inloggen op je website.
Het is wel noodzakelijk dat je webhosting account PHP ondersteund!

Ons voorbeeld bestaat uit 4 pagina's:
1. login.php, deze pagina geeft het login scherm weer.
2. logout.php, deze pagina wordt gebruikt om uit te loggen.
3. verify.php, deze pagina controleert de gebruikersnaam/wachtwoord combinatie.
4. protected_page.php, een voorbeeld van een beveiligde pagina.

1. De login pagina maken
a) Voeg een nieuwe pagina toe m.b.v. Site Manager en geef deze de naam 'login'.
b) Zorg ervoor dat de Extensie in Pagina eigenschappen op 'php' staat!
c) Voeg een Formulier toe met de volgende eigenschappen:
Naam: LoginForm
Actie: verify.php
Methode: POST
Encoding type: <leeg>
d) Voeg een Editbox toe en geef deze de naam 'username'.
e) Voeg nog een Editbox toe en geef deze de naam 'password'.
f) Voeg een Knop toe en stel het type in op 'Submit', verander de waarde in 'Login'.

2. De logout pagina maken
a) Voeg een nieuwe pagina toe m.b.v. Site Manager en geef deze de naam 'logout'.
b) Zorg ervoor dat de Extensie in Pagina eigenschappen op 'php' staat!
c) Open de Pagina HTML, selecteer het tabblad 'Start van Pagina' en voer deze code in:

<?php
session_start();
session_unset();
session_destroy();
?>


3. De verificatie pagina maken
a) Voeg een nieuwe pagina toe m.b.v. Site Manager en geef deze de naam 'verify'.
b) Zorg ervoor dat de Extensie in Pagina eigenschappen op 'php' staat!
c) Open de Pagina HTML, selecteer het tabblad 'Start van Pagina' en voer deze code in:

<?php
$usernames = array("user1", "user2", "user3", "admin");
$passwords = array("password1", "password2", "password3", "admin");
$page = "protected_page.php";

for($i=0;$i<count($usernames);$i++)
{
  $logindata[$usernames[$i]]=$passwords[$i];
}

$found = 0;
for($i=0;$i<count($usernames);$i++)
{
   if ($usernames[$i] == $_POST["username"])
   {
   $found = 1;
   }
}
if ($found == 0)
{
   header('Location: login.php?login_error=1');
   exit;
}

if($logindata[$_POST["username"]]==$_POST["password"])
{
   session_start();
   $_SESSION["username"]=$_POST["username"];
   header('Location: '.$page);
   exit;
}
else
{
   header('Location: login.php?login_error=1');
   exit;
}
?>

Dit is ook de plek waar nieuwe gebruikers moeten worden toegevoegd.
Om een nieuwe gebruiker toe te voegen moet de volgende code worden aangepast:


$usernames = array("user1", "user2", "admin", "nieuwe gebruiker");

Merk op dat we een nieuwe gebruiker met de naam 'nieuwe gebruiker' hebben toegevoegd.
Zorg ervoor dat ook het wachtwoord voor deze gebruiker wordt toegevoegd (op dezelfde positie in de password array):


$passwords = array("password1", "password2", "admin", "nieuw wachtwoord");

4. Een pagina met een wachtwoord beveiligen
a) Voeg een nieuwe pagina toe m.b.v. Site Manager en geef deze de naam 'protected_page'.
b) Zorg ervoor dat de Extensie in Pagina eigenschappen op 'php' staat!
c) Open de Pagina HTML, selecteer het tabblad 'Start van Pagina' en voer deze code in:

<?php
session_start();
if(!isset($_SESSION["username"]))
{
   header('Location: login.php');
   exit;
}
?>


Deze code controleert of de gebruiker succesvol is ingelogd, zo niet dan verschijnt de login pagina.

Download dit voorbeeld project (.wbs bestand)
Ben je een geregistreerde gebruiker van WYSIWYG Web Builder 10 ?   Koop WYSIWYG Web Builder 11 dan NU voor een gereduceerde prijs!