AADSTS65001: The user or administrator has not consented to use the application with ID <app-id>

I'm developing an Angular + Flask application that uses Microsoft's OAuth2 (On-Behalf-Of-User Flow). I'm trying to call an API from the backend, but I get an exception.

Here is the configuration in app.module.ts:

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: '<application_id_of_spa>',
      authority: 'https://login.microsoftonline.com/organizations',
      redirectUri: 'http://localhost:4200/'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE,
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }
  });
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
  protectedResourceMap.set('https://api.powerbi.com/v1.0/myorg/', ['https://analysis.windows.net/powerbi/api/.default']);
  protectedResourceMap.set('http://localhost:5000/api/v1.0/get_workspaces',['api://<application_id_of_webapi>/.default'])

  return {
    interactionType: InteractionType.Popup,
    protectedResourceMap
  };
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return { 
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: ['api://<application_id_of_webapi>/.default'],
    },
  };
}

Then I used acquireTokenPopup msal function to get an access token.

And then I call my backend API like this:

this.http.get('http://localhost:5000/api/v1.0/get_workspaces')

My Flask web API:

@app.route('/api/v1.0/get_workspaces', methods=['GET'])
def get():

        current_access_token = request.headers.get("Authorization", None)

        msal_client = msal.ConfidentialClientApplication(
            client_id=app.config['CLIENT_ID'],
            authority=app.config['AUTHORITY'],
            client_credential=app.config['CLIENT_SECRET'])

        # acquire token on behalf of the user that called this API
        arm_resource_access_token = msal_client.acquire_token_on_behalf_of(
            user_assertion=current_access_token.split(' ')[1],
            scopes=app.config['SCOPE']
        )
        print( arm_resource_access_token) /////////////////// ******* I'm getting the error here

        headers = {
            'Authorization': arm_resource_access_token['token_type'] + ' ' + arm_resource_access_token['access_token']}

        workspaces= requests.get(app.config['ENDPOINT'] + 'workspaces', headers = headers).json()
        print(workspaces)
        return jsonify(workspaces)

In my angular console, I'm getting this:

In my Flask terminal I'm getting this:

AADSTS65001: The user or administrator has not consented to use the application with ID <webapi_ app_id>.

In Azure portal, I registered both spa and web API:

I exposed the API on my backend, and added it in my frontend registration.

And I add my spa app_id on the Authorized client applications.