Share
I den forrige delen av denne serien opprettet vi oppmeldingssiden, satt opp ruter, og gjorde også noen formularvalideringer ved hjelp av AngularJS. I denne opplæringen implementerer vi påloggingsfunksjonaliteten ved å koble opp AngularJS og den nyeste versjonen av Firebase. Vi vil også endre påloggings-koden som i nyere Firebase API.
La oss begynne med å klone den andre delen av opplæringen fra GitHub.
git klon https://github.com/jay3dec/AngularJS_Firebase_Part2.git
Etter kloning av kildekoden, naviger til prosjektkatalogen og installer de nødvendige avhengighetene.
cd AngularJS_Firebase_Part2 npm installere
Når avhengighetene er installert, start serveren.
npm start
Pek nettleseren din til http: // localhost: 8000 / app / og du bør ha programmet kjørt.
Firebase har nylig lansert en nyere versjon, og FirebaseSimpleLogin-klienten som vi brukte i vår første opplæring for å logge på brukeren, er blitt utdatert og inkludert i hovedbrandbasebiblioteket. Så åpne opp app / index.html og fjern eksisterende Firebase referanser og inkludere følgende skript referanser:
Navigere til app / home og åpne opp home.js. Fjern injeksjonen $ simplefirebaselogin fra kontrolleren og injiser $ firebaseAuth. Bruk den til å lage loginObj som vist.
Accentsconagua
.controller ('HomeCtrl', ['$ scope', '$ firebaseAuth', funksjon ($ omfang, $ firebaseAuth) var firebaseObj = new Firebase ("https://blistering-heat-2473.firebaseio.com"); loginObj = $ firebaseAuth (firebaseObj);));Den nye Firebase gir en API-metode som kalles $ authWithPassword å autentisere ved hjelp av e-postadresse og passord. Erstatt innloggingsmetoden med $ authWithPassword i Logg inn fungere som vist:
$ scope.SignIn = funksjon (e) e.preventDefault (); var brukernavn = $ scope.user.email; var passord = $ scope.user.password; loginObj. $ authWithPassword (email: brukernavn, passord: passord) .then (funksjon (bruker) // Suksess tilbakeringing console.log ('Autentisering vellykket');, funksjon (feil) // Feil tilbakeringing konsoll. logg ('Autentiseringsfeil');); Lagre endringene, start serveren på nytt, og prøv å logge på med en gyldig e-postadresse og et passord. Du bør ha en suksessmelding i nettleserkonsollen.
Vi bruker Firebase createUser-metoden for å opprette en ny bruker ved hjelp av en e-postadresse og et passord. Siden vi allerede har validert dataene i vår tidligere opplæring, binder vi et påloggingsfunksjonssamtale på klikk på registerknappen. Legg til ngClick-direktivet til registerknappen som vist:
Åpne opp register.js og inne i RegisterCtrl kontrolleren, opprett en ny funksjon kalt melde deg på.
.controller ('RegisterCtrl', ['$ scope', funksjon ($ scope) $ scope.signUp = function () // Sign up implementering vil være her !!;]);I melde deg på funksjon, vi vil bare sjekke om skjemaet er gyldig:
$ scope.signUp = function () if (! $ scope.regForm. $ ugyldig) console.log ('Gyldig skjema innsending'); ;Legg til ngController direktiv til kropp tag inn register.html.
Start serveren på nytt og prøv å bla til registreringssiden. trykk Registrere knappen etter at du har skrevet inn e-postadressen og passordet. Nå, hvis du sjekker nettleserkonsollen, bør du se Gyldig form innsending budskap.
Så, før du kaller Firebase API for å opprette en ny bruker, må vi injisere Fire inn i vår søknad. Åpne opp register.js og legg til Fire modul.
angular.module ('myApp.register', ['ngRoute', 'firebase'])Deretter må vi også injisere $ firebaseAuth inn i vår registerkontroller.
.controller ('RegisterCtrl', ['$ scope', '$ firebaseAuth', funksjon ($ omfang, $ firebaseAuth) Ved å bruke vår Firebase URL vil vi opprette en Firebase-forekomst og bruke den Firebase-forekomsten, vil vi opprette en $ firebaseAuth gjenstand. Vi bruker dette $ firebaseAuth motsette seg å gjøre API-anropet vårt. Legg til følgende kode i register.js, inne i registerkontrollen.
var firebaseObj = ny Firebase ("https://blistering-heat-2473.firebaseio.com"); var auth = $ firebaseAuth (firebaseObj);Nå får vi e-postadressen og passordet fra $ omfang og ring til Opprett bruker Firebase metode. Her er den endrede melde deg på metode.
$ scope.signUp = function () if (! $ scope.regForm. $ ugyldig) var email = $ scope.user.email; var passord = $ scope.user.password; hvis (email && passord) auth. $ createUser (e-post, passord) .then (funksjon () // gjør ting hvis suksess console.log ('Opprettelse suksess');, funksjon ting hvis feil konsoll.logg (feil);); ;Som du kan se i det ovennevnte melde deg på funksjon, vi har kalt $ createUser Metode for å opprette en ny bruker. Når det gjelder vellykket brukeropprettelse, logger vi suksessmeldingen i suksess tilbakeringing av Opprett bruker funksjon.
Start serveren på nytt og pek nettleseren din til http: // localhost: 8000 / app / # / register og prøv å registrere deg for en ny brukerkonto med en e-postadresse og et passord. Sjekk nettleserkonsollen etter at brukerregistreringsknappen klikker. Hvis det lykkes, bør du ha meldingen om å opprette suksess i brukeren i nettleserkonsollen.
Deretter pek webleseren din til http: // localhost: 8000 / app / # / home og prøv å logge på ved hjelp av de nye brukerens legitimasjonsbeskrivelser.
Når en brukerregistrering er vellykket, må vi omdirigere brukeren til påloggingssiden. For å omdirigere brukeren må vi injisere $ location AngularJS-tjenesten i vår kontroller. Så injiser $ location som vist:
.kontroller ('RegisterCtrl', ['$ scope', '$ location', '$ firebaseAuth', funksjon ($ omfang, $ plassering, $ firebaseAuth) Legg til følgende kode for suksess tilbakeringing av auth. $ createUser funksjon for å omdirigere brukeren til påloggingssiden på vellykket brukerregistrering.
$ Location.path ( '/ home');
Lagre endringene, start serveren på nytt, og prøv å registrere deg for en annen brukerkonto. Ved vellykket brukerregistrering, bør du bli omdirigert til påloggingssiden.
Brukerregistreringer kan mislykkes på grunn av enkelte problemer, for eksempel hvis brukerens e-postadresse allerede eksisterer. Så når det oppstår en feil under brukerregistreringen, må vi vise den til brukeren. Vi legger til en annen feilmelding under passordfeltet og angir visningen for å vise når det oppstår en feil. Her er feilmeldingen:
RegErrorMessage
Som vist i koden ovenfor har vi brukt ngShow direktiv for å vise feilmeldingen ovenfor når regError er sant. Meldingen vises ved hjelp av $ omfang variabel regErrorMessage. I Opprett bruker Feil tilbakeringing, legg til følgende kode for å vise feilmeldingen.
$ scope.regError = true; $ scope.regErrorMessage = error.message;
Her er den endrede melde deg på funksjon:
$ scope.signUp = function () if (! $ scope.regForm. $ ugyldig) var email = $ scope.user.email; var passord = $ scope.user.password; hvis (email && passord) auth. $ createUser (e-post, passord) .then (funksjon () // gjør ting hvis suksess console.log ('Opprettelse suksess for brukeren'); $ location.path ('/ home') ;, funksjon (feil) // gjør ting hvis feil konsoll.logg (feil); $ scope.regError = true; $ scope.regErrorMessage = error.message;); ;Lagre endringene, start serveren på nytt, og prøv å registrere ved hjelp av en e-postadresse og et passord du allerede har brukt. Når du gjør dette, bør du ha en feilmelding som vises på skjermen som vist:
Når en bruker lykkes med å logge inn i programmet, vil vi omdirigere brukeren til hjemmesiden. Hjemmesiden vil vise innleggene som er opprettet av brukeren, og det vil også ha mulighet til å opprette nye innlegg. Så la oss lage hjemmesiden.
Naviger til appmappen i programkatalogen og opprett en ny mappe som heter Velkommen. Denne mappen vil inneholde maler og filer relatert til hjemmesiden. Inne i Velkommen mappe, opprett sider som kalles velkommen.html og welcome.js. Legg til følgende kode til velkommen.html.
AngularJS & Firebase Web App AngularJS & Firebase App
Velkommen hjem !!
Innsiden welcome.js Vi vil definere ruter for søknaden til velkomstsiden. Vi skal bruke $ routeProvider å opprette en rute for Velkommen utsikt. Når vi definerer en ny rute, setter vi inn en templateUrl som ville bli gjengitt i index.html. Sammen med det, vil vi også sette en kontrolleren (en kontroller er en logikk som styrer en bestemt visning) for den nyopprettede $ omfang av velkomstutsikten. Her er hva welcome.js endelig ser ut som:
'bruk streng'; angular.module ('myApp.welcome', ['ngRoute']) .config (['$ routeProvider', funksjon ($ routeProvider) $ routeProvider.when ('/ welcome', templateUrl: 'welcome / welcome.html ', kontroller:' WelcomeCtrl ');] .controller (' WelcomeCtrl ', [' $ scope ', funksjon ($ scope) ]);Nå, åpne opp app / app.js og inkludere den nylig lagt modulen.
angular.module ('myApp', ['ngRoute', 'myApp.home', 'myApp.register', 'myApp.welcome' // Nytilkoblet modul])Også åpne opp app / index.html og inkludere den nylig lagt til register.js manus.
Når en bruker er vellykket inn, vil vi omdirigere brukeren til velkomstsiden. Åpne opp app / home / home.js og injiser $ location inn i det HomeCtrl.
.kontroller ('HomeCtrl', ['$ scope', '$ location', '$ firebaseAuth', funksjon ($ omfang, $ plassering, $ firebaseAuth) Vi skal bruke $ location for å omdirigere brukeren til velkomstsiden. I home.js, inne i Logg inn funksjon, på suksess tilbakeringing legg til følgende kode:
$ Location.path ( '/ welcome');
Lagre endringene, start serveren på nytt, og prøv å logge på appen. Ved vellykket pålogging bør du kunne se en skjerm som vist nedenfor:
La oss nå vise e-posten til den innloggede brukeren på velkomstsiden. Men det er et problem. Under innlogging har vi brukerdetaljer i HomeCtrl, men når vi omdirigerer til velkommen visningen, $ omfang av HomeCtrl er ikke tilgjengelig inne i WelcomeCtrl. For å gjøre dette mulig skal vi benytte oss av AngularJS-tjenester.
Vinkeltjenester er substituerbare gjenstander som er koblet sammen ved hjelp av avhengighetsinjeksjon (DI). Du kan bruke tjenester for å organisere og dele kode over appen din.
Ved hjelp av tjenester kan vi dele data på tvers av ulike kontroller. Så i home.js vi lager vår tjeneste som kalles CommonProp.
.service ('CommonProp', funksjon () var user = "; return getUser: function () retur bruker;, setUser: funksjon (verdi) user = value;;);I CommonProp service vi har opprettet en variabel som heter bruker, der vi skal angi e-posten til den innloggede brukeren. Siden tjenesten kan nås fra alle kontroller, vil det være mulig å dele data mellom kontrollører ved hjelp av tjenesten CommonProp.
Injiser tjenesten CommonProp i HomeCtrl som vist:
.kontroller ('HomeCtrl', '$ scope', '$ location', 'CommonProp', '$ firebaseAuth', funksjon ($ scope, $ location, CommonProp, $ firebaseAuth) Ved vellykket brukerautentisering setter du bruker variabel i CommonProp service som vist.
CommonProp.setUser (user.password.email);
Også injiser CommonProp service i WelcomeCtrl i welcome.js.
.controller ('WelcomeCtrl', ['$ scope', 'CommonProp', funksjon ($ scope, CommonProp) I velkommen.html endre velkomstmeldingen for å inkludere en $ omfang variabel som vist.
Velkommen hjem Brukernavn !!
Nå i WelcomeCtrl sett verdien av $ scope.username fra CommonProp tjenester getUser metode.
$ scope.username = CommonProp.getUser ();
Lagre alle endringene, start nettleseren din, og prøv å logge inn ved hjelp av e-postadresse og passord. Ved vellykket innlogging bør du se din e-postadresse på velkomstsiden.
I denne opplæringen tok vi vår utviklingsopplæring for bloggen ved hjelp av AngularJS og Firebase til neste nivå. Vi implementerte registreringsfunksjonaliteten og så også hvordan du deler data mellom to kontrollere.
I neste del av denne serien ser vi hvordan du kommer i gang med å implementere siden "Opprett blogginnlegg".
Kildekode fra denne opplæringen er tilgjengelig i GitHub.
Gi oss beskjed om dine tanker i kommentarene nedenfor!
