Share
In het vorige deel van deze serie hebben we de aanmeldingspagina gemaakt, de routes opgezet en ook enkele formuliervalidaties gedaan met AngularJS. In deze zelfstudie zullen we de aanmeldingsfunctionaliteit implementeren door AngularJS en de nieuwste versie van Firebase te bedraden. We zullen ook de inlogcode wijzigen volgens de nieuwere Firebase API.
Laten we beginnen met het klonen van het tweede deel van de tutorial vanuit GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part2.git
Nadat u de broncode hebt gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.
cd AngularJS_Firebase_Part2 npm installeren
Zodra de afhankelijkheden zijn geïnstalleerd, start u de server.
npm start
Richt uw browser op http: // localhost: 8000 / app / en laat de applicatie draaien.
Firebase heeft onlangs een nieuwere versie uitgebracht en de FirebaseSimpleLogin-client die we in onze eerste zelfstudie hebben gebruikt om de gebruiker aan te melden, is verouderd en opgenomen in de Firebase-bibliotheek. Dus open app / index.html en verwijder de bestaande Firebase-referenties en voeg de volgende scriptreferenties toe:
Navigeren naar app / home en open home.js. Verwijder de geïnjecteerde $ simplefirebaselogin van de controller en injecteer $ firebaseAuth. Gebruik het om het te maken loginObj zoals getoond.
Accentsconagua
.controller ('HomeCtrl', ['$ scope', '$ firebaseAuth', functie ($ scope, $ firebaseAuth) var firebaseObj = nieuwe Firebase ("https://blistering-heat-2473.firebaseio.com"); var loginObj = $ firebaseAuth (firebaseObj);));De nieuwe Firebase biedt een API-methode genaamd $ authWithPassword om te authenticeren met behulp van e-mailadres en wachtwoord. Vervang de aanmeldmethode door $ authWithPassword in de Aanmelden functie zoals getoond:
$ scope.SignIn = functie (e) e.preventDefault (); var gebruikersnaam = $ scope.user.email; var wachtwoord = $ scope.user.password; loginObj. $ authWithPassword (email: gebruikersnaam, wachtwoord: wachtwoord) .then (functie (gebruiker) // terugroepactie console.log ('Authentication successful');, function (error) // Failure callback console. log ('Verificatiefout');); Sla de wijzigingen op, start de server opnieuw en probeer in te loggen met een geldig e-mailadres en wachtwoord. U zou een succesbericht moeten hebben in de browser console.
We zullen de Firebase createUser-methode gebruiken om een nieuwe gebruiker te maken met een e-mailadres en wachtwoord. Aangezien we de gegevens in onze vorige zelfstudie al hebben gevalideerd, binden we een aanmeldingsfunctieoproep met een klik op de knop Registreren. Voeg de ngClick-richtlijn toe aan de registerknop, zoals weergegeven:
Doe open register.js en in de RegisterCtrl controller, maak een nieuwe functie genaamd inschrijven.
.controller ('RegisterCtrl', ['$ scope', function ($ scope) $ scope.signUp = function () // Aanmelden implementatie zou hier zijn !!;]);In de inschrijven functie zullen we gewoon controleren of ons formulier geldig is:
$ scope.signUp = function () if (! $ scope.regForm. $ invalid) console.log ('Geldige formulierinzending'); ;Voeg de toe ngController richtlijn voor de lichaam tag in register.html.
Start de server opnieuw op en probeer naar de registratiepagina te bladeren. druk de Registreren knop na het invoeren van het e-mailadres en wachtwoord. Als u nu de browserconsole aanvinkt, zou u de Geldige formulierinzending bericht.
Voordat we de Firebase API kunnen gebruiken om een nieuwe gebruiker te maken, moeten we dus injecteren firebase in onze applicatie. Doe open register.js en voeg de firebase module.
angular.module ('myApp.register', ['ngRoute', 'firebase'])Vervolgens moeten we ook de $ firebaseAuth in onze registercontroller.
.controller ('RegisterCtrl', ['$ scope', '$ firebaseAuth', functie ($ scope, $ firebaseAuth) Met onze Firebase-URL maken we een Firebase-instantie en met die Firebase-instantie maken we een $ firebaseAuth voorwerp. We zullen dit gebruiken $ firebaseAuth object om onze API-aanroep te doen. Voeg de volgende code toe in register.js, in de registercontroller.
var firebaseObj = nieuwe Firebase ("https://blistering-heat-2473.firebaseio.com"); var auth = $ firebaseAuth (firebaseObj);We krijgen nu het e-mailadres en wachtwoord van $ scope en bel de createuser Firebase-methode. Dit is het aangepaste inschrijven methode.
$ scope.signUp = function () if (! $ scope.regForm. $ invalid) var email = $ scope.user.email; var wachtwoord = $ scope.user.password; if (email && password) auth. $ createUser (email, password) .then (function () // do things if success console.log ('User creation success');, function (error) // do dingen als fout console.log (fout);); ;Zoals je hierboven kunt zien inschrijven functie, hebben we de $ createuser methode om een nieuwe gebruiker te maken. Bij het maken van succesvolle gebruikers, loggen we het succesbericht in de succes callback van de createuser functie.
Start de server opnieuw op en wijs uw browser naar http: // localhost: 8000 / app / # / register en probeer u te registreren voor een nieuw gebruikersaccount met een e-mailadres en wachtwoord. Controleer uw browserconsole nadat de gebruikersregistratieknop klikt. Als dit lukt, moet u het succesbericht van de gebruiker maken in de browserconsole.
Wijs vervolgens uw browser naar http: // localhost: 8000 / app / # / home en probeer in te loggen met de nieuwe gebruikersreferenties.
Wanneer een gebruikersregistratie succesvol is, moeten we de gebruiker omleiden naar de inlogpagina. Om de gebruiker door te sturen, moeten we de $ locatie AngularJS-service in onze controller injecteren. Dus injecteer $ locatie zoals getoond:
.controller ('RegisterCtrl', ['$ scope', '$ location', '$ firebaseAuth', functie ($ scope, $ location, $ firebaseAuth) Voeg de volgende code toe aan de succes-callback van de auth. $ createuser functie om de gebruiker om te leiden naar de inlogpagina bij succesvolle gebruikersregistratie.
$ Location.path ( '/ home');
Sla de wijzigingen op, start de server opnieuw en probeer u te registreren voor een ander gebruikersaccount. Na succesvolle gebruikersregistratie moet u worden omgeleid naar de inlogpagina.
Gebruikersregistraties kunnen mislukken vanwege een aantal problemen, bijvoorbeeld als het e-mailadres van de gebruiker al bestaat. Dus als er een fout optreedt tijdens de gebruikersregistratie, moeten we dit aan de gebruiker laten zien. We voegen een ander foutbericht toe onder het wachtwoordveld en instellen dat het wordt weergegeven als er een fout optreedt. Hier is de foutmelding:
RegErrorMessage
Zoals te zien in de bovenstaande code, hebben we de ngShow richtlijn om de bovenstaande foutmelding weer te geven wanneer regError is waar. Het bericht wordt weergegeven met behulp van de $ scope veranderlijk regErrorMessage. In de createuser mislukte callback, voeg de volgende code toe om het foutbericht weer te geven.
$ scope.regError = true; $ scope.regErrorMessage = error.message;
Dit is het aangepaste inschrijven functie:
$ scope.signUp = function () if (! $ scope.regForm. $ invalid) var email = $ scope.user.email; var wachtwoord = $ scope.user.password; if (email && password) auth. $ createUser (email, password) .then (function () // do things if success console.log ('Succes van gebruikerscreatie'); $ location.path ('/ home') ;, functie (fout) // dingen doen als fout console.log (error); $ scope.regError = true; $ scope.regErrorMessage = error.message;); ;Sla de wijzigingen op, start de server opnieuw en probeer te registreren met een e-mailadres en wachtwoord dat u al hebt gebruikt. Wanneer u dit doet, zou er een foutmelding op het scherm moeten verschijnen zoals getoond:
Wanneer een gebruiker zich met succes aanmeldt bij de toepassing, leiden we de gebruiker door naar de startpagina. Op de startpagina worden de berichten weergegeven die door de gebruiker zijn gemaakt en er is ook een optie om nieuwe berichten te maken. Dus laten we de startpagina maken.
Navigeer naar de app-map in de toepassingsmap en maak een nieuwe map met de naam Welkom. Deze map bevat sjablonen en bestanden met betrekking tot de startpagina. Binnen in de Welkom map, maak pagina's genaamd welcome.html en welcome.js. Voeg de volgende code toe aan welcome.html.
AngularJS & Firebase Web App AngularJS & Firebase-app
Welkom thuis !!
Binnen welcome.js we zullen de routes voor de applicatie naar de welkomstpagina definiëren. We zullen gebruiken $ routeProvider om een route te maken voor de Welkom uitzicht. Wanneer u een nieuwe route definieert, stellen we een templateUrl welke zou worden gerenderd in de index.html. Samen met dat zullen we ook een instellen controleur (een controller is een logica die een bepaalde weergave bestuurt) voor de nieuw gecreëerde $ scope van de welkomstweergave. Dit is wat welcome.js eindelijk ziet eruit als:
'gebruik strikt'; angular.module ('myApp.welcome', ['ngRoute']) .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ welcome', templateUrl: 'welcome / welcome.html ', controller:' WelcomeCtrl ');]) .controller (' WelcomeCtrl ', [' $ scope ', function ($ scope) ]);Nu, open app / app.js en neem de nieuw toegevoegde module op.
angular.module ('myApp', ['ngRoute', 'myApp.home', 'myApp.register', 'myApp.welcome' // Nieuw toegevoegde module])Open ook app / index.html en voeg de nieuw toegevoegde toe register.js script.
Wanneer een gebruiker zich succesvol aanmeldt, leiden we de gebruiker door naar de welkomstpagina. Doe open app / home / home.js en injecteer de $ locatie in de HomeCtrl.
.controller ('HomeCtrl', ['$ scope', '$ location', '$ firebaseAuth', function ($ scope, $ location, $ firebaseAuth) We zullen gebruiken $ locatie om de gebruiker door te sturen naar de welkomstpagina. In home.js, binnen in de Aanmelden functie, voeg bij succesvol terugbellen de volgende code toe:
$ Location.path ( '/ welcome');
Sla de wijzigingen op, start de server opnieuw op en probeer in te loggen bij de app. Na een succesvolle aanmelding zou u een scherm moeten kunnen zien zoals hieronder getoond:
Laten we nu de e-mail van de ingelogde gebruiker weergeven op de welkomstpagina. Maar er is een probleem. Tijdens het inloggen hebben we het gebruikersdetail in de HomeCtrl, maar wanneer we doorverwijzen naar welkomstweergave, de $ scope van HomeCtrl is niet toegankelijk binnen de WelcomeCtrl. Dus om dit mogelijk te maken, maken we gebruik van AngularJS-services.
Hoekservices zijn substitueerbare objecten die aan elkaar zijn geschakeld met afhankelijkheidsinjectie (DI). U kunt services gebruiken om code te organiseren en te delen in uw app.
Met behulp van services kunnen we gegevens delen tussen verschillende controllers. Dus in home.js we maken onze service genaamd CommonProp.
.service ('CommonProp', functie () var user = "; return getUser: function () return user;, setUser: function (value) user = value;;);In de CommonProp service hebben we een variabele gemaakt met de naam user, waarbij we de e-mail van de ingelogde gebruiker instellen. Omdat de service toegankelijk is vanaf alle controllers, is het mogelijk om gegevens te delen tussen controllers die de service gebruiken CommonProp.
Injecteer de service CommonProp in de HomeCtrl zoals getoond:
.controller ('HomeCtrl', ['$ scope', '$ location', 'CommonProp', '$ firebaseAuth', functie ($ scope, $ location, CommonProp, $ firebaseAuth) Na succesvolle gebruikersauthenticatie stelt u de gebruiker variabele in CommonProp dienst zoals getoond.
CommonProp.setUser (user.password.email);
Injecteer ook de CommonProp service in de WelcomeCtrl in welcome.js.
.controller ('WelcomeCtrl', ['$ scope', 'CommonProp', function ($ scope, CommonProp) In welcome.html pas het welkomstbericht aan met een $ scope variabele zoals getoond.
Welkom thuis Gebruikersnaam !!
Nu in de WelcomeCtrl stel de waarde in van de $ scope.username van CommonProp Diensten getUser methode.
$ scope.username = CommonProp.getUser ();
Sla alle wijzigingen op, start uw browser opnieuw en probeer in te loggen met elk e-mailadres en wachtwoord. Na succesvolle aanmelding zou u uw e-mailadres op de welkomstpagina moeten zien.
In deze zelfstudie hebben we onze zelfstudie voor het ontwikkelen van blogtoepassingen met AngularJS en Firebase naar het volgende niveau gebracht. We implementeerden de aanmeldfunctionaliteit en zagen ook hoe gegevens tussen twee controllers konden worden gedeeld.
In het volgende deel van deze serie zullen we zien hoe u kunt beginnen met het implementeren van de pagina "Blogpost maken".
De broncode van deze tutorial is beschikbaar in GitHub.
Laat het ons weten in de reacties hieronder!
