Login
Login-komponentti yksinkertaistaa käyttäjäntunnistusta tarjoamalla valmiin kirjautumisdialogin, jossa on käyttäjätunnus- ja salasanakentät. Se sisältää ominaisuuksia, kuten syötteen validoinnin, muokattavat nimet ja viestit, salasanan näkyvyysasetukset sekä tuen lisäcustom-kentille.
Creating a Login dialog
Luo Login-dialogi instoimalla komponentti ja kutsumalla open(), jotta se näkyy. Dialogissa on oletuksena käyttäjätunnus- ja salasanakentät, syötteen validointi ja kirjautumispainike.
Näytä koodi
- LoginBasicView.java
Login submission
Kun käyttäjät syöttävät käyttäjätunnuksensa ja salasanansa, Login-komponentti validoi nämä syötteet pakollisina kenttinä. Kun validointi onnistuu, lomakkeen lähetyseventti laukaistaan ja syötetyt tunnistetiedot toimitetaan. Useiden lähetyksien estämiseksi [Sign in] -painike on heti poistettu käytöstä.
Seuraavassa on perus Login-komponentti. Jos sekä käyttäjätunnus että salasana on asetettu arvoon "admin", kirjautumisdialogi sulkeutuu ja [Logout] -painike tulee näkyviin. Jos tunnistetiedot eivät täsmää, oletusvirhesanoma näytetään.
Näytä koodi
- LoginSubmissionView.java
Oletuksena Login poistaa heti käytöstä [Sign in] -painikkeen, kun komponentti validoi kirjautumistiedot oikeiksi useiden lähetyksien estämiseksi. Voit ottaa [Sign in] -painikkeen uudelleen käyttöön käyttämällä setEnabled(true) -metodia.
Voit sallia käyttäjien kirjautuvan vain käyttäjätunnuksella käyttämällä setEmptyPassword(true) -metodia.
Form action 25.10
Login-komponentti voi lähettää lomaketietoja suoraan määriteltyyn URL-osoitteeseen sen sijaan, että se käsittelytään lähetys eventin kautta. Kun toiminta-URL on asetettu, lomake tekee normaali POST-pyynnön käyttäjätunnuksen ja salasanan lomakeparametreina.
Login login = new Login();
login.setAction("/api/auth");
Kun käytät setAction(), lomakkeen lähetys ohittaa LoginSubmitEvent-eventin ja tekee sen sijaan perinteisen HTTP POST -pyynnön määriteltyyn päätepisteeseen. Käyttäjätunnus ja salasana lähetetään lomakeparametreina nimillä "username" ja "password". Mukautetut kentät, joilla on nimi-attribuutti, sisällytetään myös POST-pyyntöön.
Jos toiminta-URL:ia ei ole asetettu, lomakkeen lähetys käsitellään LoginSubmitEvent:in kautta, jolloin voit käsitellä tunnistetietoja ohjelmallisesti palvelinpuolella.
Internationalization (i18n)
Login-komponentin otsikot, kuvastot, nimet ja viestit ovat täysin muokattavissa LoginI18n-luokan avulla. Tämä joustavuus mahdollistaa kirjautumisen käyttöliittymän räätälöinnin erityisten lokalisaatiovaatimusten tai personointiprofiilien mukaisesti.
Näytä koodi
- LoginInternationalizationView.java
Custom fields
Login-komponentissa on useita slotteja, jotka mahdollistavat ylimääräisten kenttien lisäämisen tarpeen mukaan. Mukautetut kentät kerätään automaattisesti lomakkeen lähetyksen yhteydessä ja niihin pääsee käsiksi lähetys eventin tietokartasta.
Seuraavassa kirjautumisessa on lisätty mukautettu kenttä asiakastunnusta varten. Tämä voi auttaa hallitsemaan yrityksiä tai osastoja, joilla on yhteisiä sisältöjä useiden käyttäjien kesken.
Näytä koodi
- LoginCustomFieldsView.java
- loginCustomFields.css
Mukautettujen kenttien on oltava nimettyjä käyttämällä setName()-metodia, jotta ne sisältyvät lomakkeen lähetykseen. Nimi toimii avaimena kentän arvon hakemiseen event.getData()-metodista.
Cancel button
Login-komponentissa on [Cancel] -painike, joka on oletuksena piilotettu. Tämä on erityisen hyödyllistä, kun käyttäjä yrittää päästä rajattuun alueeseen sovelluksessa ja tarvitsee mahdollisuuden palata edelliseen sijaintiin ilman kirjautumisen suorittamista.
Tehdäksesi peruutuspainikkeesta näkyvän, anna sille nimi. Voit myös kuunnella peruutustapahtumia käsitelläksesi peruutusta asianmukaisesti.
Näytä koodi
- LoginCancelButtonView.java
Piilottaaksesi elementin, aseta sen nimi tyhjäksi merkkijonoksi. Tämä mahdollistaa näkyvyyden vaihdon ilman, että komponenttia poistetaan koodistasi.
Password managers
Tämä komponentti toimii selaimessa olevien salasanojen hallintatyökalujen kanssa kirjautumisprosessin yksinkertaistamiseksi. Chromium-pohjaisissa selaimissa se integroituu PasswordCredential -API:in, joka tarjoaa:
- Automaattinen täyttö: Selaimen voi automaattisesti täyttää käyttäjätunnus- ja salasanakentät, jos käyttäjällä on tallennettuja tunnistetietoja sivustolle.
- Tunnistetietojen hallinta: Kirjautumisen jälkeen selain voi kehottaa käyttäjää tallentamaan uusia tunnistetietoja, mikä tekee tulevista kirjautumisista nopeampia ja helpompia.
- Tunnistetietojen valinta: Jos useita tunnistetietoja on tallennettuna, selain voi tarjota käyttäjälle mahdollisuuden valita yksi tallennetuista kokonaisuuksista.