| ... |
... |
@@ -1,0 +1,210 @@ |
|
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 |
