The following is a simple example of Basic Authentication using
AngularJS, and also keep the user logged in after the page is refreshed.
AngularJS Authentication Service[Service.js]
'use strict';
angular.module('Authentication')
.factory('AuthenticationService',
['Base64', '$cookieStore', '$rootScope', '$timeout',
function (Base64,
$cookieStore, $rootScope, $timeout) {
var service = {};
//fuction
to set Credentials;
service.SetCredentials = function (username, password, EmployeeId) {
var authdata = Base64.encode(username + ':' + password);
$rootScope.globals = {
currentUser: {
username: username,
authdata: authdata,
EmployeeId: EmployeeId
}
};
$cookieStore.put('globals', $rootScope.globals);
};
//fuction
to cleare cookies
service.ClearCredentials = function () {
$rootScope.globals = {};
$cookieStore.remove('globals');
};
return service;
}])
.factory('Base64', function () {
var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
return {
encode: function (input) {
var output = "";
var chr1, chr2, chr3 = "";
var enc1, enc2, enc3, enc4 = "";
var i = 0;
do {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) <<
4) | (chr2 >> 4);
enc3 = ((chr2 & 15)
<< 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
keyStr.charAt(enc1) +
keyStr.charAt(enc2) +
keyStr.charAt(enc3) +
keyStr.charAt(enc4);
chr1 = chr2 = chr3 = "";
enc1 = enc2 = enc3 = enc4 = "";
} while (i < input.length);
return output;
},
decode: function (input) {
var output = "";
var chr1, chr2, chr3 = "";
var enc1, enc2, enc3, enc4 = "";
var i = 0;
// remove all characters that are not A-Z,
a-z, 0-9, +, /, or =
var base64test = /[^A-Za-z0-9\+\/\=]/g;
if (base64test.exec(input)) {
window.alert("There were
invalid base64 characters in the input text.\n" +
"Valid base64
characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
"Expect errors
in decoding.");
}
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
do {
enc1 =
keyStr.indexOf(input.charAt(i++));
enc2 =
keyStr.indexOf(input.charAt(i++));
enc3 =
keyStr.indexOf(input.charAt(i++));
enc4 =
keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) |
(enc2 >> 4);
chr2 = ((enc2 & 15)
<< 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) <<
6) | enc4;
output = output +
String.fromCharCode(chr1);
if (enc3 != 64) {
output = output +
String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output +
String.fromCharCode(chr3);
}
chr1 = chr2 = chr3 = "";
enc1 = enc2 = enc3 = enc4 = "";
} while (i < input.length);
return output;
}
};
});
AngularJS Login Controller in app.js
The app.run() method here is used to initialise and verify the
current user global variable from a cookie to keep the user logged when page reloads or move to other page, it also contains and an event handler to check if the user is
logged in before each route change.
Note : For cookies please use following js and place just below ur angular.js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-cookies.min.js"></script>
angular.module('Authentication', []);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-cookies.min.js"></script>
angular.module('Authentication', []);
//you will need to declare your module with the dependencies []
angular.module('Login', ['ngCookies', 'Authentication'])
.controller('logInCtrl', ['$scope', '$http', '$rootScope', 'AuthenticationService', function ($scope, $http,
$rootScope, AuthenticationService) {
//LogIn
Code
$scope.fnLogin = function (loginId, password) {
if (loginId != undefined
&& password != undefined) {
AuthenticationService.ClearCredentials();
//User is a js class where we define ValidateUser Fuction.
var User = new $.User({ LoginId: loginId, Password:
password, AngularHTTP: $http });
User.ValidateUser(function (e) {
var userInfo = JSON.parse(JSON.stringify(e));
if (userInfo != 0) {
if (userInfo.indexOf("A
network-related") <= 0) {
sessionStorage.EmployeeId = userInfo[0].EmployeeId;
AuthenticationService.SetCredentials($scope.username,
$scope.password, sessionStorage.EmployeeId);
sessionStorage.Pwd =
password;
if
(sessionStorage.EmployeeId != undefined) {
localStorage.setItem('EmployeeId', sessionStorage.EmployeeId);
window.location.href = 'index.html';
}
else {
LOGGEDINUSERID = 0;
sessionStorage.clear();
$scope.loading = 0;
alert('Login Id or
password is incorrect.');
}
}
else {
alert('Server Down.Please
try to login after some time.');
}
$scope.loading = 0;
}
else {
LOGGEDINUSERID = 0;
sessionStorage.clear();
$scope.loading = 0;
alert('Login Id or
password is incorrect.');
}
});
}
};
}])
.run(['$rootScope', '$location', '$cookieStore', '$http', '$state',
function ($rootScope, $location, $cookieStore,
$http, $state) {
// When page refresh it keep user logIn.
$rootScope.globals = $cookieStore.get('globals') || {};
$rootScope.$on('$locationChangeStart', function (event, next, current) {
$rootScope.globals =
$cookieStore.get('globals') || {};
// redirect to login page if user is not logged in
if ($location.path() !== "" && !$rootScope.globals.currentUser)
{
window.location = 'Login.html';
}
else if ($location.path() == "/logOut") {
delete localStorage['EmployeeId'];
sessionStorage.clear();
$rootScope.globals = {};
$rootScope.globals.currentUser
= {};
$cookieStore.remove('globals');
window.location = 'Login.html';
}
else {
sessionStorage.EmployeeId =
$rootScope.globals.currentUser.EmployeeId;
}
});
}]);
No comments:
Post a Comment