.NET Web API 2 OWIN Bearer Token Authentication - asp.net

Question

I'm implementing a Web API 2 service architecture in my .NET web application. The client consuming the requests is pure javascript, no mvc/asp.net. I'm using OWIN to try to enable token authentication per this article OWIN Bearer Token Authentication with Web API Sample. I seem to be missing something with the authentication step after its authorized.
My login looks like:
[HttpPost]
[AllowAnonymous]
[Route("api/account/login")]
public HttpResponseMessage Login(LoginBindingModel login)
{
// todo: add auth
if (login.UserName == "a#a.com" && login.Password == "a")
{
var identity = new ClaimsIdentity(Startup.OAuthBearerOptions.AuthenticationType);
identity.AddClaim(new Claim(ClaimTypes.Name, login.UserName));
AuthenticationTicket ticket = new AuthenticationTicket(identity, new AuthenticationProperties());
var currentUtc = new SystemClock().UtcNow;
ticket.Properties.IssuedUtc = currentUtc;
ticket.Properties.ExpiresUtc = currentUtc.Add(TimeSpan.FromMinutes(30));
DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);
return new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new ObjectContent<object>(new
{
UserName = login.UserName,
AccessToken = Startup.OAuthBearerOptions.AccessTokenFormat.Protect(ticket)
}, Configuration.Formatters.JsonFormatter)
};
}
return new HttpResponseMessage(HttpStatusCode.BadRequest);
}
It returns
{
accessToken: "TsJW9rh1ZgU9CjVWZd_3a855Gmjy6vbkit4yQ8EcBNU1-pSzNA_-_iLuKP3Uw88rSUmjQ7HotkLc78ADh3UHA3o7zd2Ne2PZilG4t3KdldjjO41GEQubG2NsM3ZBHW7uZI8VMDSGEce8rYuqj1XQbZzVv90zjOs4nFngCHHeN3PowR6cDUd8yr3VBLdZnXOYjiiuCF3_XlHGgrxUogkBSQ",
userName: "a#a.com"
}
Then I try to set the HTTP header Bearer on further requests in AngularJS like:
$http.defaults.headers.common.Bearer = response.accessToken;
to a API like:
[HttpGet]
[Route("api/account/profile")]
[Authorize]
public HttpResponseMessage Profile()
{
return new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new ObjectContent<object>(new
{
UserName = User.Identity.Name
}, Configuration.Formatters.JsonFormatter)
};
}
but no matter what I do this service is 'unauthorized'. Am I missing something here?

Answer 1

Resolved by setting header 'Authorization' with Bearer + token like:
$http.defaults.headers.common["Authorization"] = 'Bearer ' + token.accessToken;

Answer 2

You can configure it with your angular application module. So authorization token will be set as header for every http request.
var app = angular.module("app", ["ngRoute"]);
app.run(function ($http) {
$http.defaults.headers.common.Authorization = 'Bearer ' + token.accessToken;
});