In WordPress mit Plugins einen geschützten Kundenbereich anlegen (Part 1)
In diesem Tutorial wird geschildert, wie man mit frei verfügbaren WordPress Plugins für eine beliebige Seite einen geschützten Kundenbereich anlegen kann.
Benötigte WordPress Plugins
Folgende Plugins installieren:
Hinweis zu den Versionsnummern
Dieses Tutorial basiert auf einem Projekt, das mit folgenden Versionsnummern durchgeführt wurde
- WordPress 3.9.3
- Cimy User Extra Fields 2.6.2
- Confirm User Registration 2.1.5
- Groups 1.4.12
- Customer Area 5.0.7
- Sideways8 Custom Login & Registration 0.8.7
Da zum Teil in den Source Code einiger Plugins eingegriffen wurde, empfiehlt es sich, die WordPress Update-Hinweise und WordPress Auto-Updates zu deaktivieren, da die Änderungen sonst ggf. überschrieben werden.
Hierfür eignet sich z.B. das WP Plugin Disable All WordPress Updates
Anforderungen an Kundenbereich
Der Kundenbereich soll ein (passwort)geschützter Bereich sein, in dem registrierte Benutzer der Webseite Zugriff auf persönlich Dokumente haben, denkbar sind da im Allgemeinen z.B. Rechnungen, Tabellen, oder Dateien beliebiger Art, Briefwechsel, Rundschreiben oder dergleichen. Man könnte hier auch speziellen Content bereitstellen, der über das Internet aber eben nicht jedem zugänglich ist, sondern nur autorisierten Usern nach erfolgreichem Login.
Weiterhin soll der registriert Benutzer nur Zugriff auf den geschützten Frontend Bereich haben, nicht aber auf das Backend des verwendeten Content Management Systems, in diesem Fall WordPress.
Als Bausteine wurden vier WordPress Plugins kombiniert, die die benötigte Funktionalität im Wesentlichen bereitstellen. Ggf. gib es auch komplexere kommerzielle Plugins, die deutlich mehr können, in diesem Falle aber nur einen gewissen Overhead an nicht benötigter Funktionalität mitbringen würden – und natürlich Geld kosten.
Um die Registrierung und Login möglichst elegant in das Frontend einzubinden, wird ein Plugin benötigt, das die Anmeldung über ein Widget – einbettbar in Sidebar oder footer – oder über eine separat designte Seite, statt über die WordPress Standard Login Maske unter /wp-admin/ bzw. /wp-login.php ermöglicht.
Nach mehreren Plugin Tests fiel die Wahl hier auf das Sideways 8 Custom Login & Registration Plugin.
S8 Login & Registration
Das Setup ist recht einfach: Plugin installieren, aktivieren und im Dashboard unter „Einstellungen“->“S8 Login & Registration“ auf Settings und für jede der relevanten Arten von Eingabefenstern wie Login, Registrierung, Passwort vergessen, Passwort zurücksetzen und Redirect einstellen.
General Options
Unter „General Options“ gibt es die Einstellmöglichkeit für das zu verwendende Template des Themes sowie eine Checkbox, ob man die Standard WordPress Formulare und Links verwenden will. Dies ist durchaus wichtig während der Testphase, sollte aber letzten Endes nicht ausgewählt werden, da der Sinn des Plugins ja ist, ein Kundenlogin (und Registrierung) über das Frontend mit entsprechend nahtlosem Design zu ermöglichen.
Weiterhin ist es wichtig zu wissen, das der Login für Administratoren, Editoren oder weitere Benutzer des Webseiten-Betreibers mit entsprechenden User-Roles dann ebenfalls über die neu gestaltete Login Page bzw. ein Login Widget über das Frontend läuft. Das heißt, das S8 Custom Login & Registration Plugin ersetzt den klassischen Login, es läuft nicht parallel.
„Login Page Options“ und andere tabs
Unter den tabs „Login Page Options“, „Registration Page Options“, „Forgot Password Page Options“, „Reset Password Page Options“ kann man mit ein paar wenigen Shortcodes alles nötige einstellen:
- %FORM% = Shows the appropriate form. If not included, form appears below the content.
- %REGISTER_URL% = URL of the register page NOTE: Users must be allowed to register for this to work!
- %REGISTER_LINK% = Link to the register page NOTE: Users must be allowed to register for this to work!
- %LOGIN_URL% = URL of the login page
- %LOGIN_LINK% = Link to the login page
- %FORGOT_PASSWORD_URL% = URL of the forgot password page
- %FORGOT_PASSWORD_LINK% = Link to the forgot password page
Man kann natürlich die Seite nach Belieben gestalten und mit Text, Bildern oder sonstigem Content oder weiteren Shortcodes versehen, wie jede andere WordPress Seite auch.
Ein einfaches Beispiel, das alles nötige beinhaltet:
User Redirect Options
Durchaus wichtig im weiteren Verlauf ist der Registerreiter „User Redirect Options“. Hier lässt sich einstellen, ob ein Benutzer mit einer bestimmten User-Role nach dem Login umgeleitet werden soll. Sinn macht es, Kunden, denen hier die Rolle eines Abonennten (Subscriber) zugewiesen wird, direkt in den Kundenbereich (hier unter der Seite „Kundenbereich“, defaultmäßig „Customer-Area“) umzuleiten, während Administratoren, etc. in das WordPress Backend (Dashboard) umgeleitet werden sollen. Der Kunde, der sich selbst registriert soll ja das Backend von WordPress gar nicht sehen, bzw. aufrufen können.
Falls nach einem Umzug Probleme beim Anmelden auftreten
Achtung: Für eine Migration einer Seite, z.B. von einer lokalen Testumgebung auf einen Webserver oder beim Ändern des Installationsverzeichnisses, empfiehlt es sich, vorher unter „General Options“ die Verwendung der Standard WP Forms zu aktivieren, bzw. das S8 Plugin ganz zu deaktivieren. Sollte es trotzdem einmal dazu kommen, daß eine Anmeldung am CMS nicht mehr möglich ist (Ungültige Redirects, o.Ä.), kann man über FTP immer noch das Plugin im Ordner /wp-content/plugins/ umbenennen oder komplett löschen und nach erfolgreicher Anmeldung erneut installieren.
User Role für Kunden festlegen
Anlegen oder Import von Kunden
Eine Möglichkeit, festzulegen, wer den Kundenbereich nutzen kann, ist, die Benutzer von Hand im WordPress Dashboard unter „Benutzer“ anzulegen. Evtl. kann man dies über ein weiteres Plugin mit einer existierender Kundenliste automatisieren. Andernfalls müssten alle Benutzer einzeln angelegt werden.
Jeder kann sich registrieren
Im vorliegenden Fall soll der Kunde sich ja grundsätzlich selbst für den Kundenbereich registrieren können. Hierfür ist es wichtig, unter „Einstellungen“->“Allgemein“ unter „Mitgliedschaft“ das Häkchen zu setzen bei „Jeder kann sich registrieren“ und die Standardrolle des neuen Benutzers auf „Abonnent“ bzw. „Subscriber“ setzen.
Wichtig: Man muss diese Einstellungen im Dashboard auch machen, damit der %REGISTER_LINK% in den Option Pages des Plugins in eine entsprechende URL umgewandelt wird. Also hier auch die Reihenfolge einhalten.
WordPress Backend und Toolbar vor Kunden verstecken
Um das Dashboard und die WP toolbar für Kunden mit der User Role „Abonnenten“ bzw. „Subscriber“ zu verstecken und unzugänglich machen, muss man in der datei functions.php des jeweilis verwendeten Themes im Ordner
/wp-content/themes/<verwendetes theme>/
folgenden code einbauen:
/**
* Disable admin bar on the frontend of your website
* for subscribers.
*/
function kundenbereich_disable_admin_bar() {
if( ! current_user_can('edit_posts') )
add_filter('show_admin_bar', '__return_false');
}
add_action( 'after_setup_theme', 'kundenbereich_disable_admin_bar' );
/**
* Redirect back to homepage (or Customer Area URL) and not allow access to
* WP admin for Subscribers.
*/
function kundenbereich_redirect_admin(){
if ( ! current_user_can( 'edit_posts' ) ){
wp_redirect( home_url() );
exit;
}
}
add_action( 'admin_init', 'kundenbereich_redirect_admin' );
Die Unterscheidung läuft hier über die WordPress Standard API Funktion current_user_can( 'edit_posts'), also ob der aktuelle Benutzer Beiträge bearbeiten kann. Da der Kunde mit der User Role „Abonennt“ (bzw Subscriber) per Definition dies nicht darf, sollte dies reichen. Man kann bei entsprechenden Anforderungen bestimmt andere Konstrukte finden, für den hier beschriebenen Anwendungsfall ist dies völlig ausreichend.
Hinweis: Um neue User Roles anzulegen, oder die vorhandenen Standard User Roles in ihren Berechtigungen feiner auf den Anwendungsfall einzustellen, empfiehlt sich ein Plugin wie „User Role Editor“
Confirm User Registration
Das Plugin einfach installieren und aktivieren, sonst ist nichts zu tun.
Sinn dieses Plugins ist es, daß neu angemeldet Benutzer erst von einem Administrator freigeschaltet werden müssen. Normalerweise vergibt WordPress, wenn die Eigenschaft „Jeder kann sich registrieren“ aktiviert ist, ein automatisch Passwort und schickt dies an die bei der Registrierung angegebene Email.
Da sich im vorliegenden Beispiel nur Kunden, also dem Betreiber der Website bekannte User registrieren sollen, ist dieses Plugin hier sinnvoll, um noch eine weitere Überprüfung der eingegebenen Kundendaten vorzunehmen.
Sinnvoll kann hier der Einbau von Extra-Feldern in die Registrierungsmaske sein, die es dem Betreiber ermöglichen, einen Datenabgleich vorzunehmen und den Zugang so manuell auf den Kundenbereich zu beschränken.
Das Plugin klinkt sich in die Benutzerverwaltung von WordPress ein und erzeugt einen Unterpunkt „Confirm User Registration“ unter „Benutzer“ im Dashboard. Etwas problematisch, zumindest nicht eindeutig, ist hier, daß neu registrierte, aber noch nicht freigeschaltete Benutzer sowohl in der Gesamtübersicht aller im System registrierten Benutzer auftauchen, wie auch in der eigenen Listenansicht für unbestätigte Anmeldungen unter „Confirm User Registration“.
Die Information zur Freischaltung wird WordPress-intern in einem Meta Feld gespeichert und mit etwas Programmieraufwand ließen sich unbestätigte Benutzer sicherlich noch aus der Gesamtansicht raushalten.
Freischalten neuer Kunden
Um neuregistrierte Kunden freizuschalten, muss ein Administrator oder zumindest ein User mit den entsprechenden Rechte unter „Confirm User Registration“ die entsprechenden Benutzer selektieren und im Select Menü Aktion wählen darüber auf Benutzer freischalten gehen.
Die Benutzer werden freigeschaltet und können sich jetzt im Kundenbereich anmelden. Sie werden hierüber in einer weiteren Email benachrichtigt.
Automatische Benachrichtigung über Freischaltung
Nachdem der neu registrierte Benutzer für den Kundenbereich freigeschaltet wurde, erhält er vom System eine weitere Mail mit dem frei wählbaren Betreff & Nachrichtentext
Freischaltung für den Kundenbereich: Ihr Dienstleister XY
Sie wurden für den Kundenbereich auf http://www.example.com freigeschaltet. Sie können sich jetzt anmelden unter http://www.example.com/kundenbereich/ Diese Nachricht wurde automatisch erstellt
Einstellungen
Im WP Dashboard findet man unter Benutzer -> Confirm User Registration unter dem Registerreiter Einstellungen die Konfiguration der Email Benachrichtigung wie auch der Fehlermeldung bei einem Loginversuch, falls der Benutzer noch nicht von einem Administratot freigegeben worden sein sollte.
WP Plugin Cimy User Extra Fields
Brauch man für das Registrierungs-Formular noch Eingabefelder für Zusatzinformationen, um den neuregistrierten Benutzer mit den Kundendaten abgleichen und verifizieren zu können, kann man dies prima mit dem WordPress Plugin Cimy User Extra Fields erledigen.
Einfach das Plugin installieren und aktivieren und dann die Plugin Einstellungen im Dashboard anpassen unter Einstellungen -> Cimy User Extra Fields.
Abschnitt Allgemein:
Hier kann man diverse Optionen wie „Show all fields in the welcome email“, „Enable email confirmation“ und „Enable form confirmation“ auswählen und obwohl es prima klingt, z.B. erst eine Confirmation Email mit Bestätigungs-Link zu verschicken, kann hier – bei exakt diesem Setup mit den ganzen Plugins für den Kundenbereich – nur dringend davon abgeraten werden, irgeneine dieser Checkboxen zu aktivieren. Wurde mehrfach getestet, hat aber reproduzierbar dazu geführt, daß es irgendwo gehakt hat.
Feld: „WordPress hidden fields“ (verborgene Felder)
Soll bei der Registrierung mehr eingegeben werden als nur User-Name und Email Adresse, so kann dies prima über Cimy User Extra Fields lösen. Bei WordPress hidden fields werden die Standardmäßig verfügbaren Attribute eines WordPress Benutzer Profils angezeigt. Man könnte hier z.B. zumindest Vorname und Nachname als Eingabefelder der Registrierungsmaske mit ausgeben lassen (einfach selektieren und Änderungen abspeichern) und kann weiter unten (unter WordPress Felder) auch noch festlegen, wie die Felder in der Registrierungsmaske zu verwenden sind
WordPress Felder
- Pflichtfelder: Checkbox „Kann leer sein“ deselktieren und speichern
- Bezeichnung / Label: der in der Registrierungsmaske als input field label angezeigte Text
- Zeige das Feld bei der Registrierung: Falls nicht selektiert, hier ein Häkchen machen
Benutzerdefinierte Felder
Will man bei der Registrierung beliebige weitere Daten abfragen (z.B. um einen Kunden zu verifizieren), kann man unter „Ein neues Feld hinzufügen“ beliebige Felder zu dem Benutzerprofil hinzufügen.
Denkbar wären z.B. dem Webseiten-Betreiber und Kunden bekannte Datensätze wie
- Telefon-Nr.
- Anschrift
- Kundennummer
- Auftragsnummer
- sonstiger Validierungscode (Gutschein, Bankdaten, o.Ä.)
- Bild
- ggf. freie Text Area für Grund der Anmeldung
Cimy User Extra Fields stellt hierfür unter Typ eine Reihe von Standard HTML input types zur Verfügung wie
- text
- textarea
- textarea-rich
- password
- checkbox
- radio
- dropdown
- dropdown-multi
- picture
- picture-url
- registration-date
- avatar
- file
- date
Auch hier ist darauf zu achten, ob dies ein Pflichtfeld sein soll (Checkbox: Kann leer sein) und ob es in der Registrierung angezeigt werden soll (default Einstellung).
Cimy User Extra Fields bietet darüber hinaus ein ganze Reihe von Validierungsmöglichkeiten und Abfrage, z.B. Case Sensitive, RegEx, Abgleich mit einem fixen Wert (EQUAL TO), min-, max- & exakte Länge
Hinweis: Sichtbarkeit der Extra Felder
Im vorliegenden Szenario war es lediglich relevant, bei der Registrierung eines Users / Kunden eine Art Validierung durch beidseitig gegebene und bekannte Extra-Information vorzunehmen.
Die Extra-Felder aus dem Cimy Plugin sind im beschriebenen Use Case NICHT sichtbar im Kundenbereich, wo der angemeldete Benutzer seine Account Details einsehen und auch verändern kann.
Mit ein wenig Programmieraufwand dürfte sich jedoch auch dies lösen lassen. Ein geeigneter Ansatzpunkt hierfür wäre die Klasse
/wp/wp-content/plugins/customer-area/includes/core-addons/user-profile/user-profile-addon.class.php
WordPress Plugin Customer Area
Das WordPress Plugin Customer Area zunächst einfach installieren und aktivieren.
Die hier benutzen Begriffskonventionen entspringen einer angepassten und erweiterten Übersetzung durch Localization des language files mit Poedit
Die *.po und *.mo language files können hier runtergeladen werden und gehören in den Folder /wp-content/plugins/customer-area/languages/
Anschließend müssen noch diverse Einstellungen konfiguriert werden. Hierzu im WP Dashboard auf Kundenbereich -> Einstellungen klicken.
Benutzerrechte:
- Allgemein: kann erstmal so bleiben, oder nur Administratoren alle Rechte einräumen (Editor uncheck)
- Private Seiten: Runterscrollen zu FrontEnd Bereich und in der Spalte „Subscribers“ ein Häckchen machen bei „View Private Pages“ (und Änderungen übernehmen)
- Private Dateien: Runterscrollen zu FrontEnd Bereich und in der Spalte „Subscribers“ ein Häckchen machen bei „View Private Files“ (und Änderungen übernehmen)
Seitenstruktur erzeugen
Unter dem Registerreiter Seitenstruktur ist die benötigte Seitenstruktur für den Kundenbereich bereits hinterlegt und kann auf Knopfdruck erzeugt werden. Man könnte diese Seiten auch einzeln anlegen, bzw. bereits existierende Seiten, die natürlich auch anders heißen dürfen über die Select Boxen aus dem WordPress Seitenverzeichnis auswählen.
Der Einfachheit halber nimmt man hier: Automatisch Generieren und später evtl. umbenennen
Knopfdruck auf „Create Missing Pages“ -> Seitenstruktur wird erstellt -> Einzelne Seiten ggf. umbenennen
Folgende Struktur passt auf Deutsch meist ganz gut
-Kundenbereich
–Übersicht
–Dateien
—Meine Dateien
–Seiten
—Meine Seiten
–Mein Konto
—Kontodetails
—Konto bearbeiten
–Abmelden
Menu im Kundenbereich
Der Kundenbereich verfügt über ein eigenes Untermenu, was sich über die Standard WordPress Menü Seite unter Dashboard -> Design -> Menüs beliebig modifizieren lässt.
Wichtig: Ändert man an der Seitenstruktur des Kundenbereiches etwas, muss man das Menü nochmal neu erzeugen, bzw. unter Design -> Menüs nochmal anpassen, da das nicht automatisch nachgezogen wird.
Automatisches Erzeugen des Menüs unter Dashboard -> Kundenbereich -> Einstellungen -> Frontend im Abschnitt Haupt Navigations-Menü bei Klick auf den Button Menü neu erzeugen.
