July 16, 2018
Angular Authentication API PHP MySQLi
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>