Komponente „Sichere Seite”, wie nutzt man sie?

[nettesekel]

Komponente „Sichere Seite” in NetObjects Fusion

Die Komponente „Sichere Seite” ist eine NOF-Komponente, die sich aus 7 Teilkomponenten zusammensetzt. Mit Hilfe dieser Komponente ist es möglich, einen geschützten Bereich innerhalb Eurer Website anzulegen, für welchen sich Seitenbesucher eigenständig registrieren können.

Je nach Wunsch kann der Zugang zum geschützten Bereich direkt nach abgeschlossener Registrierung bereitgestellt werden oder aber erst nach Freigabe durch den Administrator. 

Funktionen wie Passworterinnerung und Kennwortänderung geben der Komponente einen recht professionellen Touch.
Wie Ihr die Komponente in Euer Projekt integrieren und nutzen könnt, möchte ich Euch  in diesem Thread mit Hilfe zahlreicher Screenshots erläutern.

[nettesekel]

Anlegen der nötigen Seiten in der Site-Ansicht

Wie schon erwähnt, besteht die Komponente aus verschiedenen Teilkomponenten und dadurch bedingt benötigen wir einige Unterseiten in unserem Projekt, auf denen wir die einzelnen Komponenten platzieren werden.
Legt also in der Siteansicht folgende Seiten an und orientiert Euch für die Struktur am folgenden Screenshot.

Registrierung
Login
Logout
Passworterinnerung
Passwortaenderung
Admin
registriert
eingeloggt
ausgeloggt
versendet
geaendert
abgelehnt




Wen es interessiert, der kann der folgenden Tabelle entnehmen, wozu die einzelnen Seiten benötigt werden und welche Teile der Komponente auf der jeweiligen Seite zum Einsatz kommen.

Seitenname	Komponente	Erklärung
Registrierung	Anmeldung	Formular, zu Registrierung für den ge- schützten Bereich
Login	Anmelden	Maske zum Einloggen in den geschütz- ten Bereich
Logout	Abmelden	Maske zum Ausloggen aus dem geschütz- ten Bereich
Passwort- erinnerung	Kennwort abrufen	Maske um eine Passworterinnerung anzufordern
Passwort- aenderung	Kennwort ändern	Maske um das aktuelle Passwort zu ändern
Admin	Verwaltung	Adminbereich zur Verwaltung und Freigabe der Benutzer
---	Sichere Seite	nach Publizierung unsichtbare Komponen- te für jede zu schützende Seite, bewirkt das Zuordnen der Seite zum geschützten Bereich
registriert	---	Bestätigungsseite nach erfolgreicher Registrierung
eingeloggt	---	Seite, die nach dem Login aufgerufen wird
abgelehnt	---	Seite, die aufgerufen wird, wenn ohne Berechtigung auf den geschützten Bereich zugegriffen wird
ausgeloggt	---	Seite, die nach dem Logout aufgerufen wird
versendet	---	Bestätigungsseite für den Versand der Passworterinnerung
geaendert	---	Bestätigungsseite für erfolgreiche Änderung des Passworts

[nettesekel]

Aufrufen der Komponente in der Arbeitsansicht

Wenn Ihr alle Seiten angelegt habt, öffnet Ihr die Seite „Registrierung”.

Wer die Komponente Sichere Seite nicht links in seinen Komponenten findet, kann dem folgenden Screenshot entnehmen, wie er sie aufrufen kann.

[nettesekel]

Einfügen der Komponente „Anmeldung”

Wie Ihr der Tabelle schon entnehmen konntet, fügen wir auf der Seite „Registrierung” die Komponente „Anmeldung” ein. Hierzu klickt Ihr einmal auf die Komponente und im Anschluss an die gewünschte Stelle in Eurem Layout.
Es öffnet sich ein Fenster, in welchem Ihr zuerst einen Namen für die gesamte Komponente „Sichere Seite” vergebt. Verzichtet hier bitte auf Sonderzeichen etc.




Nachdem Ihr die Eingabe des Namens mit OK bestätigt habt, öffnet sich ein weiteres Fenster über welches diverse Einstellungen für die Komponente „Anmeldung” vorgenommen werden müssen.

