Using Basic Authentication, Creating AngularJS Services, Holding User Credentials in Angular JS

Categories: Angular Angular JS

Using Basic Authentication, Creating AngularJS Services, Holding User Credentials in Angular JS

 

If the REST services are designed properly to require authentication on all services that contain private data, the AngularJS application user will never have access to private data without providing the proper credentials. Once the user provides valid user credentials, the AngularJS application can store those credentials in a cookie or some other temporary storage. Cookies are good to store user credentials because all modern browsers store cookies mapped to a particular web domain. Cookie access is granted only to the application that created the cookie on that particular domain. Other JavaScript

applications running in the browser only have access to cookies they create, which are associated with their respective domains.

 

Creating AngularJS Services

As I mentioned in Chapter 6, there are three ways to create services in AngularJS. A service can be created with the service function, as shown here:

/* chapter8/ service function */

var blogServices = angular.module('blogServices',

['ngResource']); blogServices.service('BlogPost', […]

or with the provider function:

/* chapter8/ provider function */

var blogServices = angular.module('blogServices',

['ngResource']); blogServices.provider('BlogPost', […]

The third way to create services in AngularJS is with the factory function. This is the method we will use to create AngularJS services in this chapter and throughout this book because it is the most commonly used method. The following code shows how to create a service with the factory function:

/* chapter8/ factory function */

var blogServices = angular.module('blogServices',

['ngResource']); blogServices.factory('BlogPost', […]

 

Holding User Credentials

Now let’s take a look at an AngularJS business logic service designed to save the user’s credentials once the user has authenticated. The service makes use of AngularJS cookies, which we can include in an application by including the angular-cookies.min.js library file. The service has two parameters defined: the username (un) and password (pw).

The two values assigned to the service are used to build the token that is sent in the HTTPS header of each REST service call. The AngularJS service then stores the token and the username as cookies for use later:

/* chapter8/ non-REST business service to set user credentials */

blogBusinessServices.factory('setCreds',

['$cookies', function($cookies) {

return function(un, pw) {

var token = un.concat(":", pw);

$cookies.blogCreds = token;

$cookies.blogUsername = un;

};

}]);

Here’s what a call to the setCreds business logic service to save an authenticated user’s credentials looks like:

/* chapter8/controllers.js excerpt */

setCreds($scope.username, $scope.password);

 

Checking User Credentials

Now let’s look at a business logic service that checks the status of a user’s credentials. If the service returns false, the AngularJS application should redirect the user to the login page. It is also important to remember to save the user’s credentials by making a call to setCreds any time the user’s password is changed:

/* chapter8/ non-REST business logic service to check credentials */

blogBusinessServices.factory('checkCreds',

['$cookies', function($cookies) {

return function() {

var returnVal = false;

var blogCreds = $cookies.blogCreds;

if (blogCreds !== undefined && blogCreds !== "") {

returnVal = true;

}

return returnVal;

};

}]);

The service simply looks for the existence of the blogCreds cookie and returns true if the cookie exists. If a subsequent service call fails with the saved credentials and returns an HTTP 401 error code, it is the job of the AngularJS application to delete the saved cookies and redirect the user to the login page. The following code shows a call to the checkCreds service:

/* chapter8/controllers.js excerpt */

if (checkCreds()){

// do something to continue

}

 

Deleting User Credentials

Our next service deletes the user’s credentials once the user’s session has ended, or when the user’s credentials failed to authenticate during a REST service call. Once the blogCreds cookie is removed, the AngularJS application should redirect the user to the login page:

/* chapter8/ non-REST business logic service to delete credentials */

blogBusinessServices.factory('deleteCreds',

['$cookies', function($cookies) {

return function() {

$cookies.blogCreds = "";

$cookies.blogUsername = "";

};

}]);

Here’s what a call to the deleteCreds service looks like:

/* chapter8/controllers.js excerpt */

deleteCreds();

Top Blogs
Angular and Node JS difference Published at:- The top 5 new features of Angular did you know Published at:- Introduction to AngularJS Published at:- Single-Page Applications and Bootstrapping the Application in Angular JS Published at:- Dependency Injection and AngularJS Routes Published at:- AngularJS Templates, Views, Models, Controllers Published at:- Integrating AngularJS with Other Frameworks Published at:- Testing AngularJS Applications in the IDE Published at:- End-to-End Testing with Protractor Published at:- AngularJS Views and Bootstrap Published at:- Adding a New Blog Controller Published at:- Adding a New Blog Template In Angular JS Published at:- Ways to Communicate with REST Services Published at:- Services and Business Logic and Handling User Authentication in Angular JS Published at:- Using Basic Authentication, Creating AngularJS Services, Holding User Credentials in Angular JS Published at:- AngularJS Security : why we are covering security in a book on AngularJS Published at:- MEAN Cloud and Mobile, Local Deployment and Installing Node.js, npm, and MongoDB in Angular Published at:- Angular 4 Questions - Angular 4 Quiz (MCQ) Published at:- AngularJS MCQ Quiz Questions with Answer Part 2 Published at:- AngularJS MCQ Quiz Questions with Answer Published at:- AngularJS MCQ Quiz Questions with Answer Published at:- Angular Interview Question Set 1 Published at:- Angular Interview Question Set 2 Published at:- Angular Interview Question Set 3 Published at:- Angular Interview Question Set 4 Published at:- Angular Interview Question Set 5 Published at:- Angular Interview Question Set 7 Published at:- Angular Interview Question Set 8 Published at:- Angular Interview Question Set 9 Published at:- Angular Interview Question Set 10 Published at:- Angular Interview Question Set 11 Published at:- Angular Interview Question Set 11 Published at:- Angular Interview Question Set 12 Published at:- Angular Interview Question Set 13 Published at:- Angular Interview Question Set 14 Published at:- Angular Interview Question Set 15 Published at:- React versus Angular What Would it be advisable for You Pick Published at:- 9 Advantages of Angular you really want to be aware if you have any desire to assemble Computerized Items Published at:-
R4R.co.in Team
The content on R4R is created by expert teams.