Thumbnail: tanlock

Electron und Schlösser

von am unter blog
6 Minuten TTR (Time To Read)

Einführung

Der TANLock ist ein elektronisches Serverschrank Schloss, was recht Nette Anbindungen bietet, die Möglichkeit für einen WebHook und eine REST/HTTP Schnittsetelle. Also Perfekt zum Monitoring Tool Basteln. Selbst vertändlich hat der TANlock auch SNMP für die OldSchool Nagios Menschen :older_woman:, blöd dabei war nur, dass es unter NodeJS keine Vernünftige SNMPv3 Implementierung gibt, und naja auf rein Symmetrische-Verschlüsselung stehe ich eh nicht…

Was hat das mit mir zu tun

Die Geek darf das Dashboard schreiben, um genauer zu sein arbeite ich aktuell daran. Also gibts mal wieder Stoff für JWT, hab heute angefangen mit der MultiUser Implementierung. Zudem gibts bisschen was zu NodeJS und Electron.

Technologie

Verwendet wird im Projekt:

  • Nuxt.js
  • Electron (NodeJS in einem Chromium)

Die Entscheidung für Electron war recht einfach, kenne ich, hab ich schonmal gemacht, und TypeScript verwende ich ja eh in Vue, vondemher ist das ganze eigentlich technologisch recht einheitlich.

Jedoch habe ich schon festgestellt, wenn mans blöd coded, dann kann sich die Single-Thread Architektur ratz fatz aufhängen :stopwatch:

Anforderung

Ein Tool zum Verwalten der Schlösser, Logging und Monitoring.
Für ein Rechenzentrum soll nun auch eine Kabinetansicht dazu (zum Glück schon so gut wie Fertig). Dann kahm noch gester Multi User Fähigkeit hinzu. :bomb::boom:

Umsetzung

Das Tool (Screenshots kommen bestimmt noch), ist ein mit vuetify erstelltes Dark Themed Web-UI, welches mit einem RestServer redet. (Ja man könnte auch einfach einen node nehmen, das bundeln und dann da direkt in einem Firefox laufen lassen, das ist zumindest aktuell mein angestrebtes Ziel). Leider habe ich die Anwendungen (RESTEndpoint und UI), so schlecht in ein Projekt verwurstelt, dass ich gerade aus irgend einem Grund auf den Electron angewiesen bin, und aus Zeit gründen das nicht so schnell entkoppeln werde… Aber UI ist UI, und die Kann ich ja schonmal so anpassen, dass sie neben der API bereitgestellt wird.

Der Electron macht ja aktuell auch nur eine localhost verbindung auf :house:.

Sicherheit

Zur sicherheit ist in dem Projekt einmal TLS im einsatz, jeder Kunde generiert sich beim ersten start seine eigene CA und seine eigenen Zertifikate für JWT und auch den REST Server/die UI, prinzipiell kann man auch die Certifikate selbst hinstellen, und dann müssen sie nicht von JS erstellt werden. (Dazu wird unser Fork der mkcert Bibliothek verwendet) Hauptsache die Certs sind nicht vom Hersteller generiert worden, sondern komplett eigenständig.

Der Electron akzeptiert alle Zertifikate, welche mit seiner CA signiert wurden was eine einfachere Integration bietet, da die CA nicht extrig im System hinterlegt werden muss. Electron hat dafür ein Event, und mit etwas google ist die Berechnung des Fingerprints ganz easy… sha256(certBody) Wenn man das Cert einlißt muss man eventuell den Base64 erst mal decoden. Und dann einfach checken (ich glaub TimeSave müssen wir bei diesem Vergleich nicht sein)

TimeSave bedeuted, dass ein Vergleich immer gleich lange braucht, ohne Kurzschluss-Logik.
Das ist ein wenig vergleichbar mit einem Zahlen schloss, dass verrät indem es weiter aufgeht, dass man eine Zahl richtig hat.
Annahme:
Ein Elektronisches schloss, mit 4 Ziffer, der vergleich einer Ziffer dauert auf der Schlechten hardware etwa 1Sec.
Es ist einleuchtend, dass hier der Vergleich immer 4 Sekunden zu dauern hat.
Sonst könnte ich ja anhand der Vergleichsdauer genau sagen, bis wohin ich richtig liege.

JWT Jap den hab ich auch wieder drinnen. Das konzept is prima, überlegt hab ich mir ja schon was, nun kommt hoffentlich mal der Praxis einsatz ob das überlegte so wirklich funktioniert.

Sie wollen Bilder? Hier nicht

Witziger weise kahm immer wieder raus, dass alle gerne bilder hätten.

Wir finden die Bilder aus der Messe Demo so super.

Oder einfach mit meiner Darstellung nichts anfangen konnten/wollten.

Was bedeuten diese drei Kringel? :woman_shrugging:

Ich will hier nur meine Meinung vertreten, eventuell macht diese Sinn oder auch nicht…
Ein fast rechtwinkliges Bild in einem Dashboard nimmt einfach zu viel Platz weg.
Wenn ich XY Schränke mit Schlössern abbilden möchte habe ich einfach nicht genügent platz um das Bild “einfach erkennbar” abzubilden.
Deshalb eine Abbildung der 3 Leds auf der vorderseite des TANlock, also ich würde sagen das ist logisch und einfach nachvollziehbar.
Noch ein Tooltip drunter mit den Status als Text und für micht würds reichen.
Man muss halt dann auch mit seinem Werkzeug arbeiten, so untypisch Man das auch ist, evtl muss man ne Anleitung lesen :man_shrugging:. Wo ich jedoch den Kunden verstehen konnte war bei einem farbigen Hintergrund, einfach nochmal Signalfarben rein, rot - offen, grün - geschlossen.

Aber die Bildchen gibts auch…
Verbaut an einer Stelle, wo der Platz reicht :grinning:

Zielsetzung für den Blog

Ich will in den kommenden Blogposts eben auf den TLS Teil eingehen, Und dann die erfahrungen mit JWT, den Vuetify/TypeScript part werde ich eventuell auch ankratzen, wenn ich etwas Interessantes finde.

Auf jeden wirds noch was über die Integration der Kunden Hardware geben (eine Art Plugin Mechanismus fürs Monitoring)

security, nodejs, nuxtjs, blog, tanlock