User authentication using AngularJS, PHP, MySQL
1) D:\xampp\htdocs\app
->app
->css
->app.css
->data
->check_session.php
->destroy_session.php
->user.php
->img
->js
->controllers
->homeCtrl.js
->loginCtrl.js
->directives
->loginDrc.js
->services
->loginService.js
->sessionService.js
->app.js
->lib
->angular
->angular.js
->angular.min.js
->angular-route.js
->angular-resource.js
->partials
->tpl
->login.tpl.html
->home.html
->login.html
->index.html
Source code
-----------
index.html
----------
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div ng-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/directives/loginDrc.js"></script>
<script src="js/controllers/loginCtrl.js"></script>
<script src="js/controllers/homeCtrl.js"></script>
<script src="js/services/loginService.js"></script>
<script src="js/services/sessionService.js"></script>
</body>
</html>
----------
partials/login.html
----------
<div class="wrap" login-directive>Call directive login form</div>
----------
partials/home.html
----------
<div class="wrap">
<p>{{txt}}</p>
<a href="" ng-click="logout()">Logout</a>
</div>
-----------
partials/tpl/login.tpl.html
-----------
<div class="bs-example">
<form role="form" name="form1">
<div class="form-group">
<p>Welcome : <span>{{user.mail}}</span></p>
<label for="exampleInputEmail1">Mail</label>
<input type="text" placeholder="Enter name"
class="form-control" ng-model="user.mail" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" placeholder="Password" id="exampleInputPassword1" class="form-control" ng-model="user.pass" required>
</div>
<button class="btn btn-default" type="submit" ng-click="login(user)" ng-disabled="form1.$invalid">Submit</button>
<p>{{msgtxt}}</p>
</form>
</div>
----------
data/check_session.php
----------
<?php
session_start();
if( isset($_SESSION['uid']) ) print 'authentified';
?>
----------
data/destroy_session.php
----------
<?php
session_start();
if( isset($_SESSION['uid']) ) print 'authentified';
?>
----------
data/user.php
----------
<?php
$user=json_decode(file_get_contents('php://input')); //get user from
if($user->mail=='elgaliamine@gmail.com' && $user->pass=='1234')
session_start();
$_SESSION['uid']=uniqid('ang_');
print $_SESSION['uid'];
?>
---------
js/app.js
---------
'use strict';
// Declare app level module which depends on filters, and services
var app= angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'loginCtrl'});
$routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'homeCtrl'});
$routeProvider.otherwise({redirectTo: '/login'});
}]);
app.run(function($rootScope, $location, loginService){
var routespermission=['/home']; //route that require login
$rootScope.$on('$routeChangeStart', function(){
if( routespermission.indexOf($location.path()) !=-1)
{
var connected=loginService.islogged();
connected.then(function(msg){
if(!msg.data) $location.path('/login');
});
}
});
});
-----------
js/controllers/homeCtrl.js
-----------
'use strict';
app.controller('homeCtrl', ['$scope','loginService', function($scope,loginService){
$scope.txt='Page Home';
$scope.logout=function(){
loginService.logout();
}
}])
-----------
js/controllers/loginCtrl.js
-----------
'use strict';
app.controller('loginCtrl', ['$scope','loginService', function ($scope,loginService) {
$scope.msgtxt='';
$scope.login=function(data){
loginService.login(data,$scope); //call login service
};
}]);
-----------
js/directives/loginCtrl.js
-----------
'use strict';
app.directive('loginDirective',function(){
return{
templateUrl:'partials/tpl/login.tpl.html'
}
});
-----------
js/services/loginService.js
-----------
'use strict';
app.factory('loginService',function($http, $location, sessionService){
return{
login:function(data,scope){
var $promise=$http.post('data/user.php',data); //send data to user.php
$promise.then(function(msg){
var uid=msg.data;
if(uid){
//scope.msgtxt='Correct information';
sessionService.set('uid',uid);
$location.path('/home');
}
else {
scope.msgtxt='incorrect information';
$location.path('/login');
}
});
},
logout:function(){
sessionService.destroy('uid');
$location.path('/login');
},
islogged:function(){
var $checkSessionServer=$http.post('data/check_session.php');
return $checkSessionServer;
/*
if(sessionService.get('user')) return true;
else return false;
*/
}
}
});
-----------
js/services/sessionService.js
-----------
'use strict';
app.factory('sessionService', ['$http', function($http){
return{
set:function(key,value){
return sessionStorage.setItem(key,value);
},
get:function(key){
return sessionStorage.getItem(key);
},
destroy:function(key){
$http.post('data/destroy_session.php');
return sessionStorage.removeItem(key);
}
};
}])
->app
->css
->app.css
->data
->check_session.php
->destroy_session.php
->user.php
->img
->js
->controllers
->homeCtrl.js
->loginCtrl.js
->directives
->loginDrc.js
->services
->loginService.js
->sessionService.js
->app.js
->lib
->angular
->angular.js
->angular.min.js
->angular-route.js
->angular-resource.js
->partials
->tpl
->login.tpl.html
->home.html
->login.html
->index.html
Source code
-----------
index.html
----------
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div ng-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/directives/loginDrc.js"></script>
<script src="js/controllers/loginCtrl.js"></script>
<script src="js/controllers/homeCtrl.js"></script>
<script src="js/services/loginService.js"></script>
<script src="js/services/sessionService.js"></script>
</body>
</html>
----------
partials/login.html
----------
<div class="wrap" login-directive>Call directive login form</div>
----------
partials/home.html
----------
<div class="wrap">
<p>{{txt}}</p>
<a href="" ng-click="logout()">Logout</a>
</div>
-----------
partials/tpl/login.tpl.html
-----------
<div class="bs-example">
<form role="form" name="form1">
<div class="form-group">
<p>Welcome : <span>{{user.mail}}</span></p>
<label for="exampleInputEmail1">Mail</label>
<input type="text" placeholder="Enter name"
class="form-control" ng-model="user.mail" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" placeholder="Password" id="exampleInputPassword1" class="form-control" ng-model="user.pass" required>
</div>
<button class="btn btn-default" type="submit" ng-click="login(user)" ng-disabled="form1.$invalid">Submit</button>
<p>{{msgtxt}}</p>
</form>
</div>
----------
data/check_session.php
----------
<?php
session_start();
if( isset($_SESSION['uid']) ) print 'authentified';
?>
----------
data/destroy_session.php
----------
<?php
session_start();
if( isset($_SESSION['uid']) ) print 'authentified';
?>
----------
data/user.php
----------
<?php
$user=json_decode(file_get_contents('php://input')); //get user from
if($user->mail=='elgaliamine@gmail.com' && $user->pass=='1234')
session_start();
$_SESSION['uid']=uniqid('ang_');
print $_SESSION['uid'];
?>
---------
js/app.js
---------
'use strict';
// Declare app level module which depends on filters, and services
var app= angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'loginCtrl'});
$routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'homeCtrl'});
$routeProvider.otherwise({redirectTo: '/login'});
}]);
app.run(function($rootScope, $location, loginService){
var routespermission=['/home']; //route that require login
$rootScope.$on('$routeChangeStart', function(){
if( routespermission.indexOf($location.path()) !=-1)
{
var connected=loginService.islogged();
connected.then(function(msg){
if(!msg.data) $location.path('/login');
});
}
});
});
-----------
js/controllers/homeCtrl.js
-----------
'use strict';
app.controller('homeCtrl', ['$scope','loginService', function($scope,loginService){
$scope.txt='Page Home';
$scope.logout=function(){
loginService.logout();
}
}])
-----------
js/controllers/loginCtrl.js
-----------
'use strict';
app.controller('loginCtrl', ['$scope','loginService', function ($scope,loginService) {
$scope.msgtxt='';
$scope.login=function(data){
loginService.login(data,$scope); //call login service
};
}]);
-----------
js/directives/loginCtrl.js
-----------
'use strict';
app.directive('loginDirective',function(){
return{
templateUrl:'partials/tpl/login.tpl.html'
}
});
-----------
js/services/loginService.js
-----------
'use strict';
app.factory('loginService',function($http, $location, sessionService){
return{
login:function(data,scope){
var $promise=$http.post('data/user.php',data); //send data to user.php
$promise.then(function(msg){
var uid=msg.data;
if(uid){
//scope.msgtxt='Correct information';
sessionService.set('uid',uid);
$location.path('/home');
}
else {
scope.msgtxt='incorrect information';
$location.path('/login');
}
});
},
logout:function(){
sessionService.destroy('uid');
$location.path('/login');
},
islogged:function(){
var $checkSessionServer=$http.post('data/check_session.php');
return $checkSessionServer;
/*
if(sessionService.get('user')) return true;
else return false;
*/
}
}
});
-----------
js/services/sessionService.js
-----------
'use strict';
app.factory('sessionService', ['$http', function($http){
return{
set:function(key,value){
return sessionStorage.setItem(key,value);
},
get:function(key){
return sessionStorage.getItem(key);
},
destroy:function(key){
$http.post('data/destroy_session.php');
return sessionStorage.removeItem(key);
}
};
}])
