Typo3 - Login-Formular im Template

Eine Ausarbeitung von Philipp Hauer vom 16. September 2008. ©

Inhaltsangabe

  1. Marker im Template setzen
  2. TypoScript einbinden und anpassen
  3. Formular-Design mit CSS anpassen

Frontend-User sind bequem...

Login-Formular

Logout-Formular

... 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 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).

ID herausbekommen

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

Bitte auswählen:*
Lena 2013-01-31 11:00:29
Hi,
wie kann ich denn hier eine Prüfung einbauen, ob das Passwort korrekt eingegeben wurde?
Sebastian 2013-01-08 10:19:23
Hallo beieinander,
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!
Tania 2012-07-02 12:03:08
Hallo zusammen,
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!
jonas 2012-04-26 13:50:05
ich habs nun doch mit Plugin und TemplateFile gelöst... Logout geht wie hier beschrieben...:
[usergroup=*]
page.10.subparts.LOGIN = TEXT
page.10.subparts.LOGIN.value(

Angemeldet als:





)
[else]
page.10.subparts.LOGIN < plugin.tx_felogin_pi1
)
[GLOBAL]
jonas 2012-04-25 16:24:07
Habe das gleiche Problem wie Chricken... komisch - Benutze Typo3 4.6.4 und habe so wie ich das sehe alles korrekt eingefügt... Wäre für tipps dankbar!
Chricken 2012-03-08 22:23:26
Hi Phillip,

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.
sven 2011-12-17 12:28:26
nevermind habs gefunden :)
danke fuer die anleitung im allgemeinen......
sven 2011-12-17 12:01:19
leider bin ich blutiger anfaenger und bin schon seit stunden dabei das formular in mein template einzubinden.
Benutze allerdings templavoila und frage mich wie ich den typo script code anpassen muss.
kann mir da jemand helfen?
danke
walter 2011-11-22 20:41:53
Hallo Philipp,
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
Christian 2011-05-10 14:07:16
Hallo,

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?
Sebastian 2010-09-25 17:35:21
Phil,

in den Seiteneigenschaften der Seite unter Zugriff musst du noch die Benutzergruppe angeben, die die Berechtigung haben soll, die Seite anzuschauen.

Gruß
Sebastian
Phil 2010-08-20 11:32:11
Super Tutorial, vielen Dank.
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
Davide 2010-07-14 10:02:22
Vielen Dank Chris!
Chris 2010-07-12 16:11:35
Hallo Davide,

es funktioniert auch mit Typo3 4.4 wunderbar!
Davide 2010-07-11 14:23:37
Hallo Philipp,

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