[Exercice 48] : S’identifier dans Mysql avec AngularJs/Php et stocker l’id utilisateur

Introductionauth


On a besoin de créer une système d’identification simple pour construire des applications multi-utilisateur avec AngularJs 1.x, Php et Mysql. Il s’agit de Mysql, c’est donc une base relationnelle (et donc pas du noSql). La solution présentée ici serait similaire avec Oracle ou PostGre.

Pour tester l’exercice en ligne, c’est ici.

Se logger avec email : jo@gmail.com et pass: jojo

Ordonnancement Fonctionnel:

1/ Entrée de l’email et du mot de passe
2/ Vérification de la correspondance dans la base de donnée
3/ Si vérification ok, alors Stockage de l’id utilisateur dans l’application, pour personnalisation de l’application en fonction de l’id utilisateur.

Comment faire:


  • Tout d’abord, installer AngularJs et Bootstrap avec Bower dans notre webApp.
  • Créer 1 fichier Html qui comprends le formulaire d’identification qui récupère les 2 variables email et motDePasse
  • Créer 1 Controleur Angular JS dans le fichier Js qui envoie les 2 variables au fichier PHP qui contrôle dans la base de données Mysql si le couple est ok; si il est ok, le login est déclenché, le script PHP renvoie un objet Json comprenant toutes les données utilisateur, et l’ID utilisateur est stocké dans le service stockeIdUtilisateur, de cette façon, l’application sait qui est loggé et affiche des trucs ou pas en fonction de cet id.
  • Créer 1 fichier PHP qui lit Mysql et récupère les données utilisateur si le couple email.Mdp est ok.
  • Créer 1 fichier PHP de connexion à mysql.

Les amélioration possibles : Encryption base 64 du mot de passe (des services existent sur internet pour le faire.)
Le fichier Php retourne le mot de passe c’est pas terrible pour la sécurité, mais peut servir, en tout cas, il faut avoir le mot de passe pour obtenir le mot de passe dans Angular.
On peut récupérer directement l’objet contenant les données de l’utilisateur (data dans la fonction de rappel) dans un objet AngularJs nommé $scope.donneesUtilisateur, de ce fait on peut acceder aux données en tapant par exemple $scope.donneesUtilisateur.nom plus tard dans l’application.

A par ça, pour cet exo, vu qu’on récupère l’id utilisateur, on peut facilement filtrer un modèle de données en fonction de l’id utilisateur, ce qui est super.

Structure de la Base de données:


base

Le code :


Le fichier Html qui affiche le form d’identification, il récupère les 2 variables email et motDePasse en temps réel avec ng-model, lorsqu’on clique sur « Se Logger », la fonction identificationUtilisateur() est exécutée  :


<html ng-app="App">
	<head>
		<meta charset="utf-8" />
		<title>Authentification Mysql avec AngularJs.</title>

		<!-- JQUERY ET BOOTSRAP -->
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
		<!-- Custom styles for this template -->
		<link href="sticky-footer.css" rel="stylesheet">

		<!-- ANGULAR -->
		<script src='bower_components/angular/angular.min.js'></script>

		<!-- UI BOOTSTRAP -->
		<script src='bower_components/angular-bootstrap/ui-bootstrap.min.js'></script>
		<script src='bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js'></script>

	</head>

	<body ng-controller="MainCtrl">
		<div class="container-fluid">
			<nav class="navbar navbar-inverse">
			  <div class="container-fluid">
					<div class="navbar-header">
						<a class="navbar-brand" href="#">Exo 48 Auth</a>
					</div>
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-right">
							<div class="form-group">
								<form>
								</form>
							</div>
						</ul>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav>

			<div class="container">
				<form class="form-signin">
					<h2 class="form-signin-heading">Identifiez vous {{test}}</h2>
					<label for="inputEmail" class="sr-only">Email</label>
					<input ng-model="email" type="email" class="form-control" placeholder="Email" required autofocus>
					<label for="inputPassword" class="sr-only">Mot de Passe</label>
					<input ng-model="motdepasseATester" class="form-control" placeholder="Mot de Passe" required>
					<div class="checkbox">
					  <label>
						<input type="checkbox" value="remember-me"> Se souvenir de moi
					  </label>
					</div>
					<button ng-click="identificationUtilisateur()" class="btn btn-lg btn-primary btn-block" type="submit">S'identifier sur Mysql avec Php.</button>

					<div ng-if="informationLogin" class="alert alert-warning" role="alert"> {{informationLogin}}, bienvenue {{prenom}} {{nom}}, votre id est {{idUtilisateur}}</div>
				</form>

			</div>

			<footer class="footer">
			  <div class="container">
				<p class="text-muted">Place sticky footer content here.</p>
			  </div>
			</footer>

		<!-- FIND DE DIV GLOBALE FLUID BOOSTRAP POUR LES PHONES -->
		</div>
		<script src="app.js"> </script>
	</body>
</html>

