Typo3 - Login-Formular im Template
Eine Ausarbeitung von Philipp Hauer vom 16. September 2008. ©
Inhaltsangabe
Frontend-User sind bequem...
... und wollen sich deshalb direkt nach dem Öffnen der Seite einloggen können. Daher versteht es sich von selbst, das Login-Formular direkt ins Design respektive Template einzubinden. Im Internet kursieren viele, manchmal halbe, manchmal unpassende Lösungen, weshalb ich hier eine Möglichkeit aufzeigen möchte, die
- wunderbar einfach,
- formatierbar und
- schnell ist.
Und so gehts...
0. Extension installieren
Bei Typo3 < 4.2.x muss die Extention newloginbox installiert werden
Wird eine Typo3-Version älter als 4.2.x verwandt, so muss vorher die Erweiterung newloginbox installiert werden. Andernfalls ist die Extension bereits Bestandteil von Typo3 4.2.x+ und damit obsolet.
1. Marker im Template setzen
Zuerst gilt es einen Marker (hier Subparts) in das HTML-Template einzubauen. Um es später mittels CSS besser bearbeiten zu können, setzen wir alles in ein div-Block.
<div class="login">
<!-- ###LOGIN### start -->
Hier erscheint das Login-Formular im Template
<!-- ###LOGIN### stop -->
</div>
2. TypoScript einbinden und anpassen
Nun muss folgendes TypoScript im Setup eingebunden werden (einfach unter den bestehenden TypoScript-Code einfügen):
[usergroup=*]
page.10.subparts.LOGIN = TEXT
page.10.subparts.LOGIN.value(
<form action="index.php?id=1" method="post">
Angemeldet als: <span><!--###USERNAME###--></span>
<br />
<input class="submit logout" type="submit" name="submit" value="Abmelden" />
<input type="hidden" name="logintype" value="logout"/>
<input type="hidden" name="pid" value="15" />
</form>
)
[else]
page.10.subparts.LOGIN = TEXT
page.10.subparts.LOGIN.value (
<form action="index.php?id=4" method="post" onsubmit="superchallenge_pass(this); return true;">
<input class="input" type="text" id="user" name="user" value="Benutzername" onfocus="if (this.value == 'Benutzername') this.value = '';"/>
<input class="input" type="password" id="pass" name="pass" value="password" onfocus="if (this.value == 'password') this.value = '';"/>
<input class="submit" type="submit" name="submit" value="Anmelden"/>
<input type="hidden" name="logintype" value="login"/>
<input type="hidden" name="pid" value="15" />
<input type="hidden" name="redirect_url" value="index.php?id=4" />
</form>
)
[GLOBAL]
Zur Erklärung: Es handelt sich um eine simple If-Else-Bedingung: Ist der FE-User angemeldet, wird das Formular zum Logout angezeigt (oben); ist er es nicht, so erscheint das Login-Formular (unten).
Nun muss nur noch im <from>-Tag die ID der Seite eingegeben werden, die nach dem erfolgreichen Login angezeigt werden soll (hier: 4, 2x) bzw. nach erfolgreichen Logout (hier: 1, 1x). Außerdem noch die ID des Sysfolders, in dem die Frontend-Usern (Web-Seiten-Benutzern) erstellt wurden: Dazu beim <input>-Befehl (Attribut name="pid") die Sysfolder-ID im value-Attribut einsetzen (hier: 15, 2x).
Beim Integrieren des Codes in dein vorhandenes TypoScript gilt: Bedingungen (if-else) dürfen nicht in geschweiften Klammern stehen; in ihnen muss man immer vom root ausgehen. Also immer:
page.10 {
...
# anderer TypoScript-Code
...
}
[usergroup=*]
page.10.subparts.LOGIN = TEXT
page.10.subparts.LOGIN.value(
...
)
[else]
...
und nicht (!):
page.10 {
...
# anderer TypoScript-Code
...
[usergroup=*]
subparts.LOGIN = TEXT
subparts.LOGIN.value(
...
)
[else]
...
}
Das ist ein gern gemachter Fehler. ;-)
3. Formular-Design mit CSS anpassen
Dank der CSS-classes, die wir unserem HTML-Formular zugewiesen haben, können wir dieses nun einfach formatieren. Hier ein Designvorschlag:
/* ------ LOGIN ----- */
div.login{
font-size:12px;
color:#587e94;
text-align:center;
margin:20px 0px 5px 0px;
padding:10px 5px 0px 5px;
}
div.login span{
font-style:italic;
margin-bottom:3px;
}
div.login input.logout{
margin-top:5px;
}
/* ----- Input-Felder ----- */
div.login input.input{
background: url(http://www.philipphauer.de/tut/typo3-login-template/bg-input.jpg) repeat-x;
border:1px solid #759fb7;
border-right:1px solid #476d82;
border-bottom:1px solid #476d82;
width:160px;
color:#79a5be;
margin-bottom:1px;
}
div.login input.submit{
width:162px;
background: url(http://www.philipphauer.de/img/bg-suchbutton.jpg) repeat-x;
border:1px solid #759fb7;
border-right:1px solid #476d82;
border-bottom:1px solid #476d82;
}
Fertig!
Voila! Jetzt noch den Typo3-Cache löschen und das Login/Logout-Formular ist fester Bestandteil im Seitenlayout.
Kommentare
wie kann ich denn hier eine Prüfung einbauen, ob das Passwort korrekt eingegeben wurde?
leider funktioniert das bei mir auch nicht. Ich versuche es unter Version 4.7.3 und ein Login über das beschriebene Formular im Seitenlay-out gelingt nicht. Es wird zwar, wenn ich mich über ein entsprechendes Seiteninhaltselement auf einer separaten Seite einlogge, im Seitenlay-out das Abmeldeformular angezeigt, mit dem ich mich auch ausloggen kann, aber EINloggen kann ich mich nur über dieses Seiteninhaltselement auf einer separaten Seite.
Weiss jemand, woran das liegen mag? Danke für die Hilfe!
habe dieses Beispiel bei mir eingebaut. Leider funktioniert dass mti dem Anmelden nicht genau. Egal was ich als Benutzername und passwort eingebe, ich werde immer zu der einen seite weitergeleitet. ich weiss nicht was falsch ist ...
wäre nett wenn ihr mir helfen würdet. danke!
[usergroup=*]
page.10.subparts.LOGIN = TEXT
page.10.subparts.LOGIN.value(
Angemeldet als:
)
[else]
page.10.subparts.LOGIN < plugin.tx_felogin_pi1
)
[GLOBAL]
vielen Dank für die Anleitung. Ist wirklich ziemlich einfach und elegant.
Trotzdem kriege ich es nicht auf die Reihe.
Es wirtd zwar das Anmeldefeld dargestellt und wenn ich angemeldet bin, dann kann ich mich abmelden.
Aber wenn ich nicht angemeldet bin, dann führt eine Anmeldung nicht zum erwünschten Erfolg.
Gibt es noch irgendwelche Fussangeln? Ich habe den Code mit dem eines normalen Anmeldeformulars verglichen (welches funktioniert) und es ist identisch. Leuchtet mir nicht ein.
Vielem Dank für eine Antwort.
danke fuer die anleitung im allgemeinen......
Benutze allerdings templavoila und frage mich wie ich den typo script code anpassen muss.
kann mir da jemand helfen?
danke
vielen dank für deine anleitung, alles super. eine frage: kann man sich nur über den logout button abmelden? wäre schön, wenn man beim wechsel auf eine andere page auch automatisch abgemeldet wird. wenn ich nämlich den zurück button von exploren klicke bin ich noch immer drin.
Viele Grüße
Walter
Danke für die Anleitung. Leider bekomme ich immer nur das Login angezeigt und nicht das Logout Formular. Anmelden kann ich mich aber es zeigt mir keinen Status an.
Jemand eine Lösung?
in den Seiteneigenschaften der Seite unter Zugriff musst du noch die Benutzergruppe angeben, die die Berechtigung haben soll, die Seite anzuschauen.
Gruß
Sebastian
Hab nur ein kleines Problem: Gebe ich falsche Logindaten an oder drücke einfach so auf den Anmelde-Button, ohne irgendetwas auszufüllen, werde ich trotzdem auf die geschützte Seite weitergeleitet (jedoch ohne Inhalte).
Kann man dieses Verhalten unterbinden?
Grüße, Phil
es funktioniert auch mit Typo3 4.4 wunderbar!
ich bin ein Typo3-Anfänger und ich möchte dich fragen: ist dieses Verfahren noch gültig für die neue typo3 version (v4.4)?
Ich meine, ich sehe dass du viele HTML-Code im Setup eingesetzt hast. Gibt es keine andere Möglichkeit um mehr HTML Code in der Template (.html Datei) einzusetzen?
Vielen Dank für dein Beispiel. Sehr interessant!
Gruüsse aus der Schweiz,
Davide
Seite: 1 - nächste Seite