401 Calling Authorized WebApi Endpoint

Question

I have an Angular 2 App that I am Authenticating against Azure AD and then making a call to a developed WebApi to get additional information.

I first change the window location to the Azure Login Page for SSO

window.location.href =  "https://login.microsoftonline.com/" + 
        this.tenantId + 
        "/oauth2/authorize?" +
        "response_type=id_token+token&" +
        "response_mode=fragment&" +
        "client_id=" + this.clientId + "&" +
        "redirect_uri=" + encodeURIComponent(window.location.href) + "/&" +
        "scope=openid&" +
        "state=" + this.state + "&" +
        "nonce=" + this.nonce;

I then get the access_token param from the hash and pass it to a service that calls my Api

Call from Angular 2 to WebApi

    public testApi(token): Observable<any> {
    let headers = new Headers({
        'Authorization': 'Bearer ' + token, 'Accept': 'application/json; odata.metadata=minimal' });
    let options = new RequestOptions({ headers: headers });
    return this.httpService.get('/api/values', options)
        .map((response: Response) => response.json());
}

This call comes back with a 401 with this message

Bearer error="invalid_token", error_description="The signature is invalid"

After looking around, I thought it may be with how I am setting up OWIN on my Api side, but after reading MSFT documentation, it should be like so

Configure Section in Statup.cs

   app.UseJwtBearerAuthentication(new JwtBearerOptions
        {
            Authority = Configuration["Authentication:AzureAd:AADInstance"] + Configuration["Authentication:AzureAd:TenantId"],
            Audience = Configuration["Authentication:AzureAd:Audience"]
        });

appsettings.json

  "Authentication": {
     "AzureAd": {
       "AADInstance": "https://login.microsoftonline.com/",
       "Audience": "https://isaaclevin.com/testlogin",
       "ClientId": "26931518-d4e2-4ad7-bc78-64857754bbf3",
       "Domain": "isaaclevin.com",
       "TenantId": "3335f25c-177f-424d-96cc-5a5a3d1798cd"
    }

And finally the simple Api with the Authorize Attribute

    [Authorize]
[Route("api/[controller]")]
public class ValuesController : Controller
{
    // GET api/values
    [HttpGet]
    public IEnumerable<string> Get()
    {
        return new string[] { "value1", "value2" };
    }
}

Not quite sure what I am doing wrong here, but it is an auth issue for sure. If I take the [Authorize] attribute off, the api call works (but that is obvious). I am validating the token on the client side and it is working just fine.

Are you able to reproduce this issue after you retry get the new access token to call you web API again? And to narrow down this issue, I also suggest that you capture the **access token** using **fiddler**, and you can verify the token using the code from [here](https://github.com/dream-365/OfficeDev-Samples/blob/master/samples/Office365DevQuickStart/OAuth2-basic/JsonWebTokenValidator.cs). — Fei Xue, Nov 04 '16 at 06:33

score 0 · Answer 1 · answered Nov 04 '16 at 10:58

0

To fix this I had to add the resource to the login call. I am getting an issue now with continual request for.consent, but I can hot the api fine

answered Nov 04 '16 at 10:58

Isaac Levin

2,809
9
49
88

Even I'm facing a similar issue now. What exactly did you do to solve problem ? – Pickle Dec 05 '16 at 18:17
i useda library wrapper for adal.js https://github.com/sureshchahal/angular2-adal – Isaac Levin Dec 05 '16 at 21:30
I tried http://stackoverflow.com/questions/40044892/how-to-load-adal-js-in-webpack-inside-angular-2-azure-ad example. It don't work for me. – Pickle Dec 05 '16 at 22:02
Just wondering if you have any github example for your project. – Pickle Dec 05 '16 at 22:07
he has an example solution on git, take a look – Isaac Levin Dec 06 '16 at 14:46
Can you further explain what exactly did you to mean by "Add the resource to the login call". Thanks! – Pickle Dec 07 '16 at 16:58

401 Calling Authorized WebApi Endpoint

1 Answers1