Siirry pääsisältöön

Login

Avaa ChatGPT:ssä
Varjo dwc-login 24.01
Java API

Login-komponentti yksinkertaistaa käyttäjien tunnistautumista tarjoamalla valmiiksi käyttövalmiin kirjautumisdialgin, jossa on käyttäjänimen ja salasanan kentät. Se sisältää ominaisuuksia, kuten syötteen validoinnin, mukautettavat labelit ja viestit, salasanan näkyvyysasetukset sekä tuen lisäkohdistetuille kentille.

Creating a Login dialog​

Luo Login-dialogi instanssoimalla komponentti ja kutsumalla open() sen näyttämiseksi. Dialogissa on oletuksena käyttäjänimen ja salasanan kentät, syötteen validointi ja kirjautumispainike.

Näytä koodi

Login submission​

Kun käyttäjät syöttävät käyttäjänimensä ja salasanansa, Login-komponentti validoi nämä syötteet vaadituiksi kentiksi. Kun validointi onnistuu, lomakkeen lähetystapahtuma laukaistaan, ja syötetyt tunnistetiedot toimitetaan. Useiden lähetyksien estämiseksi [Sign in] -painike poistetaan välittömästi käytöstä.

Seuraavassa on esitelty perus Login-komponentti. Jos käyttäjänimi ja salasana on asetettu molemmat "admin"-arvoksi, kirjautumisdialgi sulkeutuu ja [Logout] -painike ilmestyy. Jos tunnistetiedot eivät täsmää, oletusvirheviesti näytetään.

Näytä koodi

Disabling the [Sign in] Button

Oletuksena Login heti poistaa [Sign in] -painikkeen käytöstä, kun komponentti validoi kirjautumissyötteet oikein, estääkseen useita lähetyksiä. Voit aktivoida [Sign in] -painikkeen uudelleen käyttämällä setEnabled(true)-metodia.

Allowing Empty Passwords

Voit sallia käyttäjien kirjautuvan sisään pelkällä käyttäjänimellä käyttämällä setEmptyPassword(true)-metodia.

Form action 25.10​

Login-komponentti voi lähettää lomaketiedot suoraan määritettyyn URL-osoitteeseen sen sijaan, että käsittelisi lähetyksen kautta lähetys-tapahtumaa. Kun toimint URL-osoite on asetettu, lomake suorittaa tavallisen POST-pyynnön käyttäjänimen ja salasanan ollessa lomakeparametreja.

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

Käytettäessä setAction(), lomakkeen lähetys ohittaa LoginSubmitEvent-tapahtuman ja suorittaa sen sijaan perinteisen HTTP POST -pyynnön määritettyyn päätepisteeseen. Käyttäjänimi ja salasana lähetetään lomakeparametreina nimellä "username" ja "password". Mukautetut kentät, joilla on nimeä attribuutti, sisältyvät myös POST-pyyntöön.

vinkki

Jos toimint URL-osoitetta ei ole asetettu, lomakkeen lähetys käsitellään LoginSubmitEvent-tapahtuman kautta, mikä mahdollistaa tunnistetietojen käsittelyn ohjelmallisesti palvelinpuolella.

Internationalization (i18n)​

Login-komponentin sisällä olevat otsikot, kuvaukset, labelit ja viestit ovat täysin mukautettavissa käyttämällä LoginI18n-luokkaa. Tämä joustavuus mahdollistaa kirjautumisliittymän räätälöinnin tiettyjen lokalisointivaatimusten tai henkilökohtaisten mieltymysten mukaisesti.

Näytä koodi

Custom fields​

Login-komponentti sisältää useita reikiä, jotka antavat mahdollisuuden lisätä ylimääräisiä kenttiä tarvittaessa. Mukautetut kentät kerätään automaattisesti lomakkeen lähetyksen yhteydessä, ja ne voidaan saada käsittelyn avulla lähetyksen tapahtuman tietokartasta.

Seuraavassa kirjautumisessa on lisätty mukautettu kenttä asiakas-ID:lle. Tämä voi auttaa hallitsemaan yrityksiä tai osastoja, joilla on yhteisiä sisältöjä useiden käyttäjien kesken.

Näytä koodi

Name Required

Mukautetuilla kentillä on oltava nimi asetettuna setName()-metodin avulla, jotta ne sisältyvät lomakkeen lähetykseen. Nimi käytetään avaimena kentän arvon hakemiseen event.getData()-kutsussa.

Cancel button​

Login sisältää [Cancel] -painikkeen, joka on oletuksena piilotettu. Tämä on erityisen hyödyllistä, kun käyttäjä yrittää käyttää sovelluksen rajoitettua aluetta ja tarvitsee mahdollisuuden palata edelliseen sijaintiin ilman kirjautumisen viimeistelemistä.

Käytäksesi peruutuspainiketta, tarjoa sille label. Voit myös kuunnella peruutustapahtumia käsitelläksesi peruutuksen asianmukaisesti.

Näytä koodi

Hiding Elements

Piilottaaksesi elementin, aseta sen label tyhjään merkkijonoon. Tämä mahdollistaa näkyvyyden vaihtamisen ilman, että komponenttia poistetaan koodistasi.

Password managers​

Tämä komponentti toimii selainpohjaisten salasana-managerien kanssa kirjautumisprosessin yksinkertaistamiseksi. Chromium-pohjaisissa selaimissa se integroituu PasswordCredential API:han, joka tarjoaa:

  • Automaattinen täyttö: Selain voi automaattisesti täyttää käyttäjänimen ja salasanan kentä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 tallennettu, selain voi tarjota käyttäjälle valinnan, josta valita yksi tallennetuista asetuksista.

Styling​

Loading...