Login
De Login component vereenvoudigt de gebruikersauthenticatie door een kant-en-klare inlogdialoog aan te bieden met velden voor gebruikersnaam en wachtwoord. Het omvat functies zoals invoervalidatie, aanpasbare labels en berichten, wachtwoordzichtbaarheidselementen en ondersteuning voor extra aangepaste velden.
Een Login dialoog maken
Maak een Login dialoog door de component te initialiseren en open() aan te roepen om deze weer te geven. De dialoog bevat standaard velden voor gebruikersnaam en wachtwoord, invoervalidatie en een aanmeldknop.
Toon Code
- Java
Inloggen
Wanneer gebruikers hun gebruikersnaam en wachtwoord invoeren, valideert de Login component deze invoeren als verplichte velden. Zodra de validatie slaagt, wordt een formulierindienevenement geactiveerd, waarbij de ingevoerde inloggegevens worden afgeleverd. Om meerdere indieningen te voorkomen, wordt de [Sign in] knop onmiddellijk uitgeschakeld.
Het volgende illustreert een basis Login component. Als zowel de gebruikersnaam als het wachtwoord zijn ingesteld op "admin" respectievelijk, sluit de inlogdialoog en verschijnt een [Logout] knop. Als de inloggegevens niet overeenkomen, wordt het standaard foutbericht weergegeven.
Toon Code
- Java
Standaard schakelt Login onmiddellijk de [Sign in] knop uit zodra de component de inloginvoeren als correct valideert, om meerdere indieningen te voorkomen. Je kunt de [Sign in] knop weer inschakelen met de methode setEnabled(true).
Je kunt gebruikers toestaan om in te loggen met alleen een gebruikersnaam door de methode setEmptyPassword(true) te gebruiken.
Formulieractie 25.10
De Login component kan formulierdata rechtstreeks naar een opgegeven URL indienen in plaats van de indiening via het indieningsevenement te verwerken. Wanneer een actie-URL is ingesteld, voert het formulier een standaard POST-verzoek uit met de gebruikersnaam en het wachtwoord als formulierparameters.
Login login = new Login();
login.setAction("/api/auth");
Bij gebruik van setAction(), omzeilt de formulierindiening het LoginSubmitEvent en voert in plaats daarvan een traditionele HTTP POST-aanroep uit naar het opgegeven eindpunt. De gebruikersnaam en het wachtwoord worden als formulierparameters verzonden met de namen "username" en "password", respectievelijk. Aangepaste velden met een naamattribuut worden ook opgenomen in het POST verzoek.
Als er geen actie-URL is ingesteld, wordt de formulierindiening verwerkt via het LoginSubmitEvent, waardoor je inloggegevens programmatig aan de serverzijde kunt verwerken.
Internationalisatie (i18n)
De titels, beschrijvingen, labels en berichten binnen de Login component zijn volledig aanpasbaar met behulp van de LoginI18n klasse. Deze flexibiliteit stelt je in staat om de inloginterface aan te passen aan specifieke lokalisatievereisten of personalisatievoorkeuren.
Toon Code
- Java
Aangepaste velden
De Login component omvat verschillende slots waarmee je extra velden kunt toevoegen indien nodig. Aangepaste velden worden automatisch verzameld wanneer het formulier wordt ingediend en kunnen worden geraadpleegd via de datakaart van het indieningsevenement.
De volgende inlog heeft een aangepast veld toegevoegd voor een klant ID. Dit kan je helpen bij het beheren van bedrijven of afdelingen met gedeelde inhoud tussen meerdere gebruikers.
Toon Code
- Java
- CSS
Aangepaste velden moeten een naam hebben ingesteld met setName() om opgenomen te worden in de formulierindiening. De naam wordt gebruikt als de sleutel om de waarde van het veld op te halen uit event.getData().
Annuleerknop
Login omvat een [Cancel] knop die standaard verborgen is. Dit is vooral nuttig wanneer een gebruiker probeert toegang te krijgen tot een beperkt gebied van de app en een optie nodig heeft om terug te keren naar hun vorige locatie zonder de inlog te voltooien.
Om de annuleerknop zichtbaar te maken, geef je een label voor deze op. Je kunt ook luisteren naar annuleerevenementen om de annulering op de juiste manier af te handelen.
Toon Code
- Java
Om een element te verbergen, stel je het label in op een lege string. Dit stelt je in staat om de zichtbaarheid te togglen zonder de component uit je code te verwijderen.
Wachtwoordmanagers
Deze component werkt samen met browsergebaseerde wachtwoordmanagers om het inlogproces te vereenvoudigen. In op Chromium gebaseerde browsers is het geïntegreerd met de PasswordCredential API, welke biedt:
- Automatisch invullen: De browser kan de velden voor gebruikersnaam en wachtwoord automatisch invullen als de gebruiker inloggegevens voor de site heeft opgeslagen.
- Credential Management: Na het inloggen kan de browser de gebruiker vragen om nieuwe inloggegevens op te slaan, waardoor toekomstige inloggen sneller en gemakkelijker wordt.
- Credential Selectie: Als er meerdere inloggegevens zijn opgeslagen, kan de browser de gebruiker de keuze geven uit een van de opgeslagen sets.