Frontend Login

Das Eingebaute Frontend Login ist eine einfache Lösung um FE-Benutzern den Zugang zu geschützten Seitenbereichen zu ermöglichen.
Im Moment können alle angemeldeten FE-Benutzer alle freigegebenen Seiten sehen!! Es gibt noch keine Möglichkeit hier zu differenzieren.
Die FE-Benutzer werden gegen die Backend-DB geprüft.

Forum: http://forum.phpwcms.org/viewtopic.php?p=94549#p94549
Forum: http://forum.phpwcms.org/viewtopic.php?p=92271#92271


Vorgehensweise:

  1. Frontend Benutzer anlegen
  2. Kategorien (anlegen) sperren/freigeben
  3. Frontend Login CPs im versteckten Bereich anlegen
  4. CPs Frontend Login einrichten für Login/Logout
  5. Templates Login/Logout speichern und zuordnen
  6. CSS Datei speichern/zuordnen


<note important>Bitte nicht verwechseln mit dem RT {FELOGIN}.</note>


Einfaches Beispiel:

* In einem beliebigen Bereich der Seite wird ein Link auf das FE-Anmeldeformular platziert.

  • Abgefragt werden Benutzernamen und Passwort.
  • Die Benutzer müssen vom Seiten Admin vorher im Backend angelegt werden.
  • Hat der FE-Benutzer seine Logindaten vergessen, schreibt dieser eine E-Mail an den Administrator (bzw. an die hinterlege E-Mailadresse), der dann ein neues Passwort vergeben kann.


Das hier vorgestellt Verfahren verwendet zwei FE Login CPs jeweils einen für das Login und das Logout. So können das Anmeldeformular und der Abmeldelink getrennt dargestellt werden, da der Abmeldelink (Logout-Button) häufig auf jeder Seite verfügbar sein soll nach einer Anmeldung. Umgekehrt wird permanent ein Link zum Anmeldeformular dargestellt, wenn der Benutzer sich noch nicht angemeldet hat.
(Technik: Das ursprüngliche CP-Template wird in zwei Teile geteilt und jeweils den beiden CPs für das Login und Logout zugeordnet.)

Die Darstellung im Logoutbereich schaltet autom. um von Loginlink nach Abmelde-Button.


Link mit Anmeldeformular


Nach erfolgreicher Anmeldung sind die geschützten Kategorien für den Benutzer navigierbar.


Die geschützten Kategorien können eingesehen werden.

Die Abmeldung des Benutzer erfolgt über den Button [ Abmelden ].
So gelangt der Benutzer wieder automatisch zur Anmeldeseite.

Das hier gezeigte Verfahren ist absichtlich einfach gehalten und verzichtet daher auf eine Selbstregistrierung des FE-Benutzers mit Freigabe durch den Seiten Admin.
Dieses Verfahren wäre wesentlich aufwendiger und bedarf für die volle Funktion noch etwas Programmierarbeit.

Voraussetzungen:

conf.inc.php:

$phpwcms['SESSION_FEinit']    = 1; // set 1 to enable sessions in frontend, 0 to disable sessions in frontend
$phpwcms['allow_cntPHP_rt']   = 1; //allow PHP replacement tags and includes in content parts


FE-Benutzer anlegen:

Die Benutzer für das reine Frontend Login können sich nicht im BE anmelden, sondern lediglich im Frontend für die geschützten Seiten.

Diese FE-Benutzer müssen vom Administrator angelegt werden.

ADMIN → Benutzerverwaltung

Benutzerverwaltung:

  Login-Bereich: [x] Frontend   [ ] Backend   [ ] Frontend und Backend
     Aktivieren: [x] Benutzer kann sich anmelden
  Administrator: [ ] Benutzer erhält Administrator-Rechte !!!
    Überprüfung: [/] E-Mail mit den Anmeldedaten an den neuen Benutzer senden  	

Kategorien freigeben/sperren

Die geschützten Kategorien die nur für angemeldete Benutzer sichtbar sein sollen, werden unter “Seitenstruktur” bestimmt.

Jede angelegte Kategorien kann so mit wenigen Klicks von der allgemeinen Veröffentlichung ausgenommen werden.

ADMIN → Seitenstruktur → [x] sichtbar nur für angemeldete Benutzer

Kategorien anlegen/einstellen

  • Bitte legen Sie die Kategorien an, die geschützt werden sollen und tragen die Rechte dort ein (bzw. ändern Sie vorhandene Kategorien entsprechend).

ADMIN → Seitenstruktur → Kategorie):

Frontend Menüstatus:
[ ] versteckt   [ ] sichtbar, wenn aktiv   [x] sichtbar nur für angemeldete Benutzer

Status:
[x] sichtbar   [x] öffentlich   [ ] SSL   [/] Sitemap   [/] Archiv 

