Wiki source code of Datenbank-Authentifikator

Show last authors
1 At least {{formcycle/}} version {{version major="7" minor="4" patch="0"/}} is required to use the database authenticator.
2
3 {{content/}}
4
5 The paid //Database-Authentikator-Plugin// provides a possibility to perform a login to a form via a database query. Here, an HTML page incl. validators, error texts and the actual connection to the database can be specified. After sending the HTML page, the input of the login page is provided as a placeholder for the database query. There is also the possibility to allow the "login" nevertheless if a database record is not found. In this case, only the data from the login page is available in the form. Furthermore, it is possible to define a login lock, which temporarily blocks the login based on one of the input fields when multiple incorrect attempts are made.
6
7
8 == Configuration ==
9
10 === Login page ===
11
12 {{figure image="Login_en.png"}}
13 Login page configuration
14 {{/figure}}
15
16 ; Page title
17 : Specifies the HTML title. The use of i18n variables is possible.
18
19 ; Page body
20 : The HTML content of the actual login page can be maintained here. This content is automatically rendered in an HTML body and within a FORM element when the page is delivered. It should be noted that all input fields that should be used within the database query have to have a name attribute in order to be able to reference them using placeholders. Further help can be found in the chapter "Configuration options of the login page".
21
22 ; Error message if no record is found
23 : Allows to change the error message if no record was found during the database query. The use of i18n variables is possible.
24
25 ; Error message when login is locked
26 : Allows to change the error message when the login has been temporarily locked. The use of i18n variables is possible. Furthermore, the date until the login is locked is provided as a variable and can be inserted via [[Java message formatting>>https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/text/MessageFormat.html]] and customized in its output format.
27
28 === Database ===
29
30 {{figure image="DB_en.png"}}
31 Configuration of the database connection incl. query
32 {{/figure}}
33
34
35 ; JDBC URL
36 : Defines the JDBC URL of the database to be connected
37
38 ; Username
39 : Defines the user name for login to the database
40
41 ; Password
42 : Defines the password for login to the database
43
44 ; Database query
45 : Defines the actual database query to determine a record based on the login page input. These inputs are available via placeholders in the form of {{code language="none"}}[%<html-name-attribute>%]{{/code}}. As soon as a database row is returned by this query, the login is considered successful.
46
47 ; Allow login without found database entry
48 : If this option is active, the login is also allowed without a found database entry. In this case, only the data of the login page are available as user attributes.
49
50 === Login lock ===
51
52 {{figure image="Lock_en.png"}}
53 Login lock configuration
54 {{/figure}}
55
56 ; Input field for the lock identification
57 : Defines the name of the HTML field that is used for the login lock verification. Here the failed login attempts are stored with the value of this field and if a defined number is exceeded a login with this field is temporarily prevented.
58
59 ; Maximum login attempts
60 : Defines after how many incorrect login attempts with the same value the login should be temporarily locked.
61
62 ; Locking duration (in minutes)
63 : Defines the duration of the temporary login lock.
64
65 ; Disable inputs when login lock occurs
66 : If this option is activated, all input fields of the login page will be disabled when the login lock occurs. In this case, no further inputs are possible.
67
68 === Assignment of user attributes ===
69
70 {{figure image="Attributes_en.png"}}
71 Assignment of user attributes
72 {{/figure}}
73
74 In this list the assignment of the determined values to the standard user attributes is provided. Both, the values of the database query in form of the column names and the values of the login page in form of the name attributes can be used. If these names overlap, the value of the database query is preferred.
75
76 == Configuration options of the login page ==
77
78 In addition to the HTML, JavaScript and CSS standards, other options are also available for configuring the login page. Among others, the library [[jQuery>>https://jquery.com/]] is provided here. It should be noted that the login page requires a submit button for submission and a container with the id "error" is intended for the display of error messages in case of unsuccessful login.
79
80 === Validation ===
81
82 For client-side validation of inputs, the library [[Parsley.js>>https://parsleyjs.org]] is provided by default. This makes it possible to use attributes on the input fields, e.g. to require them to be filled in or to force a certain format. The submit button only gets activated after all input elements have been validated successfully. For a more detailed list of Parsley.js's capabilities, see the corresponding [[documentation>>https://parsleyjs.org/doc/index.html]].
83
84 === Further attributes ===
85
86 {{figure image="PW_hidden.png"}}
87 Password field with display option
88 {{/figure}}
89
90
91 {{figure image="PW_show.png"}}
92 Visible password
93 {{/figure}}
94
95 In addition to the validation definition, the following plugin-specific HTML attributes are also available:
96
97 ; data-keep-enabled
98 : Prevents the disabling of the submit button in case of invalid inputs and the disabling of individual input fields when the login lock occurs.
99
100 ; data-show-type
101 : Allows to define an input type at a password field, which can be switched to by an eye symbol. This allows to switch to a readable representation of the input.
102 :
103 ; data-custom-tooltip
104 : Allows specifying the ID of an HTML container whose content is used as a tooltip for element with this attribute.
105
106 === Styling (CSS) ===
107
108 For the styling of the login page, the plugin already provides standard definitions for the layout as well as for input elements, the login button and errors. If required, these can be overwritten within the configuration of the login page in an HTML style tag. The following classes are also available within the HTML:
109
110 ; heading
111 : Defines a DIV container for use as a heading.
112
113 ; row
114 : Defines a DIV container as a single row of the login page. This is intended as a container for the label, description and error text for an input field that is also included.
115
116 ; desc
117 : Defines a DIV container within a row as a description.
118
119 ; errors
120 : Defines a DIV container for displaying errors.
121
122 === Internationalization ===
123
124 In the configuration of the page title, the page body as well as in the error messages the client-specific I18N variables can be used. These can be passed in the form of the placeholder {{code language="none"}}[%I18N.<value>%]{{/code}} and will be replaced according to the language in which the form is opened. Maintenance of these variables can be found [[here>>Formcycle.UserInterface.FilesAndTemplates.I18nVariables]].
125
126 === Example HTML ===
127
128 {{code language="html"}}
129 <script>
130
131 <!-- Sets the maximum selectable date of the 'Birthday' field to the current date. -->
132 $(document).ready(function() {
133 $('#Birthday').prop('max', new Date().toLocaleDateString('fr-ca'));
134 });
135 </script>
136
137 <!-- Definition of a header incl. a graphic -->
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 of a headline -->
143 <div class="heading">
144 <h2>Login</h2>
145 <div>To authenticate, please enter the following data:</div>
146 </div>
147
148 <!-- Definition of an input row incl. label, description and the container for error messages -->
149 <div class="row">
150
151 <!-- Use of I18N variables -->
152 <label for="CNr">[%I18N.customerNr%]</label>
153 <div class="desc">[%I18N.customerNr.desc%]</div>
154
155 <!-- Definition of the input element as a password field incl. validation for input, length and against a defined pattern. -->
156 <!-- Also, the display of the password as text is enabled. Furthermore, the container for any validation errors is specified and auto-complete by the browser is disabled. -->
157 <input autocomplete="new-password" data-parsley-errors-container="#CNrErrors" data-show-type="text" id="CNr" maxlength="10" minlength="10" name="CNr" pattern="[A-Z][0-9]{9}" required="" type="password" />
158 <div id="CNrErrors"></div>
159 </div>
160
161 <div class="row">
162 <label for="Birthday">Birthday</label>
163 <div class="desc">Please enter your date of birth in the format DD.MM.YYYY.</div>
164 <input autocomplete="new-password" data-parsley-errors-container="#BirthdayErrors" id="Birthday" name="Birthday" placeholder="TT.MM.JJJJ" required="" type="date" />
165 <div id="BirthdayErrors"></div>
166 </div>
167
168 <div class="row">
169 <label for="EMail">E-mail address</label>
170 <div class="desc">Enter your e-mail address here to match your contract data.</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 of the container for error messages in case of an unsuccessful login -->
176 <div class="errors" id="errors"></div>
177
178 <!-- Definition of the submit button -->
179 <div class="row">
180 <input type="submit" value="Login" />
181 </div>
182
183 <!-- Definition of a Footer -->
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 == Version history ==
193
194 === 1.1.0 ===
195
196 * Standard validation events (Parsley) removed from the form. These can now be attached to the actual HTML element in a more flexible way.
197 * Added Tippy.js for tooltips
198 * Adding a mechanism that automatically generates tooltips for elements.
199 * JavaScript callback for running script before the internal added (preInitLoginPage())
200 * Minor adjustments to the internationalization mechanism
201 * Minor CSS adjustments
202
203 === 1.0.1 ===
204
205 * Modification to the transfer of the used form language within the authenticator
206 * Support of client-specific placeholders within the configuration of the login page extended
207
208 === 1.0.0 ===
209
210 * Initial release