CODEWITHSUNDEEP
symfonyangular-http-interceptors
IleNea
IleNea

Reputation: 609

Token based authentication http interceptor

I would like your opinion in order to achieve something. I have an api and I want to restrictionate the access of the user. But short story long, in action login controller of page /login I generate the token for the user autheticated and I return it. Well, here comes one of my question/problem. It's mandatory in a action controller to return a response, and my token it's send in json format and it's displayed on browser, but I don't want this, I just want to keep in response or in something so that my angular part to take that token and to take care of it in its way. So my method login:

  public function loginAction(Request $request)
{

    $username= $this->get('security.token_storage')->getToken()->getUser()->getEmail();
    $serviceUser = $this->container->get('ubb_user_login');
    $tokenUser = $serviceUser->generateToken($username);
    $response = new JsonResponse(array('Token' => $tokenUser));

    return $response;
}

2nd problem. I do not know in angular where to extract the token. In a controller I tried something:

app.controller('loginApi', function ($scope, $http, $window){

$http.get(
    '/api/user/login'
).then(function (success) {
    $scope.token = success.data.Token;
    $window.localStorage.setItem('Token', token); // it's okay used like this localStorage?
});
});

Here, I want only to take the token from /login action, to save it in local storage, and then to display it on every request using $http request interceptor. That part works. If I send a random string in header auth it's working and it gives me access to api:

function httpInterceptor() {
return {
    request: function(config) {
        config.headers.authorization = 'jdjdnnkdkd';
        return config;
    },
    responseError: function(errorResponse) {
        switch (errorResponse.status) {
            case 403:
                window.location = '/login';
                break;
            case 401:
                window.location = '/login';
        }
        return $q.reject(errorResponse);
    }
 }
 }

So, the problems I encounter: 1) How to send the token in order for angular to take it, but to not be displayed in the browser? Let's say that I have a menu that access the api, and if the user it's not authenticated,clicking on a link unauthenticated it's sending me on the login page, and after I auth with success, to redirect me on the menu? 2) After returning the token, where exactly to use it in angular? In which controller? And how to save it?

Much appreciation, thank you.

Upvotes: 0

Views: 778

Answers (1)

m1n0
m1n0

Reputation: 609

It seems like you need a separate api resource for working with the tokens. Have you tried using FOSOAuthServeBundle? It helps a lot with setting up oauth authentication, tokens etc.

In general you need to have a separate call for the token, i.e.:

  • angluar app makes request to a get token resource, a token is returned and temporarily stored in the angular app
  • use that token for each subsequent request - check the oauth bundle config on how to set which urls have to be oauth protected, but that bundle takes care of this for you

Regarding your angular issue, look at this q/a How to store authentication bearer token in browser cookie using AngularJS

Upvotes: 1

Related Questions