Rekisteröitymisen ja kirjautumisen yhdistäminen
Rakentakaa todennusprosessi kehotteella.
Rekisteröitymisen ja kirjautumisen yhdistäminen on ilmainen Vibe-koodaus-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vibe-koodaus-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vibe-koodaus-kurssilla on yhteensä 4 oppituntia.
Suunnitelmasta koodiksi
Olette valinneet palveluntarjoajan. Nyt liitätte sen sovellukseen. Tämän oppitunnin tavoitteena on toimiva rekisteröitymislomake, kirjautumislomake ja sivujen latausten yli säilyvä istunto.
Rakentakaa kokonaisuus pieninä, testattavina vaiheina. Koko toiminnallisuuden pyytäminen kerralla tuottaa usein sekavaa koodia, jota ette pysty jäljittämään. Yksi osa kerrallaan pitää teidät hallinnassa.
Asentakaa ja määrittäkää
Asentakaa ensin palveluntarjoajan SDK ja alustakaa asiakas avaintenne avulla. Julkinen avain sijoitetaan asiakkaan määrityksiin, kun taas salainen avain pidetään palvelimen puolella ympäristömuuttujissa.
Saattakaa tämä peruskerros toimivaksi ennen käyttöliittymää. Nopea testi — asiakkaan kutsuminen ja nykyisen (tyhjän) käyttäjän tulostaminen — vahvistaa yhteyden toimivuuden.
Install my auth provider's SDK and create a single shared client
instance that reads keys from environment variables. Show me how to
test that it connects.Rakentakaa rekisteröitymislomake
Rekisteröitymiseen tarvitaan sähköpostikenttä, salasanakenttä ja lähetyskäsittelijä, joka kutsuu palveluntarjoajan createUser-metodia. Pitäkää lomake aluksi mahdollisimman yksinkertaisena.
Onnistuneen toiminnon jälkeen palveluntarjoaja palauttaa uuden käyttäjätietueen. Virhetilanteessa — esimerkiksi sähköpostiosoitteen ollessa jo käytössä — se palauttaa virheen, joka on näytettävä käyttäjälle. Älkää jättäkö virheitä huomiotta.
Create a sign-up form with email and password fields that calls my
auth provider's sign-up method, and display any error message it
returns to the user.Vahvistakaa ennen lähettämistä
Havaitkaa virheelliset syötteet ennen kuin ne päätyvät palveluntarjoajalle. Tarkistakaa, näyttääkö sähköpostiosoite kelvolliselta ja täyttääkö salasana vähimmäispituuden. Näin käyttäjä saa palautteen heti ja turhat API-kutsut vähenevät.
Muistakaa, että asiakkaan puolen validointi on tarkoitettu vain käyttökokemusta varten — ei tietoturvaksi. Palveluntarjoajan ja palvelimen on validoitava tiedot uudelleen, koska selain voidaan ohittaa.
Add client-side validation to my sign-up form for email format and a
minimum password length of 8, and remind me where server-side checks
still happen.Vahvistakaa sähköposti
Monet palveluntarjoajat lähettävät vahvistussähköpostin rekisteröitymisen jälkeen. Kunnes käyttäjä napsauttaa linkkiä, tili on vahvistamaton ja sen käyttöoikeudet voivat olla rajoitetut.
Päättäkää käytäntönne: estättekö kirjautumisen vahvistamiseen asti vai sallitteko sen bannerimuistutuksen kera. Kertokaa tästä avustajalle erikseen, sillä oletustoiminta vaihtelee palveluntarjoajittain.
Configure my provider to send a confirmation email on sign-up and
block login until the email is verified. Show users a clear "check
your inbox" message.Rakentakaa kirjautumislomake
Kirjautuminen vastaa rekisteröitymistä: sähköposti, salasana ja käsittelijä, joka kutsuu signIn-metodia. Onnistuneen toiminnon jälkeen palveluntarjoaja myöntää istunnon ja tallentaa sen; virhetilanteessa näytätte viestin "virheelliset tunnistetiedot".
Pitäkää virheilmoitus tarkoituksella yleisluontoisena. Hyökkääjä hyötyy tiedosta, onko sähköpostiosoite olemassa. Yksi yleinen viesti on turvallisempi oletus.
Create a login form that calls my provider's sign-in method, and on
failure show a single generic "invalid email or password" message
regardless of the cause.Säilyttäkää istunto
Kirjautumisen jälkeen istunnon on säilyttävä sivun päivitysten ja uusien välilehtien yli. Palveluntarjoajat hoitavat tämän yleensä evästeen tai local storagen avulla, mutta istunto on ladattava sovelluksen käynnistyessä.
Lisätkää logiikka, joka tarkistaa olemassa olevan istunnon sovelluksen latautuessa, jotta palaavan käyttäjän ei tarvitse kirjautua turhaan uudelleen.
Make my app check for an existing session on startup so a logged-in
user stays signed in after refreshing the page or opening a new tab.Näyttäkää nykyinen käyttäjä
Kun istunto on ladattu, käyttöliittymän on tiedettävä, kuka on kirjautuneena. Pieni jaettu tila — usein context tai store — säilyttää nykyisen käyttäjän ja päivittää koko sovelluksen.
Tämän ansiosta komponentit voivat reagoida tilanteeseen: näyttäkää profiilivalikko kirjautuneelle käyttäjälle tai kirjautumispainike muille. Se muodostaa kirjautuneen käyttökokemuksen selkärangan.
Add shared state that exposes the current logged-in user across my
app, and update the header to show a profile menu when signed in and a
login button when not.Lisätkää uloskirjautuminen
Uloskirjautumispainike kutsuu palveluntarjoajan signOut-metodia, joka tyhjentää istunnon ja evästeen. Jaetun käyttäjätilan pitäisi tämän jälkeen palautua arvoon null, jolloin käyttöliittymä palaa uloskirjautuneen näkymään.
Testatkaa toiminta kunnolla: uloskirjautumisen jälkeen päivityksen pitäisi pitää teidät uloskirjautuneina ja suojatun sivun pitäisi hylätä pyyntö. Painike, joka vain piilottaa käyttöliittymän, on virhe.
Add a logout button that calls sign-out, clears the session, resets
the current-user state to null, and switches the header back to the
logged-out view.Käsitelkää virheet
Oikean maailman tunnistautuminen epäonnistuu ennakoitavilla tavoilla: väärä salasana, vahvistamaton sähköposti, verkkoyhteyden aikakatkaisu tai päällekkäinen rekisteröityminen. Jokainen näistä ansaitsee selkeän ja ystävällisen viestin.
Pyytäkää avustajaa muuntamaan yleiset palveluntarjoajan virhekoodit käyttäjälle näytettäväksi tekstiksi. Hyvä virheenkäsittely erottaa demon tuotteesta, johon ihmiset luottavat.
List the common error codes my auth provider returns for sign-up and
login, and map each one to a clear, friendly message for the user.Testatkaa koko toimintaketju
Ennen kuin jatkatte, käykää koko työnkulku itse läpi: luokaa uusi tili, vahvistakaa sähköpostiosoite, kirjautukaa ulos, kirjautukaa uudelleen sisään, päivittäkää sivu ja kirjautukaa vielä kerran ulos.
Kun käytte työnkulun alusta loppuun, huomaatte puutteet, joita yksikkötestit eivät paljasta — esimerkiksi istunnon, joka ei säily, tai uloskirjautumisen, joka jättää vanhentuneen evästeen. Luottakaa työnkulkuun vasta, kun olette käyneet sen itse läpi.
Pikatarkistus
Kirjautumislomakkeessa on yksi hienovarainen mutta tärkeä valinta.
Kertaus
Liititte todennuksen osaksi sovellusta pienin askelin: määrititte asiakkaan, rakensitte rekisteröitymisen tarkistuksineen ja sähköpostivahvistuksineen, rakensitte kirjautumisen turvallisine virheilmoituksineen, säilytitte istunnon ja asetitte nykyisen käyttäjän saataville.
Lisäsitte uloskirjautumisen, muunsitte virheet selkeiksi teksteiksi ja testasitte koko työnkulun käsin. Seuraavaksi suojaatte sivut ja tiedot, joihin vain kirjautuneilla käyttäjillä pitäisi olla pääsy.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 25
- Oppitunnit
- 100
Usein kysytyt kysymykset
Onko oppitunti ”Rekisteröitymisen ja kirjautumisen yhdistäminen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vibe-koodaus-oppimispolun 3 oppituntia, myös oppitunnin “Rekisteröitymisen ja kirjautumisen yhdistäminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vibe-koodaus-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Rekisteröitymisen ja kirjautumisen yhdistäminen”?
Rakentakaa todennusprosessi kehotteella. Harjoittelet Vibe-koodaus-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vibe-koodaus-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vibe-koodaus-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Rekisteröitymisen ja kirjautumisen yhdistäminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vibe-koodaus-oppitunnilla?
Kyllä. Jokainen Vibe-koodaus-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Miten kirjautuminen toimii
- Todennuspalvelun valinta
- Rekisteröitymisen ja kirjautumisen yhdistäminen
- Sivujen ja tietojen suojaaminen