NEWS
Login per VIS / Kennwortabfrage
-
Hallo zusammen,
weil es in der Facebookgruppe gefragt wurde zeige ich hier einmal, wie ich den Login in meiner VIS realisiert habe.
Ziel:
Über eine Passwortabfrage soll realisiert werden, dass bestimmte Elemente für eine unbefugte Bedienung gesperrt werden. Es geht dabei nicht darum, ein super sicheres System herzustellen, sondern unbefugtes Bedienen durch Besucher zu unterbinden.Datenpunkte in ioBroker:
Die Erteilung von Berechtigungen erfolgt über Datenpunkte, die ich in ioBroker angelegt habe:
0_userdata.0.Visualisierung.Berechtigungen.countdown
(Typ String / Zeichenkette)
0_userdata.0.Visualisierung.Berechtigungen.hint
(Typ String / Zeichenkette)
0_userdata.0.Visualisierung.Berechtigungen.isAdmin
(Typ Boolean / Logikwert)
0_userdata.0.Visualisierung.Berechtigungen.pinInput
(Typ Number / Zahl)Umsetzung in VIS:
Ich habe eine View erstellt, über die die Eingabe realisiert wird. Die Eingabetasten sind vom Typjqui - Button State
und schreiben ihren Zahlenwert, bzw. das hinterlegte Zeichen in den Datenpunkt0_userdata.0.Visualisierung.Berechtigungen.pinInput
.Das Anzeigefeld ist vom Typ
basic - String
und zeigt den Inhalt des States0_userdata.0.Visualisierung.Berechtigungen.hint
an.Der Login-Button oben rechts im Eingangsbild ist vom Typ
jqui - container - Button - view in jqui Dialog
und ruft die View mit den Eingabetasten in einem Popup-Fenster auf.Die zu sperrenden Elemente erhalten im Feld
CSS Klasse
den (zusätzlichen) Eintragvis-user-disabled
, der bereits Bestandteil von VIS ist und die Bedienung des jeweiligen Elementes verhindert. Da dieser Eintrag dynamisch gesetzt werden soll, abhängig davon, ob man eingeloggt ist, oder nicht, sieht der Gesamteintrag so aus:
{w:0_userdata.0.Visualisierung.Berechtigungen.isAdmin; w == "false" ? "vis-user-disabled" : ""}
Hinweis: Es handelt sich dabei um eine Standard-Funktion, mit der man auch Farben dynamisieren kann. Das Funktioniert bei CSS-Klassen genauso.Steuerscript:
Gesteuert wird das ganze über ein Script in ioBroker. Das funktioniert im Prinzip so:- Bei Neustart des Scripts, der Javascript-Instanz oder ioBroker wird ausgeloggt
- Das Script nimmt die Eingabewerte aus dem Datenpunkt
0_userdata.0.Visualisierung.Berechtigungen.pinInput
entgegen und und schreibt zur visuellen Bestätigung einen Punkt in den State0_userdata.0.Visualisierung.Berechtigungen.hint
. - Wenn 4 Zeichen eingegeben wurden wird geprüft, ob die Eingabe dem fest im Script hinterlegten Wert entspricht. Der State
0_userdata.0.Visualisierung.Berechtigungen.isAdmin
wird auftrue
gesetzt und es erfolgt wieder eine visuelle Bestätigung. - Zeitgleich wird ein Timeout gesetzt, das nach 5 Minuten den State
isAdmin
auffalse
setzt. - Der Countdown wird sekündlich neu berechnet und im State
0_userdata.0.Visualisierung.Berechtigungen.countdown
angezeigt
(Blockly-Export am Ende des Beitrags)
Optionales:
Man kann den State0_userdata.0.Visualisierung.Berechtigungen.isAdmin
natürlich auch dafür verwenden, den Login-Button beitrue
auszublenden und den Logout-Button, sowie den Countdown einzublenden.Erfahrungen:
Eigentlich ist die Umsetzung ziemlich billig, aber sie reicht meines Erachtens nach vollkommen aus, zumindest für meine Zwecke. Was ich etwas schade finde ist, dass es ganze etwas träge bei der Eingabe ist. Wenn man die Zahlen zu schnell eintippt, dann kann sich das ganze durchaus auch mal verschlucken und man hat plötzlich nur 3 oder sogar 5 Zahlen eingegeben.Export des Blockly-Scriptes:
blockly_berechtigungen.txt
(Neues Blockly-Script anlegen und oben rechts aufBlöcke importieren
klicken)