Сбой аутентификации OAuth2 из-за вызова API ядра .net с использованием Msal.js в веб-приложении React-Typescript

Question

У меня есть клиентское веб-приложение Typescript React, которое должно взаимодействовать с API-интерфейсом ядра .net. На клиенте был интегрирован msal.js. Я могу войти в AAD, получить учетную запись пользователя и токен доступа и передать его в качестве носителя на вызов API. Однако аутентификация на уровне API не удается.

На клиенте:

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")

На Api

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

Я получаю исключение SecurityTokenInvalidSignatureException: IDX10511: Ошибка проверки подписи.

1. Где может быть проблема?
2. Есть ли примеры, показывающие, как я могу передать токен в .net core api из клиентского приложения?

Answer 1

Проблема заключалась в том, что токену была присвоена эта область user.read, которая является областью действия Graph API.

Таким образом, решение состояло в том, чтобы зарегистрировать серверное приложение в Azure и создать настраиваемую область .

Затем в клиентском приложении:

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