--- title: Frontend-Login url: "https://www.toujou.de/tutorials/seiteninhalte/frontend-login/" date: 2020-10-16 modified: 2022-09-27 --- # Frontend-Login 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Tutorials](https://www.toujou.de/tutorials/) 4. [Seiteninhalte bearbeiten](https://www.toujou.de/tutorials/seiteninhalte/) 5. [Frontend-Login](https://www.toujou.de/tutorials/seiteninhalte/frontend-login/) Frontend-Login ============== In toujou können Sie einzelne Seiten oder Inhaltselemente nur für bestimmte Nutzer und Nutzergruppen zugänglich machen. Möglich wird dies mittels des Frontend-Logins. In diesem Tutorial erfahren Sie, wie Sie den Zugriff einer Seite oder eines Inhaltselements beschränken und wie Sie diesen einer Benutzergruppe zugänglich machen. [Anleitung](#c1008933) [Video-Tutorials](#c1008935) [Hinweise, Tipps & Tricks](#c1008932) --- Schritt für Schritt ------------------- Bevor Sie eine passwortgeschützte Seite mittels Frontend-Login auf Ihrer Website darstellen können, müssen Sie die jeweiligen [Benutzergruppen](#c1008933) mit den entsprechenden Rechten erstellt haben. Erst in einem zweiten Schritt können Sie das [An- bzw. Abmeldeformular](#c1008929) auf der Loginseite erstellen und den Zugriff auf bestimmte Seiten regulieren. --- [ ![](https://www.toujou.de/_assets/processed/nlUbQuFaqbj8O4E8gTlimXLYw8wn-WKQfQN1A9DN_vE/q:85/w:433/h:244/fn:Y3NtX0JlbnV0emVyb3JkbmVyX2Vyc3RlbGxlbl80NTY1OGE3N2M5:t/cb:40fc97a690b3842de98d374f262503c488ab7e3a/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vQmVudXR6ZXJvcmRuZXJfZXJzdGVsbGVuLnBuZw) ](https://www.toujou.de/_assets/processed/kNW4E638Tnb7EK8DDxGJb19_q0tXYcLRK1r9DOHGr4Y/q:85/w:1024/h:576/fn:Y3NtX0JlbnV0emVyb3JkbmVyX2Vyc3RlbGxlbl84M2M1MGZmZjkw:t/cb:40fc97a690b3842de98d374f262503c488ab7e3a/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vQmVudXR6ZXJvcmRuZXJfZXJzdGVsbGVuLnBuZw) ### Benutzerordner erstellen - Bevor Sie eine Seite mit einem Frontend-Login schützen können, müssen Sie einen Benutzerordner erstellen, in dem Sie die Benutzergruppen und Benutzer ablegen. - Gehen Sie hierfür mit der Maus auf das **Ordner-Icon** und halten die Maus gedrückt, während Sie das Icon an die gewünschte Stelle im *Seitenbaum* einsetzen. - Geben Sie dem Ordner einen sinnvollen Namen, beispielsweise »**Website-Benutzer**«. [ ![](https://www.toujou.de/_assets/processed/dipyp3G6H3GhKDnyosu74Pp4LVOCMPj7gkmaqlheMoE/q:85/w:433/h:244/fn:Y3NtX1dlYnNpdGVfQmVudXR6ZXJncnVwcGVuX2FubGVnZW5fMV8wMjJhY2MzYjNh:t/cb:cee3e1ec7bedda0d4eb3e6ff849b73f736907bf6/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vV2Vic2l0ZV9CZW51dHplcmdydXBwZW5fYW5sZWdlbl8xLnBuZw) ](https://www.toujou.de/_assets/processed/lgKT79NZ83DLuwF5TKefndzFhhptbbdRPGCYAuQUxuk/q:85/w:1024/h:576/fn:Y3NtX1dlYnNpdGVfQmVudXR6ZXJncnVwcGVuX2FubGVnZW5fMV80MzIzNmQ0YmUz:t/cb:cee3e1ec7bedda0d4eb3e6ff849b73f736907bf6/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vV2Vic2l0ZV9CZW51dHplcmdydXBwZW5fYW5sZWdlbl8xLnBuZw) ### Website-Benutzergruppen erstellen - Bevor Sie eine Seite mit einem Frontend-Login schützen können, müssen Sie die entsprechenden Datensätze für Benutzergruppen und Benutzer erstellen. - Um eine Website-Benutzergruppe anzulegen, klicken Sie in der *Listenansicht* und dem entsprechenden *Ordner* (im Screenshot »Website Benutzer«) auf das **+-Icon** und anschließend auf den Datensatz **Website-Benutzergruppe**. Es öffnet sich ein neues Fenster. - Tragen Sie unter dem Reiter *Allgemein* in das Feld *Gruppennamen* den gewünschten Namen für die Website-Benutzergruppe ein. - **Speichern** Sie die Einstellungen. [ ![](https://www.toujou.de/_assets/processed/KKY7NlK0CIWDL2EGaiqSG0A4Ovau-Dn3yNmwifzLD3I/q:85/w:433/h:244/fn:Y3NtX1dlYnNpdGVfQmVudXR6ZXJfYW5sZWdlbjJfZmM3NTllNTM4Mw:t/cb:ec5358d91f38841d8851a93a1e22959ee7b27be7/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vV2Vic2l0ZV9CZW51dHplcl9hbmxlZ2VuMi5wbmc) ](https://www.toujou.de/_assets/processed/c50n2jw6wHoy4ZU89Hsczfwm6BI_uL80Boc94c-z3D4/q:85/w:1024/h:576/fn:Y3NtX1dlYnNpdGVfQmVudXR6ZXJfYW5sZWdlbjJfNDczY2QxMzc4Mg:t/cb:ec5358d91f38841d8851a93a1e22959ee7b27be7/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vV2Vic2l0ZV9CZW51dHplcl9hbmxlZ2VuMi5wbmc) ### Website-Benutzer anlegen - Um einen Website-Benutzer zu kreieren, klicken Sie in der *Listenansicht* und dem entsprechenden *Ordner* auf das **+-Icon** und anschließend auf den Datensatz **Website-Benutzer.** - Im Pop-up-Fenster vergeben Sie unter dem Reiter *Allgemein* einen persönlichen Benutzernamen und ein individuelles Passwort. - Verknüpfen Sie den Benutzer mit einer Benutzergruppe, indem Sie aus den *verfügbaren Objekten* die gewünschte **Benutzergruppe** anklicken. - **Speichern** Sie die Einstellungen für den Benutzer. --- [ ![](https://www.toujou.de/_assets/processed/_LCwEj7j1O1aVGWGrhcJoH3ZHmv4hu59CqyXG253oE0/q:85/w:433/h:244/fn:Y3NtX0FubWVsZGVmb3JtdWxhcl9lcnN0ZWxsZW5fNWUxZTFiMTlhZg:t/cb:f383f2e4e3ec555696ca532b3e96e4484ab4183d/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vQW5tZWxkZWZvcm11bGFyX2Vyc3RlbGxlbi5wbmc) ](https://www.toujou.de/_assets/processed/BX9CgMWVMUnGzkpPPkSIG4yGnT0jTjoXKc2jod8RA1c/q:85/w:1024/h:576/fn:Y3NtX0FubWVsZGVmb3JtdWxhcl9lcnN0ZWxsZW5fOWI3ZGY1OTVhZA:t/cb:f383f2e4e3ec555696ca532b3e96e4484ab4183d/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vQW5tZWxkZWZvcm11bGFyX2Vyc3RlbGxlbi5wbmc) ### **An- und Abmeldeformular erstellen** - Mit dem TYPO3-Element Anmeldeformular können Sie den Frontend-Login auf einer Loginseite platzieren. Wählen Sie dafür zunächst in der Modulliste die **Seitenansicht** und dann im Strukturbaum die entsprechende **Seite** an, in unserem Beispiel Mitglieder. - Über einen Klick auf Icon **+ Inhalt** öffnet sich das Pop-up Fenster, in dem Sie über den Reiter **Widgets** das Element **Anmeldeformular** aussuchen. - Das Anmeldeformular fungiert auch als Abmeldeformular. Daher ergibt unter Umständen eine eigene Loginseite Sinn, auf der sich Nutzer\*innen an- und abmelden können. Alternativ lässt sich das Anmeldeformular auch auf jeder beliebigen anderen Seite implementieren. [ ![](https://www.toujou.de/_assets/processed/vADhuM4dFxKhCfGn3Ca3-6XdjjTvpOozG3tYJ3ceYps/q:85/w:433/h:244/fn:Y3NtX0RhdGVuc2FldHplX3ZlcmtudWVwZmVuMV8wMV8yYmIyMGY5YWI0:t/cb:b004ea5d0d7ea3977c6f0a85f15df7c9d0428ce5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vRGF0ZW5zYWV0emVfdmVya251ZXBmZW4xXzAxLnBuZw) ](https://www.toujou.de/_assets/processed/BOfTxoTnMJ-jHjCA9Mvwc739uyRB9l7ZTvzV9N9jlG8/q:85/w:1024/h:576/fn:Y3NtX0RhdGVuc2FldHplX3ZlcmtudWVwZmVuMV8wMV82NDExYTIyY2E2:t/cb:b004ea5d0d7ea3977c6f0a85f15df7c9d0428ce5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vRGF0ZW5zYWV0emVfdmVya251ZXBmZW4xXzAxLnBuZw) ### Benutzer verknüpfen - Um den Benutzer für den Login-Bereich freizuschalten, müssen Sie den Datensatz im Anmeldeformular verknüpfen. - Klicken Sie hierfür innerhalb des Reiters *Plug-In* im Bereich *Speicherort Benutzer* auf das **Ordner-Icon**. Es öffnet sich ein Pop-up Fenster, in dem Sie den Ordner für Website-Benutzer auswählen. - Für Weiterleitungen nach dem Login suchen Sie zunächst unter dem Reiter *Weiterleitungen* aus den *verfügbaren Optionen* »**Nach Anmeldung (TS oder Flexform)**« aus, sodass es bei den a*usgewählten Optionen* erscheint. Verknüpfen Sie anschließend die Weiterleitung mit einem Klick im entsprechende Feld auf das **Ordner-Icon** und der Auswahl der gewünschten Seite in Ihrem Seitenbaum. Das Prozedere ist für Weiterleitungen nach einer fehlerhaften Anmeldung und Abmeldung ebenso anwendbar. - **Speichern** Sie Ihre Änderungen. [ ![](https://www.toujou.de/_assets/processed/NntdO04fIUbWYFI75aHBUcPbkTXTqz_lc4ioylYx8-k/q:85/w:433/h:244/fn:Y3NtX0dlc2NodWV0enRlX1NlaXRlX2VpbnJpY2h0ZW5fZDY4M2FlOTJiYw:t/cb:73c8739aebd3386e098e050d3fb37098069b97a9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vR2VzY2h1ZXR6dGVfU2VpdGVfZWlucmljaHRlbi5wbmc) ](https://www.toujou.de/_assets/processed/ADrACQFEAt16ihqSAfU5qGxwyb9bM7fAV_2jN9pBhOo/q:85/w:1024/h:576/fn:Y3NtX0dlc2NodWV0enRlX1NlaXRlX2VpbnJpY2h0ZW5fNWFjMDliMzk2MA:t/cb:73c8739aebd3386e098e050d3fb37098069b97a9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vR2VzY2h1ZXR6dGVfU2VpdGVfZWlucmljaHRlbi5wbmc) ### **Geschützte Seite einrichten** - Um eine Seite nur für eine bestimmte Benutzergruppe zugänglich zu machen, müssen Sie diese im Frontend schützen. - Hierfür gehen Sie in den *Seiteneigenschaften* der Seite auf den Reiter **Zugriff**. Unter v*erfügbare Objekte* wählen Sie die gewünschte Benutzergruppe aus, sodass sie bei den *ausgewählten Objekten* erscheint. Das Objekt "Anzeigen, wenn angemeldet" schließt alle Benutzergruppen ein. - **Speichern** Sie die Einstellungen. --- [ ![](https://www.toujou.de/_assets/processed/B6SUd4VJmvrtzA9QW7cA0r4AHTELCnZKbb4oOWnXy_I/q:85/w:433/h:244/fn:Y3NtX0dlc2NodWV0enRlc19JbmhhbHRzZWxlbWVudF9laW5yaWNodGVuX2U2N2RlMmJlZjM:t/cb:e1916ce9308aaf36a7d5f73b1f7b1f6d64b6bf66/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vR2VzY2h1ZXR6dGVzX0luaGFsdHNlbGVtZW50X2VpbnJpY2h0ZW4ucG5n) ](https://www.toujou.de/_assets/processed/liyYR-1JIQn5eHWTDtU_4ts1_oPHmPhua8Biety1DNg/q:85/w:1024/h:576/fn:Y3NtX0dlc2NodWV0enRlc19JbmhhbHRzZWxlbWVudF9laW5yaWNodGVuXzgwZjg5YmEwM2Y:t/cb:e1916ce9308aaf36a7d5f73b1f7b1f6d64b6bf66/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvRnJvbnRlbmRfTG9naW4vR2VzY2h1ZXR6dGVzX0luaGFsdHNlbGVtZW50X2VpbnJpY2h0ZW4ucG5n) ### **Geschütztes Inhaltselement einrichten** - In toujou können Sie nicht nur eine Seite mit einer Zugangsbeschränkung versehen. Auch einzelne Inhaltselemente auf einer Seite lassen sich verbergen. - Klicken Sie auf den **Bearbeiten-Knopf** (Stift-Icon) des jeweiligen Elements und stellen Sie unter dem Reiter **Zugriff** die Beschränkung ein, indem Sie unter *Verfügbare Objekte* die entsprechende Benutzergruppe wählen. - **Speichern** Sie die Einstellungen. --- Video-Tutorial via jweiland.net ------------------------------- Um externe HTML-Inhalte anzuzeigen, benötigen wir Ihre Einwilligung. Weitere Informationen finden Sie in unserer [ Datenschutzerklärung. ](https://www.toujou.de/datenschutz/) Einmal erlauben Immer erlauben ### Anlegen von Benutzergruppen Vom Erstellen der Website-Benutzergruppen bis zum Anlegen des Anmeldeformulars: Mit diesem Video gelingen die ersten Schritte. **Laufzeit**: 6'44" [Video bei YouTube aufrufen ↗](https://www.youtube.com/watch?v=uGhVVhRR4Ew&t=229s) Um externe HTML-Inhalte anzuzeigen, benötigen wir Ihre Einwilligung. Weitere Informationen finden Sie in unserer [ Datenschutzerklärung. ](https://www.toujou.de/datenschutz/) Einmal erlauben Immer erlauben ### Geschützte Seiten erstellen Hier erfahren Sie, wie Sie die geschützte Seiten und Inhaltselemente erstellen und Zugriffsrechte vergeben. **Laufzeit**: 12'11" [Video bei YouTube aufrufen ↗](https://www.youtube.com/watch?v=uGhVVhRR4Ew&t=229s) --- Hinweise, Tipp & Tricks --------------------------- **Wer TYPO3 kennt, weiß, dass viele Wege nach Rom führen. toujou ist TYPO3. Wir weisen Sie an dieser Stelle auf wichtige Informationen und den einen oder anderen Kniff hin, den Sie bei der Erstellung und Bearbeitung Ihrer Website beachten sollten.** Die Zugriffsbeschränkung im Frontend ist auch für ganze Seitenbäume möglich. Klicken Sie hierfür auf der Überseite unter Seiteneigenschaften auf den Reiter Zugriff und aktivieren Sie den Regler "Auf Unterseiten ausdehnen". Um mehrere Unterseiten auf einmal zu erstellen, wählen Sie per rechten Mausklick die entsprechende Überseite an und anschließend "Weitere Optionen" sowie "Mehrere Seiten erzeugen". In toujou können Sie dem Website-Benutzer mehr Individualität verleihen. Denn neben der obligatorischen Vergabe von User-Namen und Passwort können Sie unter dem Reiter Persönliche Daten Vor- und Nachname, Adresse und Telefonnummer hinzufügen. Im Reiter Plug-In und Meldungen können Sie persönliche Begrüßungen und Meldungen für die einzelnen Anmelde-Optionen hinterlegen. --- Verknüpfte Elemente ------------------- Elemente aus der [toujou-Elementbibliothek](https://www.toujou.de/service/elementbibliothek/), die mit diesen Einstellungen in Verbindung stehen. [Alle Elemente im Überblick](https://www.toujou.de/service/elementbibliothek/#c1001362) [Alle Tutorials im Überblick](https://www.toujou.de/tutorials/#c1001602) --- [ ![Website-Vorlagen für verschiedene Branchen](https://www.toujou.de/_assets/processed/jkDyPijbF4gDmMkzxd3MPG8oBAfAyHQ4LoqjH-ZHv8c/q:85/c:2754:1700:fp:0.5:0.5/rt:force/w:608/h:375/fn:Y3NtX1RlbXBsYXRlX092ZXJ2aWV3X25ldV8yMDIyXzllZGJiN2UwMDk:t/cb:b62d1a62d7fcde2e49e32c2d4fdb8799c6326f5a/bG9jYWw6L2ZpbGVhZG1pbi9UZW1wbGF0ZV9PdmVydmlld19uZXVfMjAyMi5wbmc) ](https://www.toujou.de/typo3-demo/#c1006221) Schnell gestalten und bequem verwalten -------------------------------------- Testen Sie in einer kostenlosen und unverbindlichen Demo alle Möglichkeiten mit toujou. Wählen Sie aus zahlreichen [Website-Vorlagen](https://www.toujou.de/templates/#c1009307) für unterschiedliche Branchen oder erstellen Sie Ihre professionelle Firmenwebsite von Grund auf selbst. [Direkt loslegen](https://www.toujou.de/typo3-demo/#c1006221) ##### toujou-Tutorials [Checkliste ❯](https://www.toujou.de/service/#c1001893) [Kontakt/Daten hinterlegen ❯ ](https://www.toujou.de/tutorials/kontakte-anlegen/) [Dateiliste / Fileadmin ❯ ](https://www.toujou.de/tutorials/dateiliste/) [Navigation bearbeiten ❯ ](https://www.toujou.de/tutorials/seiten-anlegen/) [Seiteninhalte ❯](https://www.toujou.de/tutorials/seiteninhalte/) [Seiteneigenschaften ❯](https://www.toujou.de/tutorials/seiteneigenschaften/) [Responsive-Check ❯](https://www.toujou.de/tutorials/responsive-mobile-first/) [Yoast SEO ❯](https://www.toujou.de/tutorials/yoast-seo/) [Redirects ❯](https://www.toujou.de/tutorials/redirects/) / [Blog ❯](https://www.toujou.de/tutorials/blog-administration/) [Seiten übersetzen ❯](https://www.toujou.de/tutorials/seiten-uebersetzen/) [Linkvalidator ❯](https://www.toujou.de/tutorials/linkvalidator/) ##### toujou-Setup [Theme ❯ ](https://www.toujou.de/service/toujou-setup/theme-bearbeiten/) [Logo ❯ ](https://www.toujou.de/service/toujou-setup/logo-hochladen/) [Font ❯ ](https://www.toujou.de/service/toujou-setup/font-bestimmen/) [Color ❯ ](https://www.toujou.de/service/toujou-setup/farben-festlegen/) [Social Media ❯ ](https://www.toujou.de/service/toujou-setup/social-media/) [Analytics ❯](https://www.toujou.de/service/toujou-setup/analytics/) [Data Protection ❯](https://www.toujou.de/service/toujou-setup/datenschutz/) [Website Overlay ❯](https://www.toujou.de/service/toujou-setup/website-overlay/) ##### toujou-Elementbibliothek [Texte ❯ ](https://www.toujou.de/service/elementbibliothek/text-elements/) [Medien ❯ ](https://www.toujou.de/service/elementbibliothek/media-elements/) [Combinations❯ ](https://www.toujou.de/service/elementbibliothek/combined-elements/) [Teaser ❯ ](https://www.toujou.de/service/elementbibliothek/teaser-elements/) [Cards ❯](https://www.toujou.de/service/elementbibliothek/card-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/elementbibliothek/blockquote-elements/) [Collections ❯](https://www.toujou.de/service/elementbibliothek/collections/) [Maps ❯ / ](https://www.toujou.de/service/elementbibliothek/map-elements/)[Blog ❯ ](https://www.toujou.de/service/elementbibliothek/blog-elements/) [Events ❯ ](https://www.toujou.de/service/elementbibliothek/events/)/ [Widgets ❯ ](https://www.toujou.de/service/elementbibliothek/widgets/) [Navigation ❯](https://www.toujou.de/service/elementbibliothek/navigation-elements/) [HTML ❯ ](https://www.toujou.de/service/elementbibliothek/html/)/ [Forms ❯ ](https://www.toujou.de/service/elementbibliothek/forms/) ##### toujou TOURISM [tourism-Modul ❯](https://www.toujou.de/tutorials/tourism-modul/) [Expertise & Konzept ❯](https://www.toujou.de/websites/websites-fuer-reiseveranstalter/) [Alle Features ❯](https://www.toujou.de/loesungen/etourism/) [toujou-Reiseportale ❯](https://www.toujou.de/warum-toujou/unsere-kunden/#c1002004) [Reiseseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisen-anlegen/) [Reiseseiteneigenschaften ❯](https://www.toujou.de/tutorials/reiseseiten/reiseseiteneigenschaften/) [Reisekategorien ❯](https://www.toujou.de/tutorials/reiseseiten/reisekategorien-anlegen/) [Termine & Preise ❯](https://www.toujou.de/tutorials/reiseseiten/termine-preise/) [Reisesuchseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisesuchseite/) [Trip Elements ❯ ](https://www.toujou.de/service/elementbibliothek/trip-elements/) [Search Elements ❯](https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/)