How to add the authentication tokens in the angular $http call.
Planning to implement the identity and access management solution in later stage and like to make a provision to add the authentication token in the $http.
How can i do that?
That depends on how your API expects that information to be sent!?
Normally you would need to add a Authorization header like this:
$http.defaults.headers.common['Authorization'] = /* MY TOKEN */;
Related
I have one issue. I have a project which is created in MVC and AngularJs using Apis. I want to apply the OAuth token with all Apis.
I will follow the below steps :
First login from the panel.
Maintain OAuth token in the header of each page.
Use that OAuth token from the header and pass from each web API request.
If somewhere I am wrong please let me know. How can I do?
Please share if anyone has done before.
Create a service/factory that will make all API requests from your app.
It's just a wrapper of $http. call it something like ApiService.
This service would read the token from where ever it stored (header, cookie...) and append it to every request.
This very much like the pattern $http handles XSRF protection
I am trying to figure out how to add the OAuth Token to a Breeze-Sharp request. I am using Microsoft WebAPI and I want to use the OAuth token from OWIN to authorize all my query requests. I am not seeing where or how to change the request headers. I see that you can add parameters to a query using WithParameter but I am not seeing where I can change the header.
I am looking for something like this:
var query = new EntityQuery<TodoItem>().[AddHeader("Authorization","Bearer wkjksdjf...."];
You can add the authorization header to HttpClient used by EntityManager.
eq.
this.entityManager.DataService.HttpClient.DefaultRequestHeaders.Authorization =
new AuthenticationHeaderValue(AuthenticationSetup.Bearer, authenticationHeader);
I am sing OAuth2 in WebAPI project. I am authenticating user request in OWIN middleware. On successfull authentication I am sending an JWT access token to client. Now I can validate subsequent request at server and use [Authorize(Roles="myRole")] attribute on Api Controllers.
But how can I show validate client content in AngularJs and show pages based on user role? I have JWT at client and no idea how to get user role out of it?
Is it a good approach to extract information from JWT?
You will need to parse that JWT and get the values out. You can do that with the help of the angular-jtw library.
1) Download the angular-jwt.min.js (https://github.com/auth0/angular-jwt)
2) put a dependecy of "angular-jwt" on the application module:
var app = angular.module("YOUR_APP", ["angular-jwt"]);
3) pass the jwtHelper to your service or controller or wherever it is that you wish to use it.
app.module.factory("YOUR_SERVICE", function(jwtHelper){
...
});
4) use the decodeToken method of the jwtHelper you passed in to decode your token
For example, the code below is parsing out the role object from a jwt that came back from my service endpoint. Upon succssful return from the server the role is extracted from the jwt and returned.
return $http.post(serviceEndPoints.tokenUrl, data, config)
.then(function (response) {
var tokenPayLoad = jwtHelper.decodeToken(response.data.access_token);
//Now do whatever you wish with the value. Below I am passing it to a function: (determineRole)
var userRole = determineRoles(tokenPayLoad.role);
return userRole;
});
};
Hope that helps
//Houdini
Currently we don't offer anything that would help you to take advantage of that information on the client. Also note: as today we do not validate the token on the client, we cannot really trust its content... while the [Authorize] attribute on the server side gets the role info only after the pipeline before it had a chance of validating the signature and deciding that the token is valid.
We might introduce something that will help with this scenario in the future, but for the time being you'd need to write custom code or rely on the server side to echo things back.
I am using restangular to talk to a RESTful api. The API requires a valid token to authenticate against.
Users in the app have logged in and have a generated token. How do I set the default headers/intercept requests after login to include this token header.
I have been able to do it when I first bootstrap the application using RestangularProvider.setFullRequestInterceptor but the user has not logged in at this stage and does I can not therefore insert he header.
If you want to add it to the header, look at $http.defaults object\array. Since Restangular also uses $http this would affect Restangular too.
You can inject $http into the service which gets the access token and that service can add to the defaults.
Check $http documentation http://docs.angularjs.org/api/ng.$http
I'm trying to set my
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $cookie.auth_token;
in my .config section of my app, but it doesn't seem like I can access the document/cookies just yet? Is there a better place to set this?
I'm doing this because I'm storing my users auth_token in a cookie so they don't need to login every time they use my mobile app.
Thanks!
As described in $http docs:
... Angular provides a mechanism to counter XSRF. When performing XHR
requests, the $http service reads a token from a cookie called
XSRF-TOKEN and sets it as the HTTP header X-XSRF-TOKEN.
... To take advantage of this, your server needs to set a token in a
JavaScript readable session cookie called XSRF-TOKEN on the first HTTP
GET request
So if you set your CSRF token in cookie name XSRF-TOKEN then no adjustments are needed on Angular side. and your code should work as is.