Zum Hauptinhalt springen

Login

In ChatGPT öffnen
Shadow dwc-login 24.01
Java API

Die Login-Komponente vereinfacht die Benutzerauthentifizierung, indem sie einen sofort einsatzbereiten Anmelde-Dialog mit Feldern für Benutzername und Passwort bereitstellt. Sie enthält Funktionen wie Eingabevalidierung, anpassbare Beschriftungen und Nachrichten, Steuerungen für die Passwortsichtbarkeit und Unterstützung für zusätzliche benutzerdefinierte Felder.

Code anzeigen

Anmeldung​

Wenn Benutzer ihren Benutzernamen und ihr Passwort eingeben, validiert die Login-Komponente diese Eingaben als erforderliche Felder. Sobald die Validierung abgeschlossen ist, wird ein Formularüberereignis ausgelöst, das die eingegebenen Anmeldedaten übermittelt. Um mehrere Übermittlungen zu verhindern, wird der [Anmelden]-Button sofort deaktiviert.

Das folgende Beispiel zeigt eine grundlegende Login-Komponente. Wenn der Benutzername und das Passwort beide auf "admin" gesetzt sind, schließt sich der Anmelde-Dialog und ein [Abmelden]-Button erscheint. Wenn die Anmeldedaten nicht übereinstimmen, wird die Standardfehlermeldung angezeigt.

Code anzeigen

Deaktivierung des [Anmelden]-Buttons

Standardmäßig deaktiviert Login sofort den [Anmelden]-Button, nachdem die Eingaben zur Anmeldung als korrekt validiert wurden, um mehrere Übermittlungen zu verhindern. Sie können den [Anmelden]-Button mit der Methode setEnabled(true) wieder aktivieren.

Erlauben von leeren Passwörtern

Sie können es Benutzern erlauben, sich nur mit einem Benutzernamen anzumelden, indem Sie die Methode setEmptyPassword(true) verwenden.

Formularaktion 25.10​

Die Login-Komponente kann Formulardaten direkt an eine bestimmte URL übermitteln, anstatt die Übermittlung über das Ereignis zur Einreichung zu handhaben. Wenn eine Aktions-URL festgelegt ist, führt das Formular eine standardmäßige POST-Anfrage mit Benutzername und Passwort als Formularparameter durch.

Login login = new Login();
login.setAction("/api/auth");

Bei der Verwendung von setAction() umgeht die Formularübermittlung das LoginSubmitEvent und führt stattdessen eine traditionelle HTTP-POST-Anfrage an den angegebenen Endpunkt durch. Der Benutzername und das Passwort werden als Formularparameter mit den Namen "username" und "password" gesendet. Benutzerdefinierte Felder mit einem Namensattribut werden ebenfalls in die POST-Anfrage einbezogen.

Tipp

Wenn keine Aktions-URL festgelegt ist, wird die Formularübermittlung über das LoginSubmitEvent gehandhabt, sodass Sie die Anmeldedaten programmgesteuert auf der Serverseite verarbeiten können.

Internationalisierung (i18n)​

Die Titel, Beschreibungen, Beschriftungen und Nachrichten innerhalb der Login-Komponente sind vollständig anpassbar über die Klasse LoginI18n. Diese Flexibilität ermöglicht es Ihnen, die Anmeldeschnittstelle an spezifische Lokalisierungsanforderungen oder Personalisierungspräferenzen anzupassen.

Code anzeigen

Benutzerdefinierte Felder​

Die Login-Komponente enthält mehrere Slots, die es Ihnen ermöglichen, zusätzliche Felder nach Bedarf hinzuzufügen. Benutzerdefinierte Felder werden automatisch gesammelt, wenn das Formular übermittelt wird, und können über die Datenkarte des Übermittlungsereignisses abgerufen werden.

Der folgende Login hat ein benutzerdefiniertes Feld für eine Kunden-ID hinzugefügt. Dies kann Ihnen helfen, Unternehmen oder Abteilungen zu verwalten, die Inhalte gemeinsam über mehrere Benutzer hinweg teilen.

Code anzeigen

Name erforderlich

Benutzerdefinierte Felder müssen einen Namen haben, der über setName() festgelegt wird, um in die Formularübermittlung aufgenommen zu werden. Der Name wird als Schlüssel verwendet, um den Wert des Feldes aus event.getData() abzurufen.

Abbrechen-Button​

Login enthält einen [Abbrechen]-Button, der standardmäßig verborgen ist. Dies ist besonders nützlich, wenn ein Benutzer versucht, auf einen eingeschränkten Bereich der App zuzugreifen und eine Option benötigt, um zu seinem vorherigen Standort zurückzukehren, ohne die Anmeldung abzuschließen.

Um den Abbrechen-Button sichtbar zu machen, geben Sie eine Beschriftung dafür an. Sie können auch auf Abbrechen-Ereignisse hören, um die Stornierung entsprechend zu verarbeiten.

Code anzeigen

Ausblenden von Elementen

Um ein Element auszublenden, setzen Sie seine Beschriftung auf eine leere Zeichenfolge. Auf diese Weise können Sie die Sichtbarkeit umschalten, ohne die Komponente aus Ihrem Code zu entfernen.

Passwortmanager​

Diese Komponente funktioniert mit browserbasierten Passwortmanagern, um den Anmeldeprozess zu vereinfachen. In Chromium-basierten Browsern integriert sie sich in die PasswordCredential API, die Folgendes bietet:

  • Automatische Ausfüllung: Der Browser kann automatisch die Felder für Benutzernamen und Passwort ausfüllen, wenn der Benutzer für die Seite gespeicherte Anmeldeinformationen hat.
  • Verwaltung von Anmeldeinformationen: Nach der Anmeldung kann der Browser den Benutzer auffordern, neue Anmeldeinformationen zu speichern, was zukünftige Anmeldungen schneller und einfacher macht.
  • Auswahl von Anmeldeinformationen: Wenn mehrere Anmeldeinformationen gespeichert sind, kann der Browser dem Benutzer die Möglichkeit bieten, aus einem der gespeicherten Sätze auszuwählen.

Styling​

Loading...