Authentication Header

Question

I'm trying to get JSON from the server with login and password in the header.

There are no credentials in the request.

var app = angular.module("app", []);

app.factory('AuthService', function() {
  var currentUser;
  var login = 'hello@example.com';
  var password = 'hello';

  return {
    //login: function() {

    //},
    //logout: function() {

    //},
    login: login,
    password: password,
    isLoggedIn: function() {
      return currentUser != null;
    },
    currentUser: function() {
      return currentUser;
    }
  };
});

app.run(['$http', 'AuthService', function($http, AuthService) {
  /* Using btoa to do Base64 */
  $http.defaults.headers.common['Authorization'] = 'Basic ' + btoa(AuthService.login + ':' + AuthService.password);
}]);

app.controller('LabController', function($scope, $http){
  $scope.labs = $http.get('http://127.0.0.1:5000/api/v1.0/labs').error(function(data, status, headers, config) {
    //console.log("Data");
    console.log(data);
    //console.log("Headers");
    //console.log(headers());
  });
  window.labs = $scope.labs;
});

Here is what I get in the request header.

Host: 127.0.0.1:5000
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:28.0) Gecko/20100101 Firefox/28.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: http://localhost:5000
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization
Connection: keep-alive
Cache-Control: max-age=0

Answer 1

I would prefer to write my code this way..

//This is a web service service which includes get and post type calls and also adds the required authentication headers to all the requests
myApp.factory('webService', function ($http,loadingActivity) {
    return{
        postRequest: function (requestUrl, requestData,contentType,successCallbackFn,errorCallbackFn,showLoading) {
            var httpRequest = {method: "POST", url: requestUrl, headers: {'userName':userName, 'password':password, 'Content-Type': contentType}, data: requestData };
            $http(httpRequest).success(function (data, status) {
                    loadingActivity.hide();
                    successCallbackFn(data,status);
            }).error(function (data, status) {
                    loadingActivity.hide();
                    errorCallbackFn(data,status);
            });
        },
        getRequest:function(requestUrl, contentType, successCallbackFn, errorCallbackFn, showLoading){
            var httpRequest = {method: "GET", url: requestUrl, headers: {'userName':userName, 'password':password, 'Content-Type': contentType}};
            $http(httpRequest).success(function (data, status) {
                    loadingActivity.hide();
                    successCallbackFn(data,status);
            }).error(function (data, status) {
                    loadingActivity.hide();
                    errorCallbackFn(data,status);
            });
         }
    }
});

Here you can replace userName and password with your Authorization header. This code is well tested and I am using it in production environment. In your controller simpy inject webService and then you can call this this way..

webService.getRequest(preferences.loginURL+data,"application/json",function(data,status){

},function(data,status){
     showAlert(messages.requestFailedError,"Login Failed!");
},true);

Answer 2

You should do that in the "config" block rather than the "run" block. Change it to something like

    app.config(['$httpProvider', 'AuthService', function($httpProvider, AuthService) {
       /* Using btoa to do Base64 */
       $httpProvider.defaults.headers.common['Authorization'] = 'Basic ' + btoa(AuthService.login + ':' + AuthService.password);
    }]);

Also, try to avoid using the window object. If you need it across controllers, create a service to share the value.