Angularjs Session Management with Login Authentication using PHP
In this Post We Will Explain About is Angularjs Session Management with Login Authentication using PHP With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to User authentication using AngularJS, PHP, MySQLExample
In this post we will show you Best way to implement How To Handle User Authentication With AngularJS, hear for Simple Angularjs login and logout script using php session and databasewith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
Implementing Authentication in Angular Applications
index.html
<title>Your Demo</title> <a href="http://live/app/js/jquery.min.js">http://live/app/js/jquery.min.js</a> <a href="http://live/app/js/bootstrap.min.js">http://live/app/js/bootstrap.min.js</a> <div></div> <a href="http://lib/angular/angular.js">http://lib/angular/angular.js</a> <a href="http://lib/angular/angular-route.js">http://lib/angular/angular-route.js</a> <a href="http://live/app/js/Chart.min.js">http://live/app/js/Chart.min.js</a> <a href="http://live/app/js/angular-chart.js">http://live/app/js/angular-chart.js</a> <a href="http://live/app/js/app.js">http://live/app/js/app.js</a> <a href="http://live/app/js/directives/loginDrc.js">http://live/app/js/directives/loginDrc.js</a> <a href="http://live/app/js/controllers/loginCtrl.js">http://live/app/js/controllers/loginCtrl.js</a> <a href="http://live/app/js/controllers/homeCtrl.js">http://live/app/js/controllers/homeCtrl.js</a> <a href="http://live/app/js/services/loginService.js">http://live/app/js/services/loginService.js</a> <a href="http://live/app/js/services/sessionService.js">http://live/app/js/services/sessionService.js</a>
live_check_session.php
live_destroy_session.php
employer.php
mail=='[email protected]' && $employer->pass=='123456789') session_start(); $_SESSION['empid']=uniqid('ang_'); print $_SESSION['empid']; ?>
homeCtrl.js
'use strict';
app.controller('homeCtrl', ['$scope','$http','loginService', function($scope,$http,loginService){
$scope.txt='infinityknow.com Page Home';
$scope.logout=function(){
loginService.logout();
}
}])
loginCtrl.js
'use strict';
app.controller('loginCtrl', ['$scope','loginService', function ($scope,loginService) {
$scope.msgtxt='infinityknow.com Login';
$scope.login=function(data){
loginService.login(data,$scope); //infinityknow.com call login service
};
}]);
app.js
'use strict';
var app= angular.module('liveApp', ['ngRoute','chart.js']);
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'];
var routesloginpermission=['/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');
});
}
if( routesloginpermission.indexOf($location.path()) !=-1)
{
var connected=loginService.islogged();
connected.then(function(msg){
if(msg.data) $location.path('/home');
});
}
});
});
loginService.js
'use strict';
app.factory('loginService',function($http, $location, sessionService){
return{
login:function(data,scope){
var $promise=$http.post('data/employer.php',data); //send data to employer.php
$promise.then(function(msg){
var empid=msg.data;
if(empid){
sessionService.set('empid',empid);
$location.path('/home');
}
else {
scope.msgtxt='infinityknow.com incorrect information';
$location.path('/login');
}
});
},
logout:function(){
sessionService.destroy('empid');
$location.path('/login');
},
islogged:function(){
var $checkSessionServer=$http.post('data/live_check_session.php');
return $checkSessionServer;
}
}
});
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/live_destroy_session.php');
return sessionStorage.removeItem(key);
}
};
}])
loginDirective.js
'use strict';
app.directive('loginDirective',function(){
return{
templateUrl:'partials/tpl/login.tpl.html'
}
});
login.html
<div class="wrap">Call directive login form</div>
home.html
<div class="container">
<h2 class="text-center title-text">Your Demo</h2>
</div>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<!-- <a class="navbar-brand" href="#">yourDemo</a> -->
</div>
<ul class="nav navbar-nav">
<li class="active"><a title="Dashboard">Dashboard</a></li>
<li><a title="Add Customer">Add Customer</a></li>
<li><a title="Search">Search</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a title="Logout">
<img src="partials/logout-button-icon.png" alt="logout" />
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="row">
<div class="chart_box">
<h4 class="text-center">Demo Chart</h4>
</div>
</div>
</div>
<div class="col-sm-8">
<div></div>
<ul id="dataSearchContent">
<li id="quickLinkItem1623">
<div class="card card0 ablue-grey adarken-1">
<div class="card-content awhite-text">
<div><span class="json-data">1623</span>
</div>
<div class="json-data" id="data-website_link1623"></div><span class="card-title black-text"><span class="json-data" id="data-title1623"><a class="search_page_popup_check myLink-parent" href="void(0)">{{glink.title}}</a></span></span>
<p id="data-description1623" class="json-data">{{glink.description}}</p><span class="json-data" id="data-is_quicklink1623">0</span>
</p>
</div>
<div class="card-action"><a class="btn btn-success">Edit</a> <a class="btn btn-danger">DELETE</a></div>
</div>
</li>
</ul>
</div>
<div class="col-sm-1">
</div>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close">×</button>
<h4 class="modal-title">Add Customers</h4>
</div>
<div class="modal-body">
<form name="contactform" method="post" action="" class="form-horizontal" role="form">
<div class="form-group">
<label for="website_link" class="col-lg-2 control-label">Website Link</label>
<div class="col-lg-10">
</div>
</div>
<div class="form-group">
<label for="title" class="col-lg-2 control-label">Title</label>
<div class="col-lg-10">
</div>
</div>
<div class="form-group">
<label for="description" class="col-lg-2 control-label">Descriptions</label>
<div class="col-lg-10">
<textarea class="form-control" rows="4" id="description" name="description"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">
Add Customer
</button>
</div>
</div>
</form>
<p style="padding: 15px;margin: 0">{{ resultMessage }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close">×</button>
<h4 class="modal-title">{{datamodal}}</h4>
</div>
<div class="modal-body">
<p>{{modelbody}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">Lukk</button>
</div>
</div>
</div>
</div> <!--model popup-->
login.tpl.html
<div class="bs-example">
<form role="form" name="form1">
<div class="form-group">
<!-- <p>Welcome : <span>{{employer.mail}}</span></p> -->
<label for="exampleInputEmail1">Mail</label>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
</div>
<button class="btn btn-default" type="submit">Submit</button>
<p>{{msgtxt}}</p>
</form>
</div>
I hope you have Got What is Simple Angularjs login and logout script using php session and database And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.
