Zum Hauptinhalt springen

Login

In ChatGPT öffnen
Schatten dwc-login 24.01
Java API

Die Login-Komponente vereinfacht die Benutzer-Authentifizierung, 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 Sichtbarkeit des Passworts sowie 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

Anmeldung​

Wenn Benutzer ihren Benutzernamen und ihr Passwort eingeben, validiert die Login-Komponente diese Eingaben als erforderliche Felder. Sobald die Validierung besteht, wird ein Formularüberereignis ausgelöst, das die eingegebenen Anmeldeinformationen übermittelt. Um mehrfachen Übermittlungen vorzubeugen, wird die [Anmelden]-Schaltfläche sofort deaktiviert.

Das folgende Beispiel zeigt eine grundlegende Login-Komponente. Wenn der Benutzername und das Passwort jeweils auf "admin" gesetzt sind, wird der Anmelde-Dialog geschlossen und eine [Abmelden]-Schaltfläche erscheint. Wenn die Anmeldeinformationen nicht übereinstimmen, wird die Standardfehlermeldung 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 mehrfache Übermittlungen zu verhindern. Sie können die [Anmelden]-Schaltfläche mit der Methode setEnabled(true) wieder aktivieren.

Zulassung von leeren Passwörtern

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 Übermittlungsereignis zu handhaben. Wenn eine Aktions-URL festgelegt ist, führt das Formular eine standardmäßige POST-Anfrage mit den Anmeldeinformationen 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" übermittelt. Benutzerdefinierte Felder mit einem Namensattribut werden ebenfalls in der POST-Anfrage enthalten.

Tipp

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

Internationalisierung (i18n)​

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

Code anzeigen

Benutzerdefinierte Felder​

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

Das folgende Login enthält ein benutzerdefiniertes Feld für eine Kunden-ID. Dies kann Ihnen helfen, Unternehmen oder Abteilungen zu verwalten, die gemeinsam genutzte Inhalte über mehrere Benutzer hinweg haben.

Code anzeigen

Name erforderlich

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

Abbrechen-Schaltfläche​

Login enthält eine [Abbrechen]-Schaltfläche, die standardmäßig ausgeblendet ist. Dies ist besonders nützlich, wenn ein Benutzer versucht, auf einen eingeschränkten Bereich der App zuzugreifen und eine Möglichkeit benötigt, ohne Abschluss des Logins zu seinem vorherigen Standort zurückzukehren.

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

Code anzeigen

Elemente verstecken

Um ein Element zu verstecken, setzen Sie seine Beschriftung auf einen leeren String. 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 bietet:

  • Auto-fill: Der Browser kann automatisch die Felder für Benutzername und Passwort ausfüllen, wenn der Benutzer gespeicherte Anmeldeinformationen für die Website hat.
  • Anmeldeinformationsverwaltung: Nach dem Einloggen 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 Auswahl eines der gespeicherten Sets anbieten.

Styling​

Loading...