c# - OAuth2-authenticatie mislukt van .net core API-aanroep mislukt bij gebruik van Msal.js op een React-Typescript webapp

Ik heb een client-side Typescript React webapplicatie die moet communiceren met een .net core API. Aan de clientzijde is msal.js geïntegreerd. Ik kan inloggen bij AAD, het gebruikersaccount en het toegangstoken verkrijgen en dit als Bearer doorgeven bij de API-aanroep. Echter, de authenticatie op het API-niveau mislukt.

Over de klant:

config: Msal.Configuration = buildConfiguration({ auth: {
        clientId: 'clientId',
        authority: 'authority',
        validateAuthority: true,
        navigateToLoginRequestUrl: false
    } });

 request = {
        scopes: ["user.read"] 
     };

    userAgentApp : Msal.UserAgentApplication = new Msal.UserAgentApplication(this.config);

private _accessToken: string = '';
    public async GetAccessToken(): Promise<string>{
        if(this._accessToken == '')
        {
            await this.userAgentApp.acquireTokenSilent(this.request)
                .then((tokenResponse) => this._accessToken = tokenResponse.accessToken)
                .catch((error) => console.log(error))
        }

        return this._accessToken;
    }

    public login() {
        console.log("before login");

        this.userAgentApp.handleRedirectCallback((error, response) => 
        { 
            console.error(error)
        });

        this.userAgentApp.loginRedirect(this.request);

        console.log("after login")
    }

// Calling the api
  axios.defaults.headers.common = {'Authorization': `Bearer ${accessToken}`}
      const travelExpensesResponse = await axios.get("https://localhost:44350/api/reisekostenantrag")

Over Api

// Start.cs ConfigureServices
  services.AddAuthentication(sharedOptions =>
            {
                sharedOptions.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
            })
 .AddJwtBearer(options =>
            {
                options.Audience = "clientId";
                options.Authority = "authority";
            });

Ik krijg een SecurityTokenInvalidSignatureException: IDX10511: Handtekeningvalidatie mislukt.

1. Waar zou het probleem kunnen zijn?
2. Zijn er voorbeelden om te laten zien hoe ik een token kan doorgeven aan een .NET Core API vanuit een client-app?

Antwoord #1

Het probleem was dat het token deze scope user.read kreeg, wat een Graph API-scope is.

Dus de oplossing was om de serverapp in Azure te registreren en een aangepaste scope te maken.

Dan op de client-app:

 request = {
        scopes: ["api://clientid/access_as_user"] 
     };