Truc 33 : Gérer l’authentification avec Firebase et AngularJs

FirebaseIntroduction


La base de données Firebase dispose d’un système automatisé de gestion des utilisateurs.

Le service $firebaseAuth s’inclue à un controleur AngularJs, et permet la création, la suppression d’utilisateurs.

Chaque nouvel utilisateur dispose d’un UID créé automatiquement, qui permet à la suite, toujours dans Firebase d’attribuer des droits en lecture ou en écriture.

Ce système est une sur un serveur spécifique de Firebase, ce n’est pas inclu à notre modèle de données géré sur Firebase.

Pour tester sur mon serveur, c’est ici.

Le code.


<html ng-app="sampleApp">
    <head>
        <meta charset="utf8" >
        <title>Une Application partagée de gestion de contacts AngularJs-Firebase </title>
         
        <!-- CHARGEMENT DES LIBRAIRIES -->
         
        <!-- CHARGEMENT LIB ANGULAR -->
        <script type="text/javascript" src="angular-1.3.13/angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="librairies/angular-locale_fr-fr.js"></script>
        <!-- CHARGEMENT LIB FIREBASE -->
        <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
        <!-- AngularFire -->
        <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
        <!-- CSS DE L'APPLICATION -->  
        <link href="truc28.css" media="screen" rel="stylesheet" type="text/css" /> 
         
        <!-- FIN DE CHARGEMENT DES LIBRAIRIES -->
         
        <script>
				 var app = angular.module("sampleApp", ["firebase"]);

			// Factory ré-utilisable qui générer l'instance firebaseAuth
			app.factory("Auth", ["$firebaseAuth",
			  function($firebaseAuth) {
				var ref = new Firebase("https://blinding-heat-8502.firebaseio.com/");
				return $firebaseAuth(ref);
			  }
			]);

			// ON peut ensuite l'utiliser la factory dans le controlleur
			app.controller("SampleCtrl", ["$scope", "Auth",
			  function($scope, Auth) {
				$scope.createUser = function() {
				  $scope.message = null;
				  $scope.error = null;

				  Auth.$createUser({
					email: $scope.email,
					password: $scope.password
				  }).then(function(userData) {
					$scope.message = "User créé avec uid: " + userData.uid;
				  }).catch(function(error) {
					$scope.error = error;
				  });
				};

				$scope.removeUser = function() {
				  $scope.message = null;
				  $scope.error = null;

				  Auth.$removeUser({
					email: $scope.email,
					password: $scope.password
				  }).then(function() {
					$scope.message = "Utilisateur supprimé";
				  }).catch(function(error) {
					$scope.error = error;
				  });
				};
			  }
			]);
			
			
			<!-- AUTHENTIFICATION ANONYME -->
			app.controller("AuthController", ["$scope", "$firebaseAuth",
				function($scope, $firebaseAuth) {
					$scope.login = function() {
						$scope.authData = null;
						$scope.error = null;

						auth.$authAnonymously().then(function(authData) {
							$scope.authData = authData;
						}).catch(function(error) {
							$scope.error = error;
						});
					};
				}
			]);
			
			<!-- AUTHENTIFICATION PAR MOT DE PASSE -->
			app.controller("AuthControllerPwd", ["$scope", "$firebaseAuth",
				function($scope, $firebaseAuth) {


					$scope.login = function() {
					  $scope.authData = null;
					  $scope.error = null;

					  $scope.authObj.$authWithPassword({
						  	email: $scope.email,
							password: $scope.password
						}).then(function(authData) {
						  console.log("Logged in as:", authData.uid);
						  $scope.message2 = "Logged in as:", authData.uid;
						  $scope.log = authData.uid;
						  
						}).catch(function(error) {
						  console.error("Authentication failed:", error);
						  $scope.error = error;
						});
					};
				  }
			]);
		</script>
    </head>
  
<!-- La page HTML générale -->
<body ng-controller="SampleCtrl">
 
 <h2>Créer un Utilisateur authentifié :</h2><br>
 <div ng-app="sampleApp" ng-controller="SampleCtrl">
	Email: 		<input ng-model="email" type="text">
	Password: 	<input ng-model="password" type="text"><br><br>
	<button ng-click="createUser()">Créer un Utilisateur	</button>
	<button ng-click="removeUser()">Supprimer un Utilisateur</button>
	<p ng-if="message">Message: <strong>{{ message }}</strong></p>
	<p ng-if="error">Erreur: <strong>{{ error }}</strong></p>
</div>


<h2>S'identifier anonymement</h2><br>
<div  ng-app="sampleApp" ng-controller="AuthController">
  <button ng-click="login()">S'identifier anonymement</button>
	<p ng-if="authData">	Utilisateur Loggé: <strong>{{ authData.uid }}</strong></p>
  <p ng-if="error">Erreur: <strong>{{ error }}</strong></p>
</div>

<h2>S'identifier Avec un Email-Password</h2><br>
<div  ng-app="sampleApp" ng-controller="AuthControllerPwd">
	Email: <input ng-model="email" type="text">
	Password: <input ng-model="password" type="text">
	<button ng-click="login()">Login </button>
	<p ng-if="log">Logged in user: <strong>{{ log }}</strong></p>
	<p ng-if="error">Error: <strong>{{ error }}</strong></p>
</div>


</body>
</html>

<style>
	div{
		-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
		-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
		box-shadow:inset 0px 1px 0px 0px #cf866c;
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
		background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
		background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
		background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
		background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
		background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0);
		background-color:#d0451b;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		border-radius:3px;
		border:1px solid #942911;
		display:inline-block;
		cursor:pointer;
		color:#ffffff;
		font-family:Arial;
		font-size:13px;
		padding:6px 24px;
		text-decoration:none;
		text-shadow:0px 1px 0px #854629;

	}
</style>
    
    
Publicités