Skip to content

InfinityKnow

Menu
  • Home
  • Technology
  • VueJs
  • AngularJs
  • PHP
  • MySQL
  • Laravel
  • Asp.Net
  • CLOUD
    • Managed servers
      • Dedicated servers
      • Cloud data storage
      • Cloud servers Vs VPS
      • Benefits managed host
      • Managed dedicated server
    • Elastic Cloud Servers
      • Cloud private business
      • Cloud server technology
      • Dedicated server hosting
    • Support dedicated server
      • Cheap dedicated server
      • Low cost dedicated server
      • Cloud messages solutions
    • Dedicated hosting solutions
    • IBM Cloud Dedicated Servers
    • DEDICATED SERVERS
      • Managed hosting
      • Dedicated hosting managed server
        • Dedicated hosting server
        • Dedicated hosting service
        • Dedicated hosting services
        • Cloud Dedicated server
      • Dedicated hosting
      • Advantage dedicated server
      • Dedicated servers website
      • Instant dedicated hosting
      • WEB HOSTING
        • Account web hosting
          • Managed hosting solution
          • Managed hosting WordPress
          • Shared web hosting
          • VPS Vs dedicated server
        • Dedicated web server
          • Dedicated hosting server web
          • Dedicated server web hosting
          • Dedicated web hosting
          • Dedicated web server hosting
          • Differences shared hosting
          • Web hosting opportunities
        • Web hosting company
          • Web hosting really
          • Web hosting windows
          • Which website hosting
        • Choose the web hosting
          • Windows Reseller Hosting
        • Energy web hosting
        • Hosting wordpress managed
  • Articles
    • Attorney
    • California
    • cloud
    • Credit
    • Donate
    • Finance
  • Education
  • Jobs
  • Make Money
  • Contact Us
  • About Us
  • Privacy
  • Site Map
July 16, 2018
HomeTechnologyAngularJsAngular Authentication API PHP MySQLi

Angular Authentication API PHP MySQLi

By admin AngularJs, Laravel, MySQL, PHP, Technology  0 Comments

Angular Authentication API PHP MySQLi

Today, We want to share with you Angular Authentication API PHP MySQLi.
In this post we will show you Authentication API using AngularJS with PHP, hear for Implementing Authentication in Angular Applications we will give you demo and example for implement.
In this post, we will learn about User authentication using AngularJS, PHP, MySQL with an example.

Files and Folders Structure in angularjs

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.Authentication API using AngularJS with PHP

authentication using AngularJS with PHP Example

app
--data
--->check_session.php
--->destroy_session.php
--->user.php
--js
--->controllers/homeCtrl.js
--->controllers/loginCtrl.js
--->directives/loginDrc.js
--->services/loginService.js
--->services/sessionService.js
--->app.js
--lib
-->lib/angular/angular.js
-->lib/angular/angular-route.js
--->
--->
--partials
--->tpl/login.tpl.html
--->home.html
--->login.html
index.html

Source Code : angularjs login with session authentication example

app/data/check_session.php

 
	session_start(); // start session using PHP
	if( isset($_SESSION['uid']) ) print 'user authentified success'; //data condition check

app/data/destroy_session.php

	session_id('uid'); //uid set
	session_start();  // start session
	session_destroy(); //destroy session using php
	session_commit();  // save data

app/data/user.php

	$user=json_decode(file_get_contents('php://input'));  //here all get user from data and check 
	if($user->mail=='[email protected]' && $user->pass=='98256') //static data check here using PHP
		session_start(); // session start using PHP
		$_SESSION['uid']=uniqid('ang_'); // here set session uid
		print $_SESSION['uid']; // result response data

app/js Folder And Files

app/js/controllers/homeCtrl.js

'use strict';
//init homeCtrl controller with check data
app.controller('homeCtrl', ['$scope','loginService', function($scope,loginService){
	$scope.txt='Page Home'; // Page Name
	$scope.logout=function(){ // call function click to logout
		loginService.logout(); // all service destroy
	}
}])

app/js/controllers/loginCtrl.js

'use strict';

app.controller('loginCtrl', ['$scope','loginService', function ($scope,loginService) { // call loginCtrl function
	$scope.msgtxt=''; //int message
	$scope.login=function(data){ // pass a login user information data
		loginService.login(data,$scope); //function call to login service data
	};
}]);

app/js/directives/loginDrc.js

'use strict';
app.directive('loginDirective',function(){ // call login directive function
	return{
		templateUrl:'partials/tpl/login.tpl.html' // 
	}

});

app/js/services/loginService.js

