Getting “invalid_token” when accessing Web API with ADAL.js

Question

I followed the ideas in this post. I just made a few changes, like using ASP.net core and Angular 2 front running on the same port using jwt bearer token authentication.

I'm using ADAL.js to authenticate Azure AD and this process seems to work fine. I'm getting my token from Azure AD and its getting save in localstorage.

When I use the token which is getting save in local storage to call my API I'm getting 401

Call from Angular 2 to WebApi both residing on same port.

var token = localStorage["adal.access.token.keye1b88e53-810a-474d-93af-bb98c956d01e"];     
        console.log(token);
        let headers = new Headers({
            'Authorization': 'Bearer ' + token, 'Accept': 'application/json; odata.metadata=minimal'
        });
        let options = new RequestOptions({ headers: headers });
        return this.http.get('https://localhost:44375/api/values', options)
            .map((response: Response) => response.json()).subscribe((val) => {
        console.log(val);});

This call comes back with a 401 with this message

Bearer error="invalid_token", error_description="The token is expired"

Any ideas are appreciated. Thanks!

Answer 1

By default, the token we acquired will be expired in an hour. According your error message, your token should have been expired, each token will have a expiration timestamp, you can check the key adal.expiration.key1b88e53-810a-474d-93af-bb98c956d01e in your localstorage for the expired time.

Actually, if you are using adal-angular module in your application, as the description on its Github repository:

Any service invocation code you might have will remain unchanged. Adal's interceptor will automatically add tokens for every outgoing call.

We don't need to manually set the Authorization header in the outcall requests. Also, if you consist, you can try to use:

config.headers['Authorization'] = 'Bearer ' + localStorage.getItem("adal.idtoken");

And renew your token manually.

Additionally, you can check all the key/value in local storage created by adal.js:

Answer 2

On the Web API end I changed

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

to

app.UseJwtBearerAuthentication(new JwtBearerOptions {
                Authority = Configuration["Authentication:AzureAd:AADInstance"] + Configuration["Authentication:AzureAd:TenantId"],
                Audience = Configuration["Authentication:AzureAd:ClientId"],
                TokenValidationParameters = new TokenValidationParameters { SaveSigninToken = true }

            });

Answer 3

You can also set the Application id of the AD application to be same in both Web API and also in client application as **clientId** and make sure you enable **"oauth2AllowImplicitFlow": true,** in manifest(available azure portal of the AD).