LmsMfaSetup
Fach-WidgetsZweiten Faktor einrichten — zum Mitmachen, mit echtem TOTP.
::lms-mfa-setup Im Zusammenhang ansehen Übernommen aus Demonstrator (coactum-nuggets).
Beispiele (1)
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
API
Vollständig aus den Quellen erzeugt. Dieselben Angaben stehen an jedem Beispiel hinter dem Knopf API — hier ausgeschrieben, damit sie über die Seitensuche und im Druck auffindbar bleiben.
Props
| Prop | Typ | Standard | Bedeutung |
|---|---|---|---|
issuer | string | 'Beispiel GmbH' | Anzeigename des Dienstes (Issuer im QR/otpauth-Link und in den Texten) |
account | string | 'max.muster@kunde.de' | Konto-/Benutzername, der in der Demo angezeigt wird |
Slots
Dieser Baustein hat keine Slots — sein Inhalt kommt vollständig aus den Props.
Emits
Dieser Baustein sendet keine Events.
Theme
Dieser Baustein hat keine Fläche in der app.config.ts.
Sein Aussehen steuerst du über Props — bei den didaktischen Bausteinen über das gemeinsame Farbrollen-Vokabular (color, variant), bei den dekorativen über deren eigene Props. Eine Theming-Ebene wie ui.<komponente> in Nuxt UI gibt es hier noch nicht.
Changelog
- Hinzugefügt
0.7.0zweiten Faktor einrichten, sechs Schritte mit echtem TOTP nach RFC 6238. Der QR-Code funktioniert in jeder Authenticator-App und liefert dieselben sechs Ziffern. Aus
Demonstrator; brauchtqrcode-generatorals optionale peerDependency - Geändert
0.7.0src/runtime/utils/totp.tskommt hinzu: TOTP in reinem JavaScript, gegen die Testvektoren des RFC geprüft. Einzige Änderung gegenüber der Quelle sind Nicht-Null-Zusicherungen an den Feldzugriffen — der Bestand an@ts-nocheckbleibt bei 51, und keine Ausnahme liegt außerhalb vonfx/ - Hinzugefügt
0.6.0useLmsProgress: Fortschritt lässt sich speichern, ohne dass die Bibliothek ein Backend kennt. Das Zielprojekt hinterlegt einmal einen Adapter mitget/set, die Bausteine nutzen ihn, wenn er da ist — sonst halten sie den Stand im Speicher wie bisher. Ereignisse wären hier nutzlos: MDC kann keine Events abonnieren, und genau dort werden diese Bausteine benutzt - Behoben
0.4.0Die Warnung
Slot "default" invoked outside of the render functionerscheint nicht mehr. Der Katalog läuft jetzt mit 0 Fehlern und 0 Warnungen - Hinzugefügt
0.3.0Der MDC-Bereich jedes Beispiels ist jetzt ein Editor: Syntaxhervorhebung, Code-Vervollständigung aus der Registry, Prüfung in sechs Stufen und eine Vorschau, die beim Tippen mitläuft. Oben rechts Zurücksetzen und Kopieren
- Hinzugefügt
0.3.0Die Prüfung meldet unbekannte Bausteine, unbekannte Props, fehlende Pflicht-Props, unbekannte Slots, Events (die MDC nicht abonnieren kann) und den Typkonflikt, an dem man in MDC am häufigsten hängenbleibt: Inline-Attribute sind immer Zeichenketten,
{count=14}übergibt"14" - Hinzugefügt
0.2.0API-Ansicht je Baustein: Props, Slots, Emits, Theme und dieser Changelog. In der Demo-Hülle als Reiter hinter dem Knopf API, auf der Detailseite ausgeschrieben
- Hinzugefügt
0.2.0Emits werden dokumentiert. Sie sind der Grund, warum sich manche Bausteine aus Markdown heraus nicht vollständig bedienen lassen: MDC kann keine Events abonnieren
- Geändert
0.2.0Die Komponentenreferenz der README wird jetzt vollständig erzeugt statt von Hand gepflegt
- Geändert
0.2.0Auch die Tabelle der optionalen Abhängigkeiten wird erzeugt. Sie war gedriftet:
motion-vstand mit 50 statt 54 Komponenten darin,@uiw/color-convertunter „je 1", obwohl es drei sind - Hinzugefügt
0.1.0Erstveröffentlichung: 187 Bausteine in 17 Kategorien, davon 40 didaktische
Lms- und 147 dekorativeFx-Bausteine aus Inspira UI