Le fichier app.js comprends le controleur Angular.js, le service stockeIdUtilisateur est injecté dans ce controleur afin que l’on puisse l’utiliser ainsi que le service $http qui permet les accès AJAX.
Dans la fonction $scope.identificationUtilisateur , on trouve un accès $http vers le fichier PHP filtrer.php, avec en option les 2 variables entrées par l’uilisateur email et motdepasseATester.
En cas de succès, on récupère toutes les données utilisateurs et on stocke l’id utilisateur qui s’est loggé dans le service approprié pour pourvoir afficher son application personnalisée durant toute la séquence d’utilisation de l’app:

var app = angular.module('App', ['ui.bootstrap'])

app.controller('MainCtrl', function($scope,$http,stockeIdUtilisateur) {

	$scope.identificationUtilisateur = function(){
		/* Test puis validation du couple login-mot de passe */
		$http.post('filtrer.php?action=get_login',
			{
				'email' : $scope.email,
				'motdepasseATester' : $scope.motdepasseATester,
			}
			).success(function (data, status, headers, config) {

				/* Si le Login est raté : */
				if (data == "false"){
					$scope.informationLogin = "Login raté";

				}

				/* Si le Login est réussi : */
				else{
					$scope.informationLogin = "Login réussi" ;
					$scope.nom  = data.nom;
					$scope.prenom  = data.prenom;
					/* console.log(data.id); */
					stockeIdUtilisateur.setIdUtilisateur(data.id); // Stocke l id dans le service angular pour  que l'application sache qui est l'utilisateur
					$scope.idUtilisateur = stockeIdUtilisateur.getIdUtilisateur();
				}
			}).error(function(data, status, headers, config){
				alert('pas de connexion vers le serveur');
			  });
	}
})

/* SERVICE QUI STOCKE L ID  UTILISATEUR APRES LE LOGIN, CEST UTILE POUR UNE APPLICATION MULTI UTILISATEUR DE SAVOIR QUI EST LOGGE*/
.service('stockeIdUtilisateur', function() {
    var Idutilisateur = '';

    return {
        getIdUtilisateur: function() {
            return IdUtilisateur;
        },
        setIdUtilisateur: function(value) {
            IdUtilisateur = value;
        }
    };
})

Le fichier PHP filtrer.php va requêter sur la base Mysql pour savoir si le couple email/motdepasse est valable. Si oui, il imprime un objet Json dans le navigateur contenant toutes les informations de l’utilisateur, qui est récupéré par AngularJs dans la fonction de rappel .success dans l’objet data.
De ce fait, angularJs peut récupèrer le nom de l’utilisateur en tapant data.nom, mais ça c’est seulement si il y a eu succès, dans le cas contraire, c’est un false qui est récupéré par angularJs

<?php

include('connexionConfig.php');
error_reporting(E_ALL ^ E_NOTICE); // important pour ne pas afficher les notice PHP sans cela le script ne marche pas.

/**  Switch Case pour récupérer la l'action demandée par le controleur  Angular **/

switch($_GET['action'])  {
	case 'get_login' :
            get_login();
            break;
}

/*Function qui teste le login: */
 function get_login() {  

	/* Reception des données login a tester en base de donnée */
	$data = json_decode(file_get_contents("php://input"));
    $email = $data->email;
	$motdepasseATester = $data->motdepasseATester;
$email = mysql_real_escape_string($email);
$motdepasseATester = mysql_real_escape_string($motdepasseATester);
	/* Recherche de l'email en base de données. */
	$q = "SELECT * from utilisateurs WHERE utilisateurs.email = '" .$email."'";
	$qry = mysql_query($q);

	 /* Mets le resultat du Login dans un tableau (On recupère l id de l utilisateur). */
	 while($rows = mysql_fetch_array($qry))
		{
		$tab= array(
					"id"      	=> $rows['id'],
					"email"     => $rows['email'],
					"motDePasse"=> $rows['motDePasse'],
					"nom"     	=> $rows['nom'],
					"prenom"	=> $rows['prenom']
					);
		}

	  /*  Teste si le password écrit par l'utilisateur est egal au password dans la base de données. */
        if($motdepasseATester==$tab[motDePasse]){
			/* renvoie les variables id et email et mot de passe de l'utilisateur au script angularJs*/
			print_r(json_encode($tab));
		}

        else {
             /* Afficher false au script angularJs qui va afficher une erreur de login */
            echo('false');
		}
	exit();	

}

?>

Ne pas oublier ce petit fichier connexionConfig.php qui permet la connexion à Mysql :

<?php

  /****** Database Details *********/

    $host      = "localhost";
    $user      = "root";
    $pass      = "secret";
    $database  = "truc48";
    $con       = mysql_connect($host,$user,$pass);

    if (!$con) {
        die('Could not connect: ' . mysql_error());
    }

    //echo 'Connected successfully'; 

    mysql_select_db($database,$con);  

    /*******************************/

?>
Publicités