Beginnen wir mit dem Reiter „Felder / Beschriftung”. Links seht Ihr eine Liste mit den verschiedenen von NOF vorgesehenen Feldern, die bei der Registrierung vom User auszufüllen sind. Felder, die in Eurem Registrierungsformular nicht erscheinen sollen, markiert Ihr mit einem einfachen Klick und entfernt sie durch einen Klick auf den Minus-Button. Ist der Minus-Button inaktiv, handelt es sich um ein nicht abwählbares Feld. Die Reihenfolge der Felder könnt Ihr mit den Pfeil-Button ändern. Die Bezeichnung der Felder könnt Ihr bei Bedarf rechts unter „Beschriftung” ändern und direkt darunter habt Ihr die Möglichkeit eine ggf. angelegte Formatvorlage zuzuweisen.




Unter dem Reiter „Felder / Feld” sind die wichtigsten Einstellungen „Sichtbare Länge”, diese Angabe legt fest, wie breit das jeweilige Eingabefeld sein soll und „Max. Länge”, diese Angabe legt fest, wieviele Zeichen vom User in das jeweilige Feld maximal eingegeben werden dürfen. Klickt links nacheinander die Felder an und nehmt rechts für jedes Feld gesondert die Einstellungen vor.
Auch hier könnt Ihr wieder eine Formatvorlage zuweisen.




Der Reiter „Felder / Fehlerereignisse” bietet die Möglichkeit, eine Art Pflichtfeldprüfung einzurichten. Einige Felder sind standardmäßig als Pflichtfelder festgelegt, für alle anderen Felder könnt Ihr entscheiden, ob das Ausfüllen des Feldes für die Registrierung erforderlich ist oder nicht, bzw. ob beim Ausfüllen eine min. oder max. Zeichenzahl notwendig ist.
Wählt links nacheinander die Felder aus und legt auf der rechten Seite fest, welche Fehlerereignisse für dieses Feld gelten sollen.

Wählt ihr z.B. das Fehlerereignis „Feldwert erforderlich” und setzt das Häkchen bei „Aktiv” dann ist das betreffende Feld ein Pflichtfeld.
Unter Meldung könnt Ihr die Fehlermeldung eingeben, die bei nicht ausfüllen des Pflichfeldes eingeblendet werden soll und darunter kann auch hier wieder eine Formatvorlage zugewiesen werden.




Nun wechseln wir zum Reiter „Seiten” und legen fest, wie auf Fehler beim Ausfüllen des Formulars aufmerksam gemacht werden soll.
Ich habe mich für die Fehlermarkierung entschieden. Unausgefüllte Pflichtfelder erhalten nach dem Versuch, das Formular zu versenden, eine kleine rote Kennzeichnung.

Ein Häkchen bei „Fehlermeldung anzeigen” würde bewirken, dass unterhalb des Formulars die Liste mit Fehlermeldungen eingeblendet würde.

Ausserdem legt Ihr im unteren Teil des Fensters fest, auf welche Seite der User nach erfolgreichem Versand des Registrierungsformulars weitergeleitet wird. Hier kommt nun die Seite „registriert" ins Spiel.




Als letztes aktiviert Ihr den Reiter Allgemein und nehmt die Einstellungen so vor, wie sie im folgenden Screenshot zu sehen sind.
Dort wo im Screenshot „Deine Mailadresse” zu sehen ist, tragt Ihr bitte Eure Mailadresse ein.
Dann klickt Ihr auf speichern...




...und vergebt im sich öffnenden Fensterchen einen Profilnamen. Verzichtet auch hier bitte wieder auf Umlaute, Sonderzeichen etc.
Zum Schluss klickt Ihr auf OK.




Zu sehen ist in der Arbeitsansicht von NOF nur der Platzhalter der Komponente. Da alle Komponenten php benötigen, könnt Ihr das Ergebnis Eurer Arbeit erst auf dem Webserver kontrollieren. (oder mittels lokalem Webserver)

[nettesekel]

Einfügen der Komponente „Anmelden”

