Állítsa át az ADAL.js fájlt az MSAL.js fájlba

Van egy SPA, amely az itt található megoldást használja az Azure AD-vel való hitelesítéshez, és minden a várt módon működik. Most ezt szeretném átállítani az MSAL.js használatára.

Az alábbiakat használom a bejelentkezéshez:

import * as MSAL from 'msal'
...
const config = {
  auth: {
    tenantId: '<mytenant>.com',
    clientId: '<myclientid>',
    redirectUri: <redirecturi>,
  },
  cache: {
    cacheLocation: 'localStorage',
  }
};

const tokenRequest = {
  scopes: ["User.Read"]
};

export default {
  userAgentApplication: null,
  /**
   * @return {Promise}
   */
  initialize() {

    let redirectUri = config.auth.redirectUri;

    // create UserAgentApplication instance
    this.userAgentApplication = new MSAL.UserAgentApplication(
      config.auth.clientId,
      '',
      () => {
        // callback for login redirect
      },
      {
        redirectUri
      }
    );

    // return promise
    return new Promise((resolve, reject) => {
      if (this.userAgentApplication.isCallback(window.location.hash) || window.self !== window.top) {
        // redirect to the location specified in the url params.
      }
      else {
        // try pull the user out of local storage
        let user = this.userAgentApplication.getUser();

        if (user) {
          resolve();
        }
        else {
          // no user at all - go sign in.
          this.signIn();
        }
      }
    });
  },

  signIn() {
    this.userAgentApplication.loginRedirect(tokenRequest.scopes);
  },

Ezután az alábbiakat használom a token beszerzéséhez:

  getCachedToken() {
    var token = this.userAgentApplication.acquireTokenSilent(tokenRequest.scopes);
    return token;
  }

  isAuthenticated() {
    // getCachedToken will only return a valid, non-expired token.
    var user = this.userAgentApplication.getUser();
    if (user) {
      // get token
      this.getCachedToken()
      .then(token => {
        axios.defaults.headers.common["Authorization"] = "Bearer " + token;
        // get current user email
        axios
          .get('<azureapi-endpoint>' + '/GetCurrentUserEmail')
          .then(response => { })
          .catch(err => { })
          .finally(() => {
          });
      })
      .catch(err => { })
      .finally(() => { });

      return true;
    }
    else {
      return false;
    }
  },
}

de bejelentkezés után az alábbi hibaüzenetet kapom:

Access to XMLHttpRequest at 'https://login.windows.net/common/oauth2/authorize?response_type=code+id_token&redirect_uri=<encoded-stuff>' (redirected from '<my-azure-api-endpoint>') from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

A kapott token is érvénytelennek tűnik, mivel 401-es hibaüzenetet kapok, amikor az api-t a token használatával próbálom hívni. A tokent https://jwt.io/ ellenőrzésekor érvénytelen aláírást kapok.

Nagyon hálás vagyok bárki hozzászólásáért, mert már jó pár napot eltöltöttem, és még nem jutottam el sehova.