Zum Hauptinhalt springen

Login

In ChatGPT öffnen
Schatten dwc-login 24.01
Java API

Die Login-Komponente vereinfacht die Benutzeranmeldung, indem sie einen sofort einsatzbereiten Anmelde-Dialog mit Benutzernamen- und Passwortfeldern bereitstellt. Sie umfasst Funktionen wie Eingabevalidierung, anpassbare Beschriftungen und Nachrichten, Steuerungen für die Passwortsichtbarkeit und Unterstützung für zusätzliche benutzerdefinierte Felder.

Erstellen eines Login-Dialogs​

Erstellen Sie einen Login-Dialog, indem Sie die Komponente instanziieren und open() aufrufen, um ihn anzuzeigen. Der Dialog umfasst standardmäßig Benutzername- und Passwortfelder, Eingabevalidierung und eine Anmelde-Schaltfläche.

Code anzeigen

Anmelden​

Wenn Benutzer ihren Benutzernamen und ihr Passwort eingeben, validiert die Login-Komponente diese Eingaben als erforderliche Felder. Sobald die Validierung erfolgreich ist, wird ein Ereignis zur Formularübermittlung ausgelöst, das die eingegebenen Anmeldeinformationen übermittelt. Um mehrere Übermittlungen zu verhindern, wird die [Anmelden]-Schaltfläche sofort deaktiviert.

Die folgende Darstellung zeigt eine grundlegende Login-Komponente. Wenn der Benutzername und das Passwort beide auf "admin" eingestellt sind, wird der Anmelde-Dialog geschlossen und eine [Abmelden]-Schaltfläche angezeigt. Wenn die Anmeldeinformationen nicht übereinstimmen, wird die standardmäßige Fehlermeldung angezeigt.

Code anzeigen

Deaktivierung der [Anmelden]-Schaltfläche

Standardmäßig deaktiviert Login sofort die [Anmelden]-Schaltfläche, sobald die Komponente die Anmeldeeingaben als korrekt validiert, um mehrere Übermittlungen zu verhindern. Sie können die [Anmelden]-Schaltfläche mit der Methode setEnabled(true) wieder aktivieren.

Erlauben leerer Passwörter

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

Formularaktion 25.10​

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

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

Bei 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 der POST-Anfrage berücksichtigt.

Tipp

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

Internationalisierung (i18n)​

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

Code anzeigen

Benutzerdefinierte Felder​

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

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

Code anzeigen

Name erforderlich

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

Abbrechen-Schaltfläche​

Login umfasst eine [Abbrechen]-Schaltfläche, die standardmäßig verborgen ist. Dies ist besonders nützlich, wenn ein Benutzer versucht, auf einen eingeschränkten Bereich der Anwendung zuzugreifen und eine Option benötigt, um ohne Abschluss der Anmeldung zu einem vorherigen Standort zurückzukehren.

Um die Abbrechen-Schaltfläche sichtbar zu machen, geben Sie eine Beschriftung dafür an. Sie können auch Abbrechen-Ereignisse abhören, um die Abbrechung entsprechend zu behandeln.

Code anzeigen

Elemente ausblenden

Um ein Element auszublenden, setzen Sie seine Beschriftung auf eine leere Zeichenfolge. Dies ermöglicht es Ihnen, die Sichtbarkeit umzuschalten, 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 mit der PasswordCredential API, die Folgendes bereitstellt:

  • Auto-fill: Der Browser kann die Benutzername- und Passwortfelder automatisch ausfüllen, wenn der Benutzer Anmeldeinformationen für die Seite gespeichert hat.
  • Anmeldeinformationsverwaltung: Nach der Anmeldung kann der Browser den Benutzer auffordern, neue Anmeldeinformationen zu speichern, was zukünftige Anmeldungen schneller und einfacher macht.
  • Auswahl der Anmeldeinformationen: Wenn mehrere Anmeldeinformationen gespeichert sind, kann der Browser dem Benutzer eine Auswahl anbieten, um aus einem der gespeicherten Sätze auszuwählen.

Styling​

Loading...