Nun wechseln wir zur Seite „Login” um die Komponente „Anmelden” einzubinden. Dazu klickt Ihr wieder einmal auf den Button für die Komponente und danach an die gewünschte Stelle in Eurem Layout. Es öffnet sich, wie bereits bei der ersten Komponente, das Fenster für die Vergabe des Namens. Da alle zusammen gehörenden Komponenten den selben Namen verwenden müssen, brauchen wir hier nun nur das Pünktchen bei „vorhanden” setzen und für den Fall, dass bereits mehrere Namen angelegt wurden, im Pulldownmenü den passenden Namen wählen. Mit einem Klick auf „OK” öffnet sich wieder das Fenster für die Einstellungen.




Hier seht Ihr nun die selben Einstellmöglichkeiten, wie schon bei der ersten Komponente. Klickt die einzelnen Reiter durch und nehmt ggf. gewünschte Einstellungen für Aussehen, Zeichenzahl etc. vor.




Dann aktiviert Ihr den Reiter „Seiten”. Hier habe ich wieder die Anzeige der Fehlermeldungen abgewählt und im unteren Teil des Fensters die Erfolgsseite „eingeloggt” ausgewählt.




Wenn Ihr nun zum letzten Reiter wechselt, werdet Ihr feststellen, dass dieser bereits die Einstellungen der ersten Komponente beinhaltet. Heißt für uns, hier gibt es nichts zu tun und wir beenden der Vorgang mit einem Klick auf „OK”.

[nettesekel]

Einfügen der Komponente „Abmelden”

Als nächstes wechselt Ihr zur Seite „Logout” um dort die Komponente „Abmelden” einzufügen. Das Vorgehen ist identisch mit dem bei den anderen Komponenten.
Ein Klick auf die Komponente, gefolgt von einem Klick ins Layout. Wieder setzt Ihr das Pünktchen bei „Vorhanden”.




Da es sich bei dieser Komponente eigentlich nur um einen Button handelt, halten sich die Optionen in Grenzen. Ihr könnt allerdings eine Formatvorlage zuweisen und den Text der auf dem Button erscheinen soll bearbeiten. So könnte man z.B. statt „Abmelden” auch „Ausloggen” auf den Button schreiben.




Über den Reiter „Seiten” legt Ihr die Seite „ausgeloggt” als Erfolgsseite fest.
Den Reiter „Allgemein” brauchen wir nicht mehr aufrufen, da wir diese Einstellungen bereits bei der ersten Komponente vorgenommen haben und diese für alle Komponenten übernommen werden. Ich werde ihn deshalb bei den noch folgenden Komponenten auch nicht mehr erwähnen.
Ihr klickt nun noch auf „OK” und damit wäre auch die Komponente „Abmelden” in Euer Projekt eingebaut.

[nettesekel]

Einfügen der Komponente „Kennwort abrufen”

Und da sind wir auch schon bei der nächsten Komponente. Wechselt zur Seite „Passworterinnerung", klickt auf die Komponente  „Kennwort abrufen” und danach in Euer Layout. Setzt das Pünktchen bei „Vorhanden” und klickt auf „OK”. Bei den Einstellungen, die hier vorzunehmen sind, geht Ihr genauso vor, wie ich es bei den anderen Komponenten beschrieben habe.

Unter dem Reiter „Seiten” wählt Ihr die Seite „versendet” als Erfolgsseite aus.

[nettesekel]

Einfügen der Komponente „Kennwört ändern”

Um die Komponente „Kennwort ändern" einzubinden, wechselt Ihr nun zur Seite „Passwortaenderung". Dort klickt Ihr, wie bereits mehrfach gemacht, die Komponente an und fügt sie mit einem Klick ins Layout ein. Die Grundsätzlichen Einstellungen sind wie gehabt vorzunehmen und über den Reiter „Seiten” stellt Ihr die Erfolgsseite „geaendert” ein.




Bei dieser Komponente gibt es nun erstmals einen zusätzlichen Reiter, nämlich den Reiter „Zugriff verweigert". Hier könnt Ihr - ähnlich wie bei den Erfolgsseiten - eine Seite festlegen, auf welche der User weitergeleitet wird, wenn er keine Berechtigung hat, auf die Seite „Passwortaenderun” zuzugreifen. Markiert hier nun die Seite „abgelehnt” und beendet die Einstellungen mit einem Klick auf „OK”.

[nettesekel]

Einfügen der Komponente „Verwaltung”

Nun kommen wir zur Komponente „Verwaltung”. Öffnet die Seite Admin und fügt auf die bekannte Weise die Komponente ins Layout der Seite ein.
Über den Reiter „Konto” des sich öffnenden Fensters könnt Ihr den Benutzernamen des Admins und das Passwort festlegen.
Ausserdem könnt Ihr mit einem Häkchen festlegen, ob die Registrierung der User erst durch den Admin bestätigt werden muss und ob der Admin bei jeder Neuregistrierung per Mail informiert werden soll.




Über den Reiter „Zugriff verweigert” legt Ihr auch hier die Seite „abgelehnt” als Zielseite für User fest, die unberchtigt versuchen auf die Adminseite zuzugreifen.

[nettesekel]

Einfügen der Komponente „Sichere Seite”

Und nun kommen wir zur letzten Komponente, der Komponente „Sichere Seite".
Währen alle anderen Komponenten nur einmal zum Einsatz kommen, könnt Ihr diese Komponente auf mehreren Seiten einbinden. Nämlich, auf jeder Seite eures Projektes, die dem geschützten Bereich angehören soll.
Hierzu öffnet Ihr die Seite eurer Wahl und fügt die Komponente an einer Stelle eurer Wahl ein.
Wahlweise könnt Ihr ein Schlosssymbol anzeigen lassen, und festlegen ob zur jeweiligen Seite nur der Admin oder auch die Benutzer Zugriff haben sollen.

Über den Reiter „Zugriff verweigert ” legt Ihr auch hier wieder die Seite „abgelehnt” als Zielseite für ungerechtigt zugreifende User fest. Ein Klick auf „OK” macht das Ganze komplett.

[nettesekel]

Anlegen des Ordners „db” auf dem Server

Damit die Komponente auch wirklich funktionieren kann, müsst Ihr auf eurem Server von Hand einen Ordner mit dem Namen „db” anlegen. Das geht per FTP-Programm wie z.B. Filezilla oder aber auch mit NOF, wie in den folgenden Screenshots zu sehen ist.
Vorausgesetzung ist, dass Ihr Eure Serververbindung in NOF bereits eingerichtet habt. Wer das nicht hat, sollte es nachholen, da die NOF-Komponenten immer direkt mit NOF publiziert werden sollten.

Wechselt also in die Publizierenansicht und klickt im rechten Teil des Fensters auf den Verbinden-Button.




Mit einem Rechtsklick in die Serveransicht öffnet sich ein Pulldownmenü und Ihr wählt die Option „Neuer Ordner”.




Den Ordner nennt Ihr dann „db”. (identische Schreibweise)




Nun steht einer Publizierung Eurer Seiten nichts mehr im Wege.
Die Seite Admin solltet Ihr aus der Navigation ausschließen, da dieser Bereich ausser euch niemanden etwas angeht. Entweder ruft Ihr die Seite direkt über den Browser auf und fügt Sie zu Euren Favoriten hinzu. Oder aber Ihr platziert ein transparentes Gif in Eurer Website und verlinkt dieses zur Adminseite. Ausser Euch weiß ja niemand, an welcher Stelle das Gif mit dem Link zu finden ist.

[nettesekel]

Zu beachten!

Die Komponenten bitte niemals kopieren und einfügen! Jede benötigte Komponente muss von Hand erstellt werden.

Die Ordnerrechte sollten auf 755 oder 777 stehen. Bei Problemen ist das zu überprüfen.

Wer nicht wie ich nach Assettyp publiziert, also im Ordner lokale Publizierung nicht die Ordner „assets”  und „html” hat, muss den Pfad zur User.csv in den Einstellungen der Komponente anpassen.


---------------------------------------------------------------------------------------

Ich wünsche Euch viel Spaß und Erfolg bei der Umsetzung.

l.g. nettesekel

[nettesekel]

Ein Beispiel gefällig?

Wer mal gucken möchte, wie das aussieht mit der Sicheren Seite...
In der NOF-Academy habe ich die Bilderkiste eingerichtet. Ein - mit der NOF-Komponente - geschützter Bereich, in welchem registrierte User kostenlos Fotos downloaden können...