Sitemap ist optional, je nach dem ob der angemeldete Benutzer in der Sitemap (wenn vorhanden) die geschützte Kategorie sehen soll.

Versteckten Bereich anlegen

<note important> Bitte platziere den CP Frontend Login in einen nicht versteckten Bereich, oder holen Sie diesen CP mit TAG {SHOW_CONTENT:...} oder einem “Contetpart Alias” aus dem versteckten Bereich.
(Zweite Methode mit {SHOW_CONTENT:...} hier angewendet). </note>

Im Bild ADMIN → Seitenstruktur sehen Sie zudem noch einen versteckten Bereich "--- hidden", der im FE nicht in der Navigation auftaucht (Bitte unterscheiden zwischen Zugriffsschutz und “in der NAVI verstecken”).

In diesem Bereich werden Artikel und CPs abgelegt, die systemintern- oder z.B. durch einen TAG wie {SHOW_CONTENT:...} gezielt verwendet werden.

  • Bitte legen Sie einen versteckten Bereich an (Der Name muss nicht "--- hidden" lauten).

ADMIN → Seitenstruktur (versteckter Bereich)

  • Bitte legen Sie untehalb von "--- hidden" folgenden Kategoriebaum an:
  • --- hidden
    • FE-Login/Logout
      • FE-Login
      • FE-Logout


ADMIN → Seitenstruktur (Kategorien im versteckten Bereich)

  • --- hidden
    • FE-Login/Logout (Alias kann frei vergeben werden)

  • --- hidden
    • FE-Login/Logout
      • FE-Login (wie im Bild unten mit dem Alias “fe-login”)
      • FE-Logout (ohne Bild: Bitte auch anlegen mit dem Alias “fe-logout”)

Diese Kategorien werden lediglich angelegt um einen besseren Überblick zu behalten und die “Frontend Login” CPs aus der allgemeinen Contentdarstellung auszukoppeln.

CP Frontend Login einrichten

Die strukturelle Basis für ein FE-Login ist angelegt, nun werden die ausführenden Teile eingerichtet.


Artikelstruktur

ARTIKEL

  • Es werden nun die Artikel angelegt, jeweils in der Kategorie FE-Login und FE-Logout um später die CPs aufzunehmen.
    Name und Alias der Artikel können frei gewählt werden.


CP Frontent Login

Es werden zwei CPs vom Typ “Frontent Login” angelegt:

  • Ein CP für das Login innerhalb der Kategorie “FE-Login” im Artikel “LogIn für Frontend-User”
    mit dem Template “fe_login_de.tmpl” (hier im Bild).
  • Ein CP für das Logout innerhalb der Kategorie “FE-Logout” im Artikel “LogOut für Frontend_User”
    mit dem Template “fe_logout_de.tmpl” (nicht abgebildet).

Diese beiden CPs unterscheiden sich inhaltlich nur durch das jeweils verwendete Template und liegen in unterschiedlichen Kategorien → Artikeln.

ARTIKEL → Frontend-Login CP (ContentPart) - Mit Vorlagen in /template/inc_cntpart/felogin/

Es wird nur gegen die Benutzer-Datenbank geprüft, nicht gegen die Benutzerprofil-Datenbank.

Template FE-LOGIN

