Login
Login-komponentti yksinkertaistaa käyttäjän todennusta tarjoamalla valmiin kirjautumisdialogin, jossa on käyttäjänimi- ja salasanakentät. Se sisältää ominaisuuksia, kuten syötteen validoinnin, mukautettavat tunnisteet ja viestit, salasanan näkyvyyden hallinnan sekä tuen lisä mukautetuille kentille.
Luodaan Login-dialogi
Luo Login-dialogi instansoimalla komponentti ja kutsumalla open() sen näyttämiseksi. Dialogissa on oletuksena käyttäjänimi- ja salasanakentät, syötteen validointi ja kirjautumispainike.
Näytä koodi
- Java
Kirjautumisen lähettäminen
Kun käyttäjät syöttävät käyttäjänimensä ja salasanansa, Login-komponentti validoi nämä syötteet pakollisina kenttinä. Kun validointi on onnistunut, lomakkeen lähetystapahtuma laukaistaan, ja syötetyt tiedot toimitetaan. Estääkseen moninkertaiset lähetykset, [Kirjaudu sisään] -painike on heti poistettu käytöstä.
Seuraava esittää perus Login-komponentin. Jos käyttäjänimi ja salasana on molemmat asetettu arvoon "admin", kirjautumisdialogi sulkeutuu, ja [Kirjaudu ulos] -painike tulee näkyviin. Jos tiedot eivät täsmää, oletusvirheilmoitus näytetään.
Näytä koodi
- Java
Oletuksena Login poistaa heti käytöstä [Kirjaudu sisään] -painikkeen, kun komponentti validoi kirjautumissyötteet oikein, estääkseen moninkertaiset lähetykset. Voit ottaa [Kirjaudu sisään] -painikkeen uudelleen käyttöön käyttämällä setEnabled(true)-metodia.
Voit sallia käyttäjien kirjautuvan sisään vain käyttäjän nimellä käyttämällä setEmptyPassword(true) -metodia.
Lomakkeen toiminto 25.10
Login-komponentti voi lähettää lomakedatat suoraan määrättyyn URL-osoitteeseen sen sijaan, että se käsittelisi lähettämistä lomakkeen tapahtuman kautta. Kun toimint URL-osoite on asetettu, lomake suorittaa tavanomaisen POST-pyynnön käyttäjänimen ja salasanan muodossa.
Login login = new Login();
login.setAction("/api/auth");
Kun käytetään setAction(), lomakkeen lähetys ohittaa LoginSubmitEventin ja suorittaa sen sijaan perinteisen HTTP POST -pyynnön määrättyyn päätepisteeseen. Käyttäjänimi ja salasana lähetetään lomakeparametreina nimillä "username" ja "password". Mukautetut kentät, joissa on nimen attribuutti, sisältyvät myös POST-pyyntöön.
Jos toimint URL-osoitetta ei ole asetettu, lomakkeen lähetys käsitellään LoginSubmitEventin kautta, jolloin voit käsitellä käyttäjätietoja ohjelmallisesti palvelinpuolella.
Kansainvälistäminen (i18n)
Login-komponentin otsikot, kuvaukset, tunnisteet ja viestit ovat täysin mukautettavissa käyttämällä LoginI18n-luokkaa. Tämä joustavuus mahdollistaa kirjautumisliittymän muokkaamisen tiettyjen lokalisointivaatimusten tai henkilökohtaisten mieltymysten mukaiseksi.
Näytä koodi
- Java
Mukautetut kentät
Login-komponentti sisältää useita paikkoja, jotka mahdollistavat lisäkenttien lisäämisen tarpeen mukaan. Mukautetut kentät kerätään automaattisesti, kun lomake lähetetään, ja niihin pääsee käsiksi lähetyseventin datakartasta.
Seuraavassa kirjautumisessa on lisätty mukautettu kenttä asiakastunnukselle. Tämä voi auttaa hallitsemaan yrityksiä tai osastoja, joilla on yhteistä sisältöä useiden käyttäjien kesken.
Näytä koodi
- Java
- CSS
Mukautetuilla kentillä on oltava nimi asetettuna setName()-metodilla, jotta ne voidaan sisällyttää lomakkeen lähetykseen. Nimi toimii avaimena kentän arvon hakemiseksi event.getData()-kutsusta.
Peruuta-painike
Login sisältää [Peruuta] -painikkeen, joka on oletuksena piilotettu. Tämä on erityisen hyödyllistä, kun käyttäjä yrittää päästä sovelluksen rajoitettuun osaan ja tarvitsee vaihtoehdon palata edelliseen sijaintiin ilman kirjautumisen suorittamista.
Tehdäksesi peruuta-painikkeen näkyväksi, tarjoa sille tunniste. Voit myös kuunnella peruuta-tapahtumia käsitelläksesi peruutuksen asianmukaisesti.
Näytä koodi
- Java
Piilottaaksesi elementin, aseta sen tunniste tyhjiksi. Tämä mahdollistaa näkyvyyden kytkemisen ilman, että komponenttia poistetaan koodistasi.
Salasananhallintaohjelmat
Tämä komponentti toimii selainpohjaisten salasananhallintatyökalujen kanssa helpottaakseen kirjautumisprosessia. Chromium-pohjaisissa selaimissa se integroituu PasswordCredential API:in, joka tarjoaa:
- Automaattinen täyttö: Selain voi automaattisesti täyttää käyttäjänimi- ja salasanakentät, jos käyttäjä on tallentanut tunnistetiedot sivustolle.
- Tunnistetietojen hallinta: Kirjautumisen jälkeen selain voi kehottaa käyttäjää tallentamaan uusia tunnistetietoja, jolloin tulevat kirjautumiset ovat nopeampia ja helpompia.
- Tunnistetietojen valinta: Jos useita tunnistetietoja on tallennettuna, selain voi tarjota käyttäjälle mahdollisuuden valita tallennetuista tietoista.