Fach-Widgets
Anschauungsbausteine aus dem Modul „Einfach sicher einloggen" und der Umschalter für den Farbmodus.
Diese drei sind fachlich enger zugeschnitten als der übrige Katalog. Sie stammen aus einem einzelnen Schulungsmodul und wurden auf deine Ansage hin mit übernommen.
LmsLoginDemo
Nachgebaute Anmeldemaske
Reine Anschauung — es wird nichts gesendet und nichts gespeichert. Der Passwortvorschlag entsteht lokal über die Krypto-API des Browsers; KmuLogin nutzte dafür Math.random.
Angepasste Beschriftungen
Adresszeile und Feldbeschriftungen waren in KmuLogin fest verdrahtet.
LmsPassphraseDemo
Passphrase mit Stärkebalken
Die Balkenfarbe folgt dem Wert — ab 85 grün, ab 50 gelb, darunter rot. Bewertet wird nicht selbst; Stärke und Beschriftung kommen aus dem Inhalt.
Schwächere Beispiele
LmsColorModeToggle
Nuxt UI bringt mit UColorModeButton eine reine Icon-Variante mit. Diese hier
zeigt zusätzlich den Zustand als Text — so war es in KmuColorToggle.
Mit und ohne Beschriftung
Oben rechts in der Kopfleiste sitzt derselbe Umschalter.
LmsMfaSetup
Zweiten Faktor einrichten
Sechs Schritte mit echtem TOTP. Der QR-Code funktioniert in jeder Authenticator-App — dieselben sechs Ziffern.
MFA einrichten – Live-Demo
Läuft lokal im Browser – keine echten Konten.
Scanne den QR-Code mit deiner Authenticator-App – damit teilen App und Server dasselbe geheime Schlüsselwort.
Geheimnis (Base32)
Konto: max.muster@kunde.de · Beispiel GmbH
Gib den aktuellen 6-stelligen Code aus deiner App ein. So bestätigen App und Server, dass beide übereinstimmen.
Tipp: Den aktuellen Code siehst du im nächsten Schritt – diese Demo zeigt App und Server nebeneinander.
MFA ist aktiv
App und Server berechnen unabhängig denselben Code aus geteiltem Geheimnis und Uhrzeit – und wechseln synchron alle 30 Sekunden. Das ist der Aha-Moment.
Deine App
--- ---
noch 30 s
Server
--- ---
noch 30 s
Gleiches Geheimnis + gleiche Zeit = gleicher Code.
Beim Einrichten erhältst du Wiederherstellungscodes. Jeder funktioniert genau einmal – die Notbremse, falls das Handy weg ist.
Aufbewahren: ausgedruckt im Tresor oder im Passwort-Manager, getrennt vom Handy.
So fühlt sich die Anmeldung danach an: erst Passwort, dann zweiter Faktor.
Auch das Entfernen gehört dazu – etwa beim Gerätewechsel. Wichtig ist die Reihenfolge.
Beispiel GmbH
max.muster@kunde.de
--- ---
aktiver Code
LmsAuthenticatorCode
Code mit Ablaufring
Anschauung für TOTP. Die Ziffern sind aus dem Zeitfenster abgeleitet, kein echtes Verfahren.
000 000
Gleiches Geheimnis und gleiche Zeit ergeben denselben Code. Er wechselt alle 30 Sekunden — genau wie in der echten App.
LmsRecoveryCodes
Einmal-Codes mit Aufbewahrungsregeln
Verbrauchte Codes sind durchgestrichen — genau darum geht es didaktisch.
Einmal-Codes — die Notbremse
Jeder Code funktioniert genau einmal anstelle des zweiten Faktors. Verbrauchte sind durchgestrichen.
Sicher aufbewahren
- Ausgedruckt im Tresor oder im Passwortmanager
- Getrennt vom Handy — nie nur auf demselben Gerät
- Im Unternehmen: zweiter Faktor als Reserve plus Admin-Reset
LmsBruteForceDemo
Passwort Stelle für Stelle knacken
Jeder Druck auf den Knopf deckt eine weitere Stelle auf. So arbeitet ein Angriff — nur millionenfach schneller.
Jeder Tastendruck deckt eine weitere Stelle auf. So arbeitet ein Angreifer — nur millionenfach schneller.
passwort123
LmsQrCode
Der Sprung vom Bildschirm aufs Telefon: die Kurzanleitung, die man am Arbeitsplatz braucht, das Formular für den Meldeweg, der zweite Faktor. Wer davor sitzt, soll nicht abtippen müssen.
Der Code wird auf dem Server gezeichnet — qrcode-generator rechnet in
reinem JavaScript ohne Canvas, das Ergebnis ist derselbe SVG-Text auf beiden
Seiten. Anders als bei den Diagrammen gibt es hier nichts nachzuladen.
Die Fläche bleibt in beiden Modi hell: ein QR-Code lebt vom Kontrast zwischen dunklen Modulen und hellem Grund, auf dunklem Untergrund liest ihn keine Kamera. Und der Inhalt steht auch als Text darunter — ohne Kamera ist der Code sonst eine leere Fläche.
Adresse mit Beschriftung
Der Inhalt steht auswählbar darunter. Fehlerkorrektur M ist die Vorgabe.
https://www.bsi.bund.de/DE/Themen/Regulierte-Wirtschaft/
Prüfen Sie mit dem Fragenkatalog, ob Ihr Betrieb betroffen ist.
Für den Ausdruck
Fehlerkorrektur Q verträgt Knicke und Flecken — dichter, aber robuster.
https://beispiel-gmbh.de/meldeweg