June 28, 2018
Angularjs Session Management with Login Authentication using PHP
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
<!doctype html> <html lang="en" ng-app="liveApp"> <head> <meta charset="utf-8"> <title>Your Demo</title> <link rel="stylesheet" href="css/app.css"/> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <script src="live/app/js/jquery.min.js"></script> <script src="live/app/js/bootstrap.min.js"></script> </head> <body> <div ng-view></div> <script src="lib/angular/angular.js"></script> <script src="lib/angular/angular-route.js"></script> <script src="live/app/js/Chart.min.js"></script> <script src="live/app/js/angular-chart.js"></script> <script src="live/app/js/app.js"></script> <script src="live/app/js/directives/loginDrc.js"></script> <script src="live/app/js/controllers/loginCtrl.js"></script> <script src="live/app/js/controllers/homeCtrl.js"></script> <script src="live/app/js/services/loginService.js"></script> <script src="live/app/js/services/sessionService.js"></script> </body> </html>
live_check_session.php
<?php session_start(); if( isset($_SESSION['empid']) ) print 'authentified'; ?>
live_destroy_session.php
<?php
session_id('empid');
session_start();
session_destroy();
session_commit();
?>
employer.php
<?php
$employer=json_decode(file_get_contents('php://input')); //get employer from
if($employer->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" login-directive>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" ng-click="dashboard_cl()"><a title="Dashboard">Dashboard</a></li>
<li><a title="Add Customer" data-toggle="modal" data-target="#myModal">Add Customer</a></li>
<li><a title="Search" ng-click="search_bar()">Search</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a ng-click="logout()" 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">
<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels" chart-options="options">
</canvas>
<h4 class="text-center">Demo Chart</h4>
</div>
</div>
</div>
<div class="col-sm-8">
<div ng-show="searchbar"><input type="text" ng-model="searchquery" class="form-control" placeholder="Search Web Link"/></div>
<ul aid="staggered-test" id="dataSearchContent" style="opacity: 1;">
<li ng-repeat="glink in jsondata_link | filter:searchquery" id="quickLinkItem1623" data-table="jo_quicklinks">
<div class="card card0 ablue-grey adarken-1">
<div class="card-content awhite-text">
<div style="display:none"><span class="json-data" data-field="id">1623</span>
</div>
<div style="display:none" class="json-data" data-field="website_link" id="data-website_link1623"></div><span class="card-title black-text"><span class="json-data" data-field="title" id="data-title1623"><a class="search_page_popup_check myLink-parent" onclick="partner_popup_check()" href="javascript:void(0)">{{glink.title}}</a></span></span>
<p id="data-description1623" class="json-data" data-field="description">{{glink.description}}</p><span style="display:none" class="json-data" data-field="is_quicklink" id="data-is_quicklink1623">0</span>
</p>
</div>
<div class="card-action" ng-hide="edit_remove"><a class="btn btn-success">Edit</a> <a class="btn btn-danger" ng-click="linkDelete(glink.id)">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" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Customers</h4>
</div>
<div class="modal-body">
<form ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form">
<div class="form-group" ng-class="{ 'has-error': contactform.website_link.$invalid && submitted }">
<label for="website_link" class="col-lg-2 control-label">Website Link</label>
<div class="col-lg-10">
<input ng-model="formData.website_link" type="text" class="form-control" id="website_link" name="website_link" placeholder="Website Link" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.title.$invalid && submitted }">
<label for="title" class="col-lg-2 control-label">Title</label>
<div class="col-lg-10">
<input ng-model="formData.title" type="text" class="form-control" id="title" name="title" placeholder="Title" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.description.$invalid && submitted }">
<label for="description" class="col-lg-2 control-label">Descriptions</label>
<div class="col-lg-10">
<textarea ng-model="formData.description" class="form-control" rows="4" id="description" name="description" placeholder="Your Descriptions..." required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default" ng-disabled="submitButtonDisabled">
Add Customer
</button>
</div>
</div>
</form>
<p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">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" data-dismiss="modal">×</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" data-dismiss="modal">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>
<input type="text" placeholder="Enter name" class="form-control" ng-model="employer.mail" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" placeholder="Password" id="exampleInputPassword1" class="form-control" ng-model="employer.pass" required>
</div>
<button class="btn btn-default" type="submit" ng-click="login(employer)" ng-disabled="form1.$invalid">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.
AngularJS ui router nested views – AngularJS nested directive controller example
AngularJS Simple Line Charts using JSON