Datei: fe_login_de.tmpl
Verzeichnis: template/inc_cntpart/felogin/*


Zwei Einträge müssen angepasst werden,

  • Die eigene E-Mailadresse hier “info@example.com” etwa um Zeile 23 und 52.
  • Das Sprungziel für die autom. Weiterleitung nach erfolgreichem Login:
    //	headerRedirect('category05.phtml', 301);
    	headerRedirect('index.php?category05', 301);

fe_login_de.tmpl

<!-- NOTICE: Convert file to charset of site -->
 
<!--LOGIN_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
; Cookie expire set to 90 days
date_format        = "%d/%m/%y"
set_locale        = "de_DE"
cookie_expire    = 7776000
<!--LOGIN_SETTINGS_END//-->
 
 
<!--LOGIN_FORM_START//-->
<div class="feLoginForm">
 
    [ERROR]
    <br />
    <h3 style="color:red">Anmeldefehler:</style></h3>
    <br />
    <p class="error">
        Anmeldename und/oder Passwort ist/sind nicht richtig. <br />
        Sollten Sie Ihren Anmeldenamen und/oder Passwort vergessen haben, <br />
        senden Sie uns bitte eine [MAIL info@example.com]E-Mail[/MAIL].
    </p>
    [/ERROR][ERROR_ELSE]
    <br />
    <h2>Bitte melden Sie sich an:</h2>
    <br />
    <p>
        Einige Bereiche unserer Seite sind nur für angemeldete Benutzer zugänglich. <br />
        Bitte geben Sie ihre Anmeldedaten ein!
    </p>
    [/ERROR_ELSE]
 
    <form action="{FORM_TARGET}" method="post" name="feLoginForm" id="feLoginForm">
 
            <label for="feLogin">Benutzername:</label>
            <input type="text" name="feLogin" id="feLogin" value="{LOGIN}" />
 
            <label for="fePassword">Passwort:</label>
            <input type="password" name="fePassword" id="fePassword" value="{PASSWORD}" />
 
            <div class="ku_login">
            <input class= "logInButton" type="submit" value="Anmelden" name="feSubmit" id="feSubmit" />
            </div>
 
    </form>
 
    <div class="link-unten">
        <p>
        Benutzername/Passwort vergessen?<br />
        Bitte senden sie uns eine [MAIL info@example.com]E-Mail[/MAIL].
        </p>
    </div>
 
</div>
<!--LOGIN_FORM_END//-->
 
<!--LOGIN_IS_START//-->
<div class="feLoggedIn">
 
[PHP]
// === weiterleiten per redirect nach Category 06
if ( _getFeUserLoginStatus()) { // === ist der User eingeloggt, dann weiter
//    headerRedirect('category05.phtml', 301);
    headerRedirect('index.php?category05', 301);
exit;
}
[/PHP]
 
<!--    // Ausgelagert in einen eiegenen CP Aufruf
    <form action="{FORM_TARGET}" method="post" name="feLoginForm" id="feLoginForm">
        <p class="button">
            <input type="submit" value="Logout" name="feLogout" id="feLogout" />
        </p>
    </form>
//-->
 
</div>
<!--LOGIN_IS_END//-->


Wenn eine automatische Weiterleitung nicht gewünscht ist, kann auch ein Link eingesetzt werden.
Dazu bitte den gesamten Teil [PHP] ..... [/PHP] austauschen gegen:

[PHP]
// === weiterleiten per Link
if ( _getFeUserLoginStatus()) { // === ist der User eingeloggt, dann weiter
    echo '<br />Bitte folgen Sie dem Link: <a href="index.php?MeinZielSeitenAlias">Mein Linktext</a>'.LF;
}
[/PHP]


Template FE-LOGOUT

Datei: fe_logout_de.tmpl
Verzeichnis: template/inc_cntpart/felogin/*


Ein Eintrag muss angepasst werden,

  • Das Sprungziel (der Alias hier “fe-login”) für die autom. Weiterleitung zum Anmeldeformular in Zeile 9:
    (Sind Sie exakt nach dieser Beschreibung vorgegangen, entfällt diese Anpassung, siehe Kategorie-Alias FE-Login)
    <form action="index.php?fe-login" method="post" name="feLogoutForm" id="feLogoutForm">

fe_logout_de.tmpl

<!-- NOTICE: Convert file to charset of site -->
 
<!--LOGIN_IS_START//-->
<div class="feLogOut">
 
    <div>Sie sind angemeldet als: <span style="color: #666; font-weight: bold;">{LOGIN}</span></div>
    <!-- {FORM_TARGET} //-->
    <div >
        <form action="index.php?fe-login" method="post" name="feLogoutForm" id="feLogoutForm">
            <input class= "logOutButton" type="submit" value="[ Abmelden ]" name="feLogout" id="feLogout" />
        </form>
    </div>
 
</div>
<!--LOGIN_IS_END//-->


CSS:

Datei: fe_login.css
Verzeichnis: template/inc_css/*

Die Datei fe_login.css muss in der Vorlage unter “CSS Datei:” eingebunden werden.

fe_login.css

/* -------- FE USer Login form --------- */
.feLoginForm {
    margin: 0;
    padding: 0;
}
.feLoginForm label {
    float:left;
    clear:both;
    display:block;
    width:120px;
    margin-bottom:10px;
    padding-right:10px;
    text-align: right;
}
.feLoginForm input, .feLoginForm textarea, .feLoginForm select {
    float:left;
    display:block;
    width:250px;
    border: 1px solid #890C03;
    background:#F4F4F4;
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 14px;
    font-weight: bold;
    margin-bottom:10px;
    padding:1px;
}
 
 
.feLoginForm form {
/*  background:#EFEFEF;
  border: 1px dotted #333;
*/
    width:450px;
    height: 100px;
    padding-top: 20px;
    margin: 20px 0 0 0px;
}
 
/* Um den Kasten fuer hidden input der Session auszublenden */
.feLoginForm input[type=hidden] { display: none; }
 
.feLoginForm .option {
    border:none;
    background:none;
    width:auto;
}
 
.feLoginForm #feRemember {
    float:left;
    display:block;
    width:auto;
}
 
 
/*
.feLoginForm .ku_login {
    padding-left:150px;
}
*/
/*
.feLoginForm .feLoggedIn .button {padding: 40px 0 0 115px}
*/
 
/* AnmeldeButton */
.feLoginForm .logInButton, .feLoginForm #feSubmit  {
    font:12px Arial, Helvetica;
    font-weight: bold;
    font-style: normal;
    cursor: pointer;
    color: #f5f5f5;
/*    border: 1px solid #2C6ED5;  */
    background-color: #890C03;
    float:right;
    padding: 0;
    margin: 0 66px 0 302px;
    width:82px;
    height: 20px;
}
 
/* Erinnerung */
.feLoginForm .link-unten {
/*    float:left; */
    clear:both;
    display:block;
    width:253px;
    margin-top: 10px;
    margin-bottom:10px;
    margin-left: 130px;
    text-align: right;
 
 
}
/* ==== ist eingeloggt ===== */
.feLoggedIn {
    margin: 0;
}
 
 
/* -------- END FE USer Login form ------ */
 
/* -------- FE USer LogOut form ------ */
.feLogOut {
/*    width: 420px; */
/* height: 18px; */
    margin: 0 0 0 5px; /* kh */
    padding: 0;
    text-align: left;
    color: #555;
    font-size: 9pt;
}
 
.feLogOut input, .feLogOut textarea, .feLogOut select {
 
    display:block;
    width:20px;
    border: 1px solid #333;
    background:#F4F4F4;
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 8pt;
    font-weight: bold;
    margin: 0;
    padding:1px;
}
 
.feLogOut form {
/*    background:#EFEFEF;
    border: 1px dotted #333; */
    width: 100px;
/*    height: 20px; */
    padding: 0;
    margin: 0;
}
 
.feLogOut .logOutButton {
    font:12px Arial, Helvetica;
    font-weight: bold;
    font-style: normal;
    cursor: pointer;
    color: #555;
    border: 1px solid #bbb;
    background-color: #eee;
    padding: 0 0 2px 0;
    margin:5px 0 0 0px;
    width:82px;
    height: 21px;
}
 
.feLogOutLink {
    margin: 0 0 0 5px; /* kh */
    padding: 0;
    text-align: left;
    color: #555;
    font-size: 11pt;
}
 
.feLogInOutContainer {
    width:180px;
    margin-top: 10px;
    padding: 5px 2px 5px 5px;
    background-color: #E1C4F2;
    border: 1px solid #aaa;
}
 
.feLogInOutContainer a {
    padding-top: 10px;
    display: block;
    font-size: 12px
}
/* -------- END FE USer LogOut form ------ */


Positionierung des Logout Button

Der Logout Button wird durch den zweiten Aufruf des CPs Frontend Login ausgegeben. Hierzu wird dem CP ein entsprechendes Template mitgegeben.

Der Ort der Ausgabe wird in der Seitenvorlage festgelegt.

Fügen sie dort bitte folgendes ein:

<!-- FE-Login LOGOUT //-->
<div class="feLogInOutContainer">
  {SHOW_CONTENT:CP,24}
 
  <!--LOGGED_OUT_START//-->
    <div class="feLogInLink"><a href="index.php?fe-login">« FE-Login » </a></div>
  <!--LOGGED_OUT_END//-->
</div>

Die CP ID in {SHOW_CONTENT:CP,24} muss natürlich mit der ID des CPs abgeglichen werden in dem das Template fe_logout_de.tmpl verwendet wird, also dem CP für das Logout (in der Kategorie FE-Logout).


Kleine Hilfen

Zwei Tags für versteckten Content:

<!--LOGGED_IN_START//--> heyhey <!--LOGGED_IN_END//-->

und

<!--LOGGED_OUT_START//--> oh-oh! <!--LOGGED_OUT_END//-->


Ist der User eingeloggt?

_getFeUserLoginStatus() [nicht vorhanden | 1]

Am Beispiel einer Weiterleitung:

[PHP]
// === weiterleiten per redirect zu einer bestimmten Kategorie
if ( _getFeUserLoginStatus() ) { // === ist der User eingeloggt, dann weiter
//    headerRedirect('category_alias.phtml', 301);
    headerRedirect('index.php?category_alias', 301);
   exit;
}
[/PHP]


FE Username aus Sessionvariable auslesen

Forum: http://forum.phpwcms.org/viewtopic.php?p=119716

Datei: template/inc_Script/frontend_render/fe_username.php

$content['all'] = str_replace(
          '{FE-URSERNAME}',
          empty($_SESSION[ session_id().'_userdata']) ? 'nicht angemeldet' : html_specialchars($_SESSION[ session_id().'_userdata']['name']),
          $content['all']
    );


Session-Hash: session_id()


deutsch/phpwcms-system/artikel/contentparts/frontend-login.txt · Last modified: 2018/06/03 18:08 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0