Dans la partie précédente de cette série, nous avons créé la page d'inscription, configuré les itinéraires et également procédé à des validations de formulaires à l'aide d'AngularJS. Dans ce didacticiel, nous allons implémenter la fonctionnalité d’inscription en connectant AngularJS et la dernière version de Firebase. Nous modifierons également le code de connexion conformément à la nouvelle API Firebase..

Commencer

Commençons par cloner la deuxième partie du didacticiel de GitHub.

clone de git https://github.com/jay3dec/AngularJS_Firebase_Part2.git

Après avoir cloné le code source, accédez au répertoire du projet et installez les dépendances requises..

cd AngularJS_Firebase_Part2 npm installer

Une fois les dépendances installées, démarrez le serveur.

npm start

Pointez votre navigateur sur http: // localhost: 8000 / app / et vous devriez avoir l'application en cours d'exécution.

Références de script Firebase

Firebase a récemment publié une version plus récente et le client FirebaseSimpleLogin que nous avons utilisé dans notre premier tutoriel pour connecter l’utilisateur est devenu obsolète et inclus dans la bibliothèque principale de Firebase. Alors ouvre-toi app / index.html et supprimez les références Firebase existantes et incluez les références de script suivantes:

Modification de l'implémentation de connexion

Aller vers app / home et ouvrir home.js. Retirer l'injecté $ simplefirebaselogin du contrôleur et injecter $ firebaseAuth. Utilisez-le pour créer le loginObj comme montré.

.controller ('HomeCtrl', ['$ scope', '$ firebaseAuth', fonction ($ scope, $ firebaseAuth) var firebaseObj = new Firebase ("https://blistering-heat-2473.firebaseio.com"); var loginObj = $ firebaseAuth (firebaseObj);));

La nouvelle Firebase fournit une méthode API appelée $ authWithPassword s'authentifier avec une adresse email et un mot de passe. Remplacez la méthode de connexion par $ authWithPassword dans le Se connecter fonction comme indiqué:

$ scope.SignIn = fonction (e) e.preventDefault (); Nom d'utilisateur var = $ scope.user.email; var password = $ scope.user.password; loginObj. $ authWithPassword (email: nom d'utilisateur, mot de passe: mot de passe) .then (fonction (utilisateur) // Rappel réussi console.log ('Authentification réussie');, fonction (erreur) // Console de rappel d'échec. log ('Échec de l'authentification');); 

Enregistrez les modifications, redémarrez le serveur et essayez de vous connecter en utilisant une adresse e-mail et un mot de passe valides. Vous devriez avoir un message de réussite dans la console du navigateur..

Mise en œuvre de la fonctionnalité d'inscription

Nous allons utiliser la méthode FireBase createUser pour créer un nouvel utilisateur à l'aide d'une adresse électronique et d'un mot de passe. Comme nous avons déjà validé les données de notre précédent tutoriel, nous allons lier un appel de fonction d’inscription en cliquant sur le bouton d’enregistrement. Ajoutez la directive ngClick au bouton de registre comme indiqué:

registre

S'ouvrir register.js et à l'intérieur du RegisterCtrl contrôleur, créez une nouvelle fonction appelée s'inscrire. 

.controller ('RegisterCtrl', ['$ scope', fonction ($ scope) $ scope.signUp = function () // L'implémentation d'inscription serait ici !!;]);

dans le s'inscrire fonction nous allons simplement vérifier si notre formulaire est valide:

$ scope.signUp = function () if (! $ scope.regForm. $ invalid) console.log ('Envoi de formulaire valide'); ;

Ajouter le ngController directive à la corps faire register.html.

Redémarrez le serveur et essayez d’accéder à la page d’enregistrement. appuyez sur la registre bouton après avoir entré l'adresse e-mail et le mot de passe. Maintenant, si vous vérifiez la console du navigateur, vous devriez voir le Envoi de formulaire valide message.

Donc, avant d'appeler l'API Firebase pour créer un nouvel utilisateur, nous devons injecter base de feu dans notre application. S'ouvrir register.js et ajoutez le base de feu module.

angular.module ('monApp.register', ['ngRoute', 'firebase'])

Ensuite, nous devrons également injecter le $ firebaseAuth dans notre contrôleur de registre.

.contrôleur ('RegisterCtrl', ['$ scope', '$ firebaseAuth', fonction ($ scope, $ firebaseAuth) 

En utilisant notre URL Firebase, nous allons créer une instance Firebase et en utilisant cette instance Firebase, nous allons créer un $ firebaseAuth objet. Nous allons utiliser cette $ firebaseAuth objet pour faire notre appel API. Ajoutez le code suivant dans register.js, à l'intérieur du contrôleur de registre.

var firebaseObj = new Firebase ("https://blistering-heat-2473.firebaseio.com"); var auth = $ firebaseAuth (firebaseObj);

Maintenant, nous allons obtenir l'adresse e-mail et le mot de passe de $ scope et appelez le Créer un utilisateur Méthode Firebase. Voici le modifié s'inscrire méthode.

$ scope.signUp = function () if (! $ scope.regForm. $ invalid) var email = $ scope.user.email; var password = $ scope.user.password; if (email && password) auth. $ createUser (email, mot de passe) .then (function () // faire les choses en cas de succès console.log ('succès de la création d'utilisateur');, function (error) // do choses si échec console.log (erreur);); ;

Comme vous pouvez le voir ci-dessus s'inscrire fonction, nous avons appelé le $ createUser méthode pour créer un nouvel utilisateur. Lors de la création réussie d’un utilisateur, nous consignerons le message de réussite dans le rappel de succès du Créer un utilisateur une fonction. 

Redémarrez le serveur et pointez votre navigateur sur http: // localhost: 8000 / app / # / register et essayez de vous inscrire pour un nouveau compte utilisateur en utilisant une adresse email et un mot de passe. Vérifiez la console de votre navigateur après avoir cliqué sur le bouton d'enregistrement de l'utilisateur. En cas de succès, le message de réussite de la création d’utilisateur doit apparaître dans la console du navigateur.. 

Ensuite, pointez votre navigateur sur http: // localhost: 8000 / app / # / home et essayez de vous connecter en utilisant les informations d'identification du nouvel utilisateur..

Gestion des rappels d'enregistrement utilisateur

Créer un rappel de réussite utilisateur

Lorsque l'enregistrement d'un utilisateur réussit, nous devons le rediriger vers la page de connexion. Afin de rediriger l'utilisateur, nous devrons injecter le service AngularJS $ location dans notre contrôleur. Alors, injecter $ location comme montré:

.contrôleur ('RegisterCtrl', ['$ scope', '$ location', '$ firebaseAuth', fonction ($ scope, $ location, $ firebaseAuth) 

Ajoutez le code suivant au rappel de succès du auth. $ createUser fonction permettant de rediriger l'utilisateur vers la page de connexion lors d'un enregistrement réussi.

$ location.path ('/ home');

Enregistrez les modifications, redémarrez le serveur et essayez d’enregistrer un autre compte utilisateur. En cas d’enregistrement réussi de l’utilisateur, vous devriez être redirigé vers la page de connexion..

Créer un rappel d'échec utilisateur

Les enregistrements d'utilisateurs peuvent échouer à cause de certains problèmes, par exemple si l'adresse électronique de l'utilisateur existe déjà. Ainsi, lorsqu'une erreur survient lors de l'enregistrement de l'utilisateur, nous devons la montrer à l'utilisateur. Nous ajouterons un autre message d'erreur sous le champ du mot de passe et définirons son affichage pour indiquer le moment où une erreur se produit. Voici le message d'erreur:

regErrorMessage

Comme on le voit dans le code ci-dessus, nous avons utilisé le ngShow directive pour afficher le message d'erreur ci-dessus lorsque regError est vrai. Le message est affiché en utilisant le $ scope variable regErrorMessage. dans le Créer un utilisateur callback d'échec, ajoutez le code suivant pour afficher le message d'erreur.

$ scope.regError = true; $ scope.regErrorMessage = error.message;

Voici le modifié s'inscrire une fonction:

$ scope.signUp = function () if (! $ scope.regForm. $ invalid) var email = $ scope.user.email; var password = $ scope.user.password; if (email && password) auth. $ createUser (email, mot de passe) .then (function () // faire les choses si succès console.log ('Réussite de la création d'utilisateur'); $ location.path ('/ home') ;, fonction (erreur) // faire les choses si échec console.log (erreur); $ scope.regError = true; $ scope.regErrorMessage = error.message;); ;

Enregistrez les modifications, redémarrez le serveur et essayez de vous enregistrer en utilisant une adresse e-mail et un mot de passe déjà utilisés. Ce faisant, vous devriez avoir un message d'erreur affiché à l'écran, comme indiqué:

Création de l'écran d'accueil

Lorsqu'un utilisateur se connecte avec succès à l'application, nous le redirigeons vers la page d'accueil. La page d'accueil affiche les messages créés par l'utilisateur et offre également la possibilité de créer de nouveaux messages. Alors créons la page d'accueil.

Naviguez jusqu'au dossier de l'application dans le répertoire de l'application et créez un nouveau dossier appelé Bienvenue. Ce dossier contiendra des modèles et des fichiers liés à la page d'accueil. À l'intérieur de Bienvenue dossier, créer des pages appelées bienvenue.html et bienvenue.js. Ajoutez le code suivant à bienvenue.html.

          
 
  
 
 
 
 
AngularJS & Firebase App
 
 
Bienvenue à la maison !!
 
   

À l'intérieur bienvenue.js nous définirons les itinéraires de l'application sur la page d'accueil. Nous allons utiliser $ routeProvider créer un itinéraire pour le Bienvenue vue. Lors de la définition d'un nouvel itinéraire, nous définirons un templateUrl qui serait rendu dans le index.html. Parallèlement à cela, nous allons également définir un manette (un contrôleur est une logique qui contrôle une vue particulière) pour le nouveau $ scope de la vue de bienvenue. Voici ce que bienvenue.js enfin ressemble à:

'use strict'; angular.module ('monApp.welcome', ['ngRoute']) .config (['$ routeProvider', fonction ($ routeProvider)) $ routeProvider.when ('/ welcome', templateUrl: 'welcome / welcome.html ', contrôleur:' WelcomeCtrl ');]) .controller (' WelcomeCtrl ', [' $ scope ', fonction ($ scope) ]);

Maintenant, ouvrez app / app.js et inclure le module nouvellement ajouté.

angular.module ('myApp', ['ngRoute', 'monApp.home', 'monApp.register', 'monApp.welcome' // module nouvellement ajouté])

Aussi, ouvrez app / index.html et inclure les nouvellement ajoutés register.js scénario.

Lorsqu'un utilisateur se connecte avec succès, nous le redirigeons vers la page d'accueil. S'ouvrir app / home / home.js et injecter le $ location dans le HomeCtrl. 

.contrôleur ('HomeCtrl', ['$ scope', '$ location', '$ firebaseAuth', fonction ($ scope, $ location, $ firebaseAuth) 

Nous allons utiliser $ location pour rediriger l'utilisateur vers la page d'accueil. Dans home.js, à l'intérieur de Se connecter function, en cas de rappel de succès, ajoutez le code suivant:

$ location.path ('/ welcome');

Enregistrez les modifications, redémarrez le serveur et essayez de vous connecter à l'application. En cas de connexion réussie, vous devriez pouvoir voir un écran comme indiqué ci-dessous:

Accéder à $ scope entre contrôleurs 

Maintenant, affichons l'email de l'utilisateur connecté dans la page d'accueil. Mais il y a un problème. Lors de la connexion, nous avons le détail de l'utilisateur dans le HomeCtrl, mais quand on redirige pour accueillir la vue, le $ scope de HomeCtrl n'est pas accessible à l'intérieur du BienvenueCtrl. Donc, pour rendre cela possible, nous allons utiliser les services AngularJS.

Les services angulaires sont des objets substituables qui sont câblés ensemble à l'aide d'une injection de dépendance (DI). Vous pouvez utiliser des services pour organiser et partager du code dans votre application..

En utilisant des services, nous pouvons partager des données entre différents contrôleurs. Donc dans home.js nous allons créer notre service appelé CommonProp.

.service ('CommonProp', function () var user = "; return getUser: function () return user;, setUser: function (valeur) user = valeur;;);

dans le CommonProp service, nous avons créé une variable appelée utilisateur, dans laquelle nous allons définir le courrier électronique de l'utilisateur connecté. Étant donné que le service est accessible à partir de tous les contrôleurs, il serait possible de partager des données entre les contrôleurs utilisant le service. CommonProp.

Injecter le service CommonProp dans le HomeCtrl comme montré:

.contrôleur ('HomeCtrl', ['$ scope', '$ location', 'CommonProp', '$ firebaseAuth', fonction ($ scope, $ location, CommonProp, $ firebaseAuth) 

Si l’authentification de l’utilisateur est réussie, définissez le utilisateur variable dans CommonProp service comme indiqué.

CommonProp.setUser (user.password.email);

En outre, injecter le CommonProp service dans le BienvenueCtrl dans bienvenue.js.

.contrôleur ('WelcomeCtrl', ['$ scope', 'CommonProp', function ($ scope, CommonProp) 

Dans bienvenue.html modifier le message de bienvenue pour inclure un $ scope variable comme indiqué.

Bienvenue à la maison Nom d'utilisateur !!

Maintenant dans le BienvenueCtrl définir la valeur de la $ scope.username de CommonProp prestations de service getUser méthode.

$ scope.username = CommonProp.getUser ();

Enregistrez toutes les modifications, redémarrez votre navigateur et essayez de vous connecter avec une adresse électronique ou un mot de passe. Si la connexion est réussie, vous devriez voir votre adresse email sur la page d'accueil.

Envelopper

Dans ce tutoriel, nous avons poussé notre tutoriel de développement d’applications de blog avec AngularJS et Firebase au niveau supérieur. Nous avons implémenté la fonctionnalité d'inscription et vu comment partager des données entre deux contrôleurs..

Dans la prochaine partie de cette série, nous verrons comment commencer à implémenter la page "Créer un article de blog".. 

Le code source de ce tutoriel est disponible dans GitHub.

Faites-nous savoir vos pensées dans les commentaires ci-dessous!