Weiterleitung von einer HTML Login Seite?

Guten Abend,

ich habe eine HTML Webseite geschrieben und dazu auch eine Login Seite. Ich möchte ein Passwort festlegen also ohne Regierungsfunktion. Bei richtiger Eingabe soll man zu der Hauptseite weitergeleitet werden. Und wenn die Eingabe falsch ist soll eine Fehlermeldung erscheinen. Ich habe im Internet geguckt, wie man so etwas hinbekommen kann, aber nichts gefunden. Wichtig ist, dass ich keinen Script verwenden möchte. Also nur HTML und CSS. Hat da jemand eine Idee?

Das ist meine Loginseite

Answer 1

[regex9]

(...) ich habe eine HTML Webseite geschrieben (...)

Und die ist fehlerhaft.

• Der style-Tag (wenn du ihn denn brauchst) gehört in den head.
• Es gibt kein background-image-Attribut (und meiner Erinnerung nach gab es auch nie eines). Stylings werden via CSS definiert. Für deinen Fall also:

body {
  background-image: url("your image pat ...");
}

Aber ich gehe davon aus, dass du eh bereits so etwas in deiner CSS-Datei stehen haben wirst.

• Der schließende style-Tag in Zeile 32 sollte komplett raus. Weder hat er einen Starttag, mit dem er ein Päärchen bilden könnte, noch hat er, wie schon geschrieben, etwas außerhalb des head zu suchen.

Hat da jemand eine Idee?

Nur mit HTML und CSS lässt sich das nicht realisieren. Zum einen kannst du mit diesen Sprachen keine logischen Prüfungen vornehmen und zum anderen wäre es ziemlich unsicher, das Passwort im Browser zu prüfen, wo es jeder einlesen kann.

Erstelle zunächst ein Formular mit Submit-Button. Wenn der Nutzer dieses später ausfüllt und auf den Button drückt, werden die Felder mit name-Attribut an den Server geschickt. Dies sollte via POST-Methode geschehen.

Wie du das folgend verarbeitest, ist eine spannende Frage. Meist unterstützt der Webserver PHP. Davon gehe ich im Folgenden einmal aus. Wenn nicht, - informiere dich, welche Programmiersprache du stattdessen einsetzen kannst.

1) Zeichenkodierung auf UTF-8 setzen. So wird Datenkonsistenz gewahrt.

Im head:

<meta charset="utf-8">

2) Lege eine PHP-Datei an (z.B. login.php). Sie wird die Daten des Formulars empfangen und prüfen, ob sie valid sind und wie es weitergeht.

Das action-Attribut des Formulars verweist also auch auf login.php.

3) Das Passwort sollte als Hash gespeichert werden. Generell ist eine Datenbank sicherer. Ich erspare mir bei diesem Beispiel trotzdem Schreibarbeit und zeige es mit einer Datei. Für die Kommunikation mit Datenbanken gibt es genügend Tutorials im Netz. Übrigens zeige ich hier auch nur ein Beispiel mit Passwort. Wenn du einen Nutzernamen speichern möchtest, musst du das noch selbst ergänzen.

Um zunächst den Hash zu erhalten, kannst du irgendeinen password_hash-Generator verwenden (kurz einmal herausgesucht: https://phppasswordhash.com/). Der Hash wird in der Datei eingetragen und diese irgendwo außerhalb des Rootverzeichnis der Webseite hinterlegt. Achte darauf, die Datei UTF-8-kodiert abzuspeichern.

4) In der login.php wird erst geprüft, ob das Passwort aus dem Eingabefeld mit dem name-Attribut password vorhanden und nicht leer ist. Wenn doch, geht es zurück auf deine Startseite (die übrigens ab nun auch eine PHP-Datei sein sollte).

<?php
  if (empty($_POST["password"])) {
    header("Location: index.php?error=" . urlencode("Some error message"));
    exit;
  }

  $hash =  file_get_contents("path to file with password");

  if (password_verify($_POST["password"], $hash)) {
    session_start();
    $_SESSION["loggedin"] = "loggedin";
    header("Location: private.php");
    exit;
  }

  header("Location: index.php?error=" . urlencode("Some error message"));
  exit;

Wenn der Hash hingegen mit dem Hash des eingegebenen Passworts übereinstimmt, kann eine Session erstellt werden, die sich den Umstand merkt, dass der Nutzer eingeloggt ist. Danach erfolgt wieder eine Weiterleitung, diesmal zum privaten Bereich.

5) Zuerst der Fall, dass der Login fehlgeschlagen ist. Unter dein Formular wird die Box eingebunden, die die Fehlermeldung anzeigen würde (du kannst sie ja noch nach Belieben anpassen).

<?php if (isset($_GET["error"])): ?>
  <p class="error-message"><?= htmlspecialchars($_GET["error"]) ?></p>
<?php endif; ?>

Das geschieht nur dann, wenn im Querystring der URL der Parameter error enthalten ist.

6) Alle Webseiten im privaten Bereich müssen als PHP-Datei angelegt werden. Noch vor dem Doctype wird ein PHP-Snippet eingefügt, welches prüft, ob der Nutzer noch angemeldet ist:

<?php
  session_start();

  if (!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== "loggedin") {
    header("Location: index.php");
    exit;
  }
?>

Wenn nicht, wird er stets zurück zur Login-Seite zurückgeleitet.

Das ist soweit nur ein Basispaket für einen Login. Zu weiteren Sicherheitsmaßnahmen (CSRF-Schutz, SPAM-Schutz, u.ä.) musst du dich selbst informieren.

Answer 2

[MrAmazing2]

Dafür brauchst du ein sogenanntes "Backend"

Ich empfehle Node.js.

HTML und CSS sind keine Programmiersprachen, folglich gibt es in ihnen keine if-Abfragen (eine If-Abfrage wäre sowas wie "WENN Passwort korrekt DANN ... ANDERNFALLS ...". Also genau das was du hier tun willst). Um eine Programmiersprache oder zumindest JavaScript kommst du also nicht drum rum.

Answer 3

[whgoffline]

Da brauchst du sowas wie PHP. Ich würde mit mysql eine Datenbank mit einem username und gehashten passwort erstellen. Dann kannst ud in php über password_verify das eingegebene Passwort prüfen. Bei richtigen passwort kannst du eine session cookie setzen.

Woher ich das weiß: Studium / Ausbildung – Informatikstudent

Answer 4

[iSc0field]

Das funktioniert nicht mit purem HTML und CSS.

Außerdem sieht man nichts -> "Das ist meine Loginseite".

Woher ich das weiß: Berufserfahrung – Full-Stack Entwickler bei Mercedes-Benz

Comments

[PinkPonyFluffy]

jaa habe das bild nachträglich hochgeladen

[iSc0field]

@PinkPonyFluffy

Sieht schön aus, leider funktioniert dein Login mit Weiterleitung trotzdem nicht ohne PHP oder Javascript.