Grabbing a header from a redirect request to an angular-js application

Question

I have the following situation: I have two applications that I need to make talk to each other: a JSF login page and an angular-js application. I cannot modify the JSF login page. I can modify the angular application.

A user logs in by accessing the JSF login page. A user access the JSF page from a browser and fills the log in form. If successfully authenticated, JSF will produce a token and send that token in a header with a redirect to the index.html that has the angular-js application. How can the angular-js application grab that token from that redirect?

Answer 1

It depends on from what kind of request do you need headers.

In case of xhr , most probably you will do your requests with http service. Its promise gets (in both states: failed and succeed) an object as an argument with a header() method, the one you need. You can get more information here :

The response object has these properties:

• data - {string|Object} – The response body transformed with the transform functions.
• status - {number} – HTTP status code of the response.
• headers - {function([headerName])} – Header getter function.
• config - {Object} – The configuration object that was used to generate the request.
• statusText {string} – HTTP status text of the response.

EDIT

There are difficulties when you need to get headers not from an xhr but from the initial page request, before angular is bootstrapped. Unfortunately javascript can not access them.

One solution could be using cookies instead of header to store the data you need. But in this case you should do some changes on the request emitter side.

The other way, could be handling requests on the server, before html is being provided. Afterwards, you can pass them directly in markup, or remember them somehow, and send an xhr request for them directly from angular. But if you have a simple static page, you won`t be able to achieve it.

Answer 2

I think you have to create a http interceptor that will get the header from the http request, than store it in a cookie or in the local storage.

EDIT : Try this:

module.factory('myTokenInterceptor', ['$cookies', function($cookies) {  
    var myTokenInterceptor =  { 
        'request': function(config) {
        if (config.url=='index.html') 
        {
         var myToken=config.headers['myToken'];
         $cookies.put('myToken', myToken);

        };

    }
    };
    return myTokenInterceptor;
}]);
module.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('myTokenInterceptor');
}]);

"module" can be anyone of your angular app modules. In your controller, you can get the value of the token by using:

var token=$cookies.get('myToken');

Answer 3

I do have similar scenario. Authenticating user by JSF Application login page (App1), and on link click invoking servlet, inside doPost() creating Cookie with token/JWT and adding cookie into responds header and redirecting to Angular JS ( App 2). Angular app reading token from cookie and working well in local environment. but the same not working with real domain name. getting cookie undefined.

Inside doPost() Domain.com/App1

Cookie cookie = new Cookie("AUTH_SESSION", URLEncoder.encode(
                token, "UTF-8"));
        cookie.setDomain(domain.com);
        cookie.setMaxAge(30);
        cookie.setHttpOnly(false);
        cookie.setPath(“/”);
        response.addCookie(cookie);
String redirectUrl = bean.getRedirectServletUrl();
        response.sendRedirect(redirectUrl);

Inside AngularApp Domain.com/app2

angular.module('app').service('CookieInitializer',
  ['$cookies', 'Session', '$location', CookieInitializer]);

function CookieStateInitializer($cookies, Session, $location) {
  var init = function() {
    var cookie = $cookies.get('FS_SESSION'); // undefined when using domain name

both application are differentiated by context path. and proxy added to make both application working with same domain name.

Domain.com/app1
domain.com/app2 --> apphost.com:443