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();