| ... |
... |
@@ -1,210 +1,0 @@ |
| 1 |
|
-Für Verwendung des Datenbank-Authentikators ist mindestens die {{formcycle/}}-Version {{version major="7" minor="4" patch="0"/}} nötig. |
| 2 |
|
- |
| 3 |
|
-{{content/}} |
| 4 |
|
- |
| 5 |
|
- |
| 6 |
|
-Das kostenpflichtige //Datenbank-Authentikator-Plugin// stellt eine Möglichkeit zur Verfügung eine Anmeldung an einem Formular in Form einer Datenbank-Abfrage durchzuführen. Hierbei kann eine HTML-Seite inkl. Validatoren, Fehlertexten und die eigentliche Anbindung der Datenbank individualisiert werden. Nach dem Absenden der HTML-Seite werden für die Anmeldung die Eingaben der Login-Seite als Platzhalter für die Datenbank-Abfrage bereitgestellt. Auch steht die Möglichkeit zur Verfügung, bei nicht gefundenem Datensatz den "Login" dennoch zu erlauben. Hierbei stehen im Formular dann ausschließlich die Daten aus der Login-Seite zur Verfügung. Ferner ist es möglich eine Login-Sperre zu definieren, welche bei mehrfacher Fehlereingabe den Login anhand eines der Eingabefelder temporär sperrt. |
| 7 |
|
- |
| 8 |
|
- |
| 9 |
|
-== Konfiguration == |
| 10 |
|
- |
| 11 |
|
-=== Anmeldeseite === |
| 12 |
|
- |
| 13 |
|
-{{figure image="Login_de.png"}} |
| 14 |
|
-Konfiguration der Login-Seite |
| 15 |
|
-{{/figure}} |
| 16 |
|
- |
| 17 |
|
-; Seitentitel |
| 18 |
|
-: Gibt den HTML-Title an. Es steht die Verwendung von i18n-Variablen zur Verfügung. |
| 19 |
|
- |
| 20 |
|
-; Seiteninhalt |
| 21 |
|
-: Hier kann der HTML-Inhalt der eigentlichen Login-Seite gepflegt werden. Dieser wird beim Ausliefern automatisch in einen HTML-Rahmen und innerhalb eines FORM-Elements gerendert. Hierbei ist zu beachten, dass alle Eingabefelder welche innerhalb der Datenbank-Abfrage verwendet werden sollen ein name-Attribute besitzen um diese mittels Platzhalter referenzieren zu können. Weiterführende Hilfen finden Sie im Kapitel "Konfigurationsmöglichkeiten der Login-Seite". |
| 22 |
|
- |
| 23 |
|
-; Fehlermeldung bei nicht gefundenem Datensatz |
| 24 |
|
-: Ermöglicht die Änderung der Fehlermeldung, wenn bei der Datenbank-Abfrage kein Datensatz gefunden wurde. Es steht die Verwendung von i18n-Variablen zur Verfügung. |
| 25 |
|
- |
| 26 |
|
-; Fehlermeldung bei gesperrtem Login |
| 27 |
|
-: Ermöglicht die Änderung der Fehlermeldung, wenn der Login temporär gesperrt wurde. Es steht die Verwendung von i18n-Variablen zur Verfügung. Ferner wird das Datum, bis wann der Login gesperrt wurde als Variable zur Verfügung gestellt und kann über die [[Java-Message-Formatierung>>https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/text/MessageFormat.html]] eingefügt und in dessen Ausgabeformat angepasst werden. |
| 28 |
|
- |
| 29 |
|
-=== Datenbank === |
| 30 |
|
- |
| 31 |
|
-{{figure image="DB_de.png"}} |
| 32 |
|
-Konfiguration der Datenbank-Anbindung inkl. Abfrage |
| 33 |
|
-{{/figure}} |
| 34 |
|
- |
| 35 |
|
- |
| 36 |
|
-; JDBC URL |
| 37 |
|
-: Definiert die JDBC URL der anzubindenden Datenbank |
| 38 |
|
- |
| 39 |
|
-; Benutzername |
| 40 |
|
-: Definiert den Benutzernamen für den Login an der Datenbank |
| 41 |
|
- |
| 42 |
|
-; Passwort |
| 43 |
|
-: Definiert das Passwort für den Login an der Datenbank |
| 44 |
|
- |
| 45 |
|
-; Datenbank-Abfrage |
| 46 |
|
-: Definiert die eigentliche Datenbank-Abfrage zur Ermittlung eines Datensatzes basierend auf den Eingaben der Login-Seite. Diese Eingaben stehen über Platzhalter in Form von {{code language="none"}}[%<html-name-attribute>%]{{/code}} zur Verfügung. Sobald eine Datenbank-Zeile bei von dieser Abfrage zurückgegeben wird, gilt der Login als erfolgreich. |
| 47 |
|
- |
| 48 |
|
-; Erlaube Login ohne gefundenen Datenbank-Eintrag |
| 49 |
|
-: Ist diese Option aktiv wird der Login auch ohne gefundenen Datenbank-Eintrag erlaubt. Hierbei stehen ausschließlich lediglich die Daten der Login-Seite als Benuterattribute zur Verfügung. |
| 50 |
|
- |
| 51 |
|
-=== Login-Sperre === |
| 52 |
|
- |
| 53 |
|
-{{figure image="Lock_de.png"}} |
| 54 |
|
-Konfiguration der Login-Sperre |
| 55 |
|
-{{/figure}} |
| 56 |
|
- |
| 57 |
|
-; Eingabe-Feld für die Sperr-Identifikation |
| 58 |
|
-: Definiert den Namen des HTML-Feldes, welches für die Prüfung der Login-Sperre herangezogen wird. Hierbei werden die fehlgeschlagenen Login-Versuche mit dem Wert dieses Feldes gespeichert und bei Überschreiten einer definierten Anzahl ein Login mit diesem temporär verhindert. |
| 59 |
|
- |
| 60 |
|
-; Maximale Login-Versuche |
| 61 |
|
-: Definiert nach wie vielen fehlerhaften Login-Versuchen mit dem selben Wert dieser temporär gesperrt werden soll. |
| 62 |
|
- |
| 63 |
|
-; Sperrdauer (in Minuten) |
| 64 |
|
-: Definiert die Dauer der temporären Login-Sperre |
| 65 |
|
- |
| 66 |
|
-; Eingaben beim Auftreten der Login-Sperre deaktivieren |
| 67 |
|
-: Ist diese Option aktiviert werden alle Eingabefelder der Login-Seite beim Eintreten der Login-Sperre deaktiviert. Hierbei sind dann keine weiteren Eingaben mehr möglich. |
| 68 |
|
- |
| 69 |
|
-=== Zuordnung von Benutzerattributen === |
| 70 |
|
- |
| 71 |
|
-{{figure image="Attributes_de.png"}} |
| 72 |
|
-Zuordnung der Benutzer-Attribute |
| 73 |
|
-{{/figure}} |
| 74 |
|
- |
| 75 |
|
-In dieser Liste wird die Zuordnung der ermittelten Werte zu den Stanard-Benutzerattributen angeboten. Hierbei können sowohl die Werte der Datenbank-Abfrage in Form der Spalten-Namen als auch die Werte der Login-Seite in Form der name-Attribute verwendet werden. Überschneiden sich diese Namen wird der Wert der Datenbank-Abfrage bevorzugt. |
| 76 |
|
- |
| 77 |
|
-== Konfigurationsmöglichkeiten der Login-Seite == |
| 78 |
|
- |
| 79 |
|
-Für die Konfiguration der Login-Seite stehen neben den Standards HTML, JavaScript und CSS auch weitere Möglichkeiten zur Verfügung. So wird hier unter anderem die Bibliothek [[jQuery>>https://jquery.com/]] angeboten. Zu beachten ist, dass die Login-Seite für das Absenden einen submit-Button benötigt und ein Container mit der id "error" für die Anzeige von Fehlernachrichten bei nicht erfolgreichem Login angedacht ist. |
| 80 |
|
- |
| 81 |
|
-=== Validierung === |
| 82 |
|
- |
| 83 |
|
-Für eine Client-seitige Validierung der Eingaben wird standardmäßig die Bibliothek [[Parsley.js>>https://parsleyjs.org]] eingebunden. Dies ermöglicht es mittels Attributen an den Eingabefeldern z.B. deren Ausfüllung zu verpflichten oder auch ein bestimmtes Format zu erzwingt. Hierbei wird der Absende-Button erst bei erfolgreicher Validierung aller Eingabe-Elemente aktiviert. Eine weiterführende Liste der Möglichkeiten von Parsley.js finden Sie in der entsprechenden [[Dokumentation>>https://parsleyjs.org/doc/index.html]]. |
| 84 |
|
- |
| 85 |
|
-=== Weiter Attribute === |
| 86 |
|
- |
| 87 |
|
-{{figure image="PW_hidden.png"}} |
| 88 |
|
-Passwortfeld mit Anzeige-Option |
| 89 |
|
-{{/figure}} |
| 90 |
|
- |
| 91 |
|
- |
| 92 |
|
-{{figure image="PW_show.png"}} |
| 93 |
|
-Sichtbares Passwort |
| 94 |
|
-{{/figure}} |
| 95 |
|
- |
| 96 |
|
-Zusätzlich zu der Definition der Validierung stehen noch folgende Plugin-spezifische HTML-Attribute zur Verfügung: |
| 97 |
|
- |
| 98 |
|
-; data-keep-enabled |
| 99 |
|
-: Verhindert das Deaktivieren des Absende-Knopfs bei nicht validen Eingaben und das Deaktivieren einzelner Eingabefeldern bei Auftreten der Login-Sperre. |
| 100 |
|
- |
| 101 |
|
-; data-show-type |
| 102 |
|
-: Ermöglicht es an einem Passwort-Feld einen Input-Typen zu definieren zu welchem mittels eines Auge-Symbols umgeschaltet werden kann. Dies ermöglicht es zu einer lesbaren Darstellungsform der Eingabe umzuschalten. |
| 103 |
|
-: |
| 104 |
|
-; data-custom-tooltip |
| 105 |
|
-: Ermöglicht die Angabe der ID eines HTML-Containers dessen Inhalt als Tooltip für Element mit diesem Attribut verwendet wird. |
| 106 |
|
- |
| 107 |
|
-=== Styling (CSS) === |
| 108 |
|
- |
| 109 |
|
-Das Plugin liefert für das Styling der Login-Seite bereits Standard-Definitionen für das Layout sowie für Eingabe-Elemente, den Login-Button und Fehleranzeigen aus. Diese können innerhalb der Konfiguration der Login-Seite in einem HTML-style-Tag nach Bedarf überschrieben werden. Innerhalb des HTMLs stehen ferner folgende Klassen zur Verfügung: |
| 110 |
|
- |
| 111 |
|
-; heading |
| 112 |
|
-: Definiert einen DIV-Container für die Verwendung als Oberüberschrift. |
| 113 |
|
- |
| 114 |
|
-; row |
| 115 |
|
-: Definiert einen DIV-Container als einzelne Zeile der Login-Seite. Dies ist als Container für das Label, die Beschreibung und den Fehlertext zu einem ebenfalls enthaltenen Eingabefeld vorgesehen. |
| 116 |
|
- |
| 117 |
|
-; desc |
| 118 |
|
-: Definiert einen DIV-Container innerhalb einer Zeile als Beschreibung. |
| 119 |
|
- |
| 120 |
|
-; errors |
| 121 |
|
-: Definiert einen DIV-Container für die Anzeige von Fehlern. |
| 122 |
|
- |
| 123 |
|
-=== Internationalisierung === |
| 124 |
|
- |
| 125 |
|
-In der Konfiguration des Seitentitels, des Seiteninhalts sowie in den Fehlermeldungen können die Mandant-spezifischen I18N-Variablen verwendet werden. Diese sind in Form des Platzhalters {{code language="none"}}[%I18N.<Wert>%]{{/code}} anzugeben und werden entsprechend der Aufruf-Sprache des Formulars ersetzt. Die Pflege dieser Variablen finden Sie [[hier>>Formcycle.UserInterface.FilesAndTemplates.I18nVariables]]. |
| 126 |
|
- |
| 127 |
|
-=== Beispiel-HTML === |
| 128 |
|
- |
| 129 |
|
-{{code language="html"}} |
| 130 |
|
-<script> |
| 131 |
|
- <!-- Setzt das maximal auswählbare Daten des Feldes 'GebDatum' auf das aktuelle Daten --> |
| 132 |
|
- $(document).ready(function() { |
| 133 |
|
- $('#GebDatum').prop('max', new Date().toLocaleDateString('fr-ca')); |
| 134 |
|
- }); |
| 135 |
|
-</script> |
| 136 |
|
- |
| 137 |
|
-<!-- Definition eines Headers inkl. einer Grafik --> |
| 138 |
|
-<header> |
| 139 |
|
- <img alt="XIMA" src="https://www.xima.de/typo3conf/ext/xima_sitepackage/Resources/Public/icons/logo.svg" style="height: 30px;" /> |
| 140 |
|
-</header> |
| 141 |
|
- |
| 142 |
|
-<!-- Definition einer Oberüberschrift --> |
| 143 |
|
-<div class="heading"> |
| 144 |
|
- <h2>Anmeldung</h2> |
| 145 |
|
- <div>Um sich zu authentifizieren, geben Sie bitte folgende Daten ein:</div> |
| 146 |
|
-</div> |
| 147 |
|
- |
| 148 |
|
-<!-- Definition einer Eingabe-Zeile inkl. Label, Beschreibung und des Containers für Fehlermeldungen --> |
| 149 |
|
-<div class="row"> |
| 150 |
|
- |
| 151 |
|
- <!-- Verwendung von I18N-Variablen --> |
| 152 |
|
- <label for="KNr">[%I18N.customerNr%]</label> |
| 153 |
|
- <div class="desc">[%I18N.customerNr.desc%]</div> |
| 154 |
|
- |
| 155 |
|
- <!-- Definition des Eingabe-Elements als Passwort-Feld inkl. Validierung auf Ausfüllung, Länge und gegen ein definiertes Pattern. --> |
| 156 |
|
- <!-- Ebenso wird die Anzeige des Passworts als Text ermöglicht. Ferner wird der Container für etwaige Validierungsfehler angegeben und ein automatisches Ausfüllen durch den Browser deaktiviert. --> |
| 157 |
|
- <input autocomplete="new-password" data-parsley-errors-container="#KNrErrors" data-show-type="text" id="KNr" maxlength="10" minlength="10" name="KNr" pattern="[A-Z][0-9]{9}" required="" type="password" /> |
| 158 |
|
- <div id="KNrErrors"></div> |
| 159 |
|
-</div> |
| 160 |
|
- |
| 161 |
|
-<div class="row"> |
| 162 |
|
- <label for="GebDatum">Geburtsdatum</label> |
| 163 |
|
- <div class="desc">Bitte geben Sie Ihr Geburtsdatum im Format TT.MM.JJJJ ein.</div> |
| 164 |
|
- <input autocomplete="new-password" data-parsley-errors-container="#GebDatumErrors" id="GebDatum" name="GebDatum" placeholder="TT.MM.JJJJ" required="" type="date" /> |
| 165 |
|
- <div id="GebDatumErrors"></div> |
| 166 |
|
-</div> |
| 167 |
|
- |
| 168 |
|
-<div class="row"> |
| 169 |
|
- <label for="EMail">E-Mail-Adresse</label> |
| 170 |
|
- <div class="desc">Geben Sie hier Ihre E-Mail-Adresse passend zu Ihren Vertragsdaten ein.</div> |
| 171 |
|
- <input autocomplete="new-password" data-parsley-errors-container="#EMailErrors" id="EMail" required="" type="email" /> |
| 172 |
|
- <div id="EMailErrors"></div> |
| 173 |
|
-</div> |
| 174 |
|
- |
| 175 |
|
-<!-- Definition des Containers für Fehlermeldungen bei nicht erfolgreichem Login --> |
| 176 |
|
-<div class="errors" id="errors"></div> |
| 177 |
|
- |
| 178 |
|
-<div class="row"> |
| 179 |
|
- <!-- Definition des Absende-Buttons --> |
| 180 |
|
- <input type="submit" value="Anmelden" /> |
| 181 |
|
-</div> |
| 182 |
|
- |
| 183 |
|
-<!-- Definition einer Footers --> |
| 184 |
|
-<footer> |
| 185 |
|
- <div style="display: inline-block;"> |
| 186 |
|
- <a href="https://www.xima.de/" target="_blank">XIMA</a> |
| 187 |
|
- </div> |
| 188 |
|
-</footer> |
| 189 |
|
-{{/code}} |
| 190 |
|
- |
| 191 |
|
- |
| 192 |
|
-== Versionshistorie == |
| 193 |
|
- |
| 194 |
|
-=== 1.1.0 === |
| 195 |
|
- |
| 196 |
|
-* Standard-Validierungs-Events (Parsley) vom Formular entfernt. Diese können damit flexiebler am eigentlichen HTML-Element hinterlegt werden. |
| 197 |
|
-* Tippy.js für Tooltips hinzugefügt |
| 198 |
|
-* Eingbau eines Mechanismuses der automatisch Tooltips für Elemente erzeugt. |
| 199 |
|
-* JavaScript-Callback für das Ausführen von Script vor dem internen hinzugefügt (preInitLoginPage()) |
| 200 |
|
-* Kleinere Anpassungen am Internationalisierungs-Mechanismus |
| 201 |
|
-* Kleinere CSS Anpassungen |
| 202 |
|
- |
| 203 |
|
-=== 1.0.1 === |
| 204 |
|
- |
| 205 |
|
-* Anpassung an der Übergabe der verwendeten Formular-Sprache innerhalb des Authentifikators |
| 206 |
|
-* Unterstützung von Mandant-spezifischen Platzhaltern innerhalb der Konfiguration der Login-Seite erweitert |
| 207 |
|
- |
| 208 |
|
-=== 1.0.0 === |
| 209 |
|
- |
| 210 |
|
-* Initialer Release |