'use strict';
app.factory('loginService',function($http, $location, sessionService){
	//javascript function return server side value
	return{
		//call differnt function(login,logout and islogged,etc..)
		login:function(data,scope){
			var $promise=$http.post('data/user.php',data); //send server side data to user.php
			$promise.then(function(msg){ //result store
				var uid=msg.data; // get only session id and set
				if(uid){
					//console.log("get session id = "+ uid);
					sessionService.set('uid',uid); //set uid in apps
					$location.path('/home'); // with redirect Home page 
				}	       
				else  {
					//console.log("get session id = "+ uid);
					scope.msgtxt='wrong incorrect information data';
					$location.path('/login');// with redirect Home page 
				}				   
			});
		},
		logout:function(){ // init and logout function call
			sessionService.destroy('uid'); // uniq session id destroy
			$location.path('/login'); //with redirect Login or index page 
		},
		islogged:function(){ //every api check login or not
			var $checkSessionServer=$http.post('data/check_session.php');// send server side request
			return $checkSessionServer;
		
		}
	}

});

app/js/services/sessionService.js

'use strict';
//init factory
app.factory('sessionService', ['$http', function($http){ // call a sessionService
	return{
		set:function(key,value){ // set data using js
			return sessionStorage.setItem(key,value); //return key with value
		},
		get:function(key){ // get data using js
			return sessionStorage.getItem(key); //return key
		},
		destroy:function(key){ // destroy data using js
			$http.post('data/destroy_session.php'); //send server side request
			return sessionStorage.removeItem(key); //return data (key)
		}
	};
}])

app/js/app.js

'use strict';
var app= angular.module('infinityknowApp', ['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 router and session check
app.run(function($rootScope, $location, loginService){
	var routespermission=['/home']; // check authentication or not
	$rootScope.$on('$routeChangeStart', function(){ // one by one page check
		if( routespermission.indexOf($location.path()) !=-1)
		{
			//in true set session condition check
			var connected=loginService.islogged();
			connected.then(function(msg){
				//redirect login page
				if(!msg.data) $location.path('/login');
			});
		}
	});
});

partials Folders and files

app/partials/tpl/login.tpl.html

<div class="bs1-example1">
<form role="form" name="aform123">
  <div class="focus">
  	<p>Hell Dear Welcome in infinityknow.com : <span>{{user.mail}}</span></p>
    <label for="exampleInputEmail1">Write Your  Mail</label>
    <input type="text" placeholder="Write Your  Mail"  ng-model="user.mail" required>
  </div>
  <div class="focus">
    <label for="exampleInputPassword1">Write Your Password</label>
    <input type="password" placeholder="Write Your Password" id="exampleInputPassword1"  ng-model="user.pass" required>
  </div>
  <button  type="submit" ng-click="login(user)" ng-disabled="form1.$invalid">Submit</button>
  <p>{{msgtxt}}</p>
</form>
</div>

app/partials/home.html

<div class="center wrap">
	<p>{{txt}}</p> // display message with call a function
	<a href="#" ng-click="logout()">Logout</a>
</div>

app/partials/login.html

<div class="wrap center" login-directive>Simple Form call in directive</div>

app/index.html

<html lang="en" ng-app="infinityknowApp">
<head>
  <title> Simple Login, Signup and Logout with AngularJS Application</title>
</head>
<body>
  <div ng-view></div>
  <!-- All including JS-->
  <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>

Post Views: 594
READ :  vuejs Table Searching Sorting and Pagination
Tags:angular 4 crud example with php mysql, angular 6, angular 6 crud application demo, angular 6 crud example php, angular 6 php mysql login example, angular 6 php rest api tutorial, angular 6 with php backend example, angular 6 with php tutorial pdf, simple session with angular 6 and php

Related Posts

Restful API insert update delete using angularjs and php

Restful API insert update delete using angularjs and php

Laravel Autocomplete search from Database MySQL PHP

Laravel Autocomplete search from Database MySQL PHP

AngularJs Events Directives With Example

AngularJs Events Directives With Example

Add a Comment

Cancel reply

Your email address will not be published. Required fields are marked *

Most Viewed Posts

  • Kadva Patel-patidar Surnames List
  • Angular 6 Restful Http Post and Get Web Api Calls
  • Angular 6 CRUD Operations Application Tutorials
  • Angular 6 CRUD Operations with PHP and MySQLi
  • Mortgage Loan Online Interest Rates Eligibility & Calculator Payment
  • Top 10 Advanced Angular 6 Interview Questions Answers

Recent Posts

  • Angular UI Grid Table Example Steps
  • AngularJS Router Nested views with Nested states
  • Angular form ng submit Directive
  • vuejs time-range-picker Example – time range picker using Vuejs – timerangepicker
  • Angular Form Validation ngMessages
  • AngularJS Controllers Inheritance – angular inherits Example

InfinityKnow

  • About Us
  • Contact Us
  • Privacy Policy
  • Site Map
  • Terms
InfinityKnow Copyright © 2019.
Theme by Infinityknowledge. Back to Top ↑