Hello @Saravana , the token provided does not look like an access token, it lacks the scp
(scope) claim and targets the Microsoft Graph resource (00000003-0000-0000-c000-000000000000
) thus looks more like an ID token. ID tokens are not meant to be used against apis. You need to request an access token passing one of your api scopes. Eg (considering 3e313981-118f-43c4-93e9-7cbda6a5c742
it's your api app/client id):
api://3e313981-118f-43c4-93e9-7cbda6a5c742/scope1
api://3e313981-118f-43c4-93e9-7cbda6a5c742/.default (requests all scopes)
Follows a sample on how to setup automatic access token request per url using the MSAL Interceptor. Take a look to the protectedResourceMap
property:
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { MsalModule, MsalRedirectComponent, MsalGuard, MsalInterceptor } from '@azure/msal-angular'; // Import MsalInterceptor
import { InteractionType, PublicClientApplication } from '@azure/msal-browser';
@NgModule({
declarations: [
AppComponent,
],
imports: [
MsalModule.forRoot( new PublicClientApplication({
// MSAL Configuration
}), {
// MSAL Guard Configuration
}, {
// MSAL Interceptor Configurations
interactionType: InteractionType.Redirect,
protectedResourceMap: new Map([
['one_of_your_api_endpoints', ['one_of_your_api_scopes'] /*['one_scope','other_scope','etc'*/]
])
})
],
providers: [
{
provide: HTTP_INTERCEPTORS, // Provides as HTTP Interceptor
useClass: MsalInterceptor,
multi: true
},
MsalGuard
],
bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }
Regarding jwt.io, the invalid signature is well known issue when trying to validate Azure AD tokens. Switch to https://jwt.ms/ for token validation. Keep in mind some tokens are not meant to be decoded/decrypted.
Let us know if you need additional assistance. If the answer was helpful, please accept it and rate it so that others facing a similar issue can easily find a solution