Time Series Insight API with MSAL and Angular 9

Question

Hello

I'm trying to use the Time Series Insight API with Angular 9 and the javascript MSAL library. I registered an application folliwing the steps in this guide: https://learn.microsoft.com/es-es/azure/time-series-insights/time-series-insights-authentication-and-authorization.

I created an Angular App and I installed the @azure/msal-angular npm package. I used the example in the Github repository: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular as template.

I configured the app.module.ts as follow:

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, MsalModule.forRoot({ auth: { clientId: 'XXXXXXX-XXX-XXXX-XXX-XXXXXXXXX', authority: 'https://login.microsoftonline.com/organizations', redirectUri: 'https://localhost:4200', }, cache: { cacheLocation: 'localStorage', storeAuthStateInCookie: isIE, // set to true for IE 11 }, }, { popUp: !isIE, consentScopes: [ 'https://api.timeseries.azure.com/user_impersonation', ], unprotectedResources: [], protectedResourceMap: [], extraQueryParameters: {} }) ], providers: [{ provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true }], bootstrap: [AppComponent] })

Where ClientID is my registered app from the "Authentication and Authorization" guide.

When I try to get some data from my TSI environment I get this error:

{"error":{"code":"AuthenticationFailed","message":"Server failed to authenticate the request. The token has been obtained from wrong audience or resource.","innerError":{"code":"InvalidAuthenticationTokenAudience","message":"The access token has been obtained from wrong audience or resource 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX'. It should exactly match (including forward slash) with one of the allowed audiences 'https://api.timeseries.azure.com/','XXXXX-XXXX-XXXX-XXXX-XXXXXXXX'."}}}

In consentScopes I tried also with 'https://api.timeseries.azure.com/' but it doesn't work.

Could you help me please?

Thans. Best Regards.

Answer 1

Hello @Juan Salvador Magán Valero , Could you please give it a try on Postman app. Lets see if you are able to get an access token over Postman and do a Get call to TSI to fetch Environments.

Step 1: Get Token from resource '**https://api.timeseries.azure.com/**'

Step 2: Send a Get call to TSI to fetch all available environments [Right now there are no environment, in the next step you will see the access permission to environments.]

Step 3: Give permission to the environments. (add the AAD registered app as contributor/reader)

Step 4: Do the Get Call again, You will see the environments visible now.

Issue Repro: Here is are the steps to repro the issue which you have mentioned: Regarding error":{"code":"AuthenticationFailed".
Get access token from incorrect resource

Step 2: Do the Get call with the access token obtained from incorrect resource as shown in above step 1.

So please verify the procedure how you have acquired the access token and use the same.

For more info on Azure TSI REST API reference document please see : Azure Time Series Insights REST APIs

Please let us know if you need further help in this matter.