Перенести ADAL. js в MSAL. js - PullRequest
0 голосов
/ 21 июня 2020

У меня есть SPA, который использует предоставленное решение здесь для аутентификации с помощью Azure AD, и все работает, как ожидалось. Теперь я хочу перенести это на использование MSAL. js.

Я использую ниже для входа в систему:

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);
  },

А затем я использую ниже, чтобы получить токен:

  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;
    }
  },
}

, но после входа в систему я получаю ошибку ниже:

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.

Также полученный мной токен кажется недействительным, поскольку я получаю ошибку 401 при попытке вызвать api с помощью токена. После проверки токена на соответствие https://jwt.io/ я получаю недействительную подпись.

Я очень ценю чей-либо вклад, так как я уже провел несколько хороших дней и пока никуда не ушел.

1 Ответ

0 голосов
/ 21 июня 2020

Я не уверен, что это ваша проблема. однако для msal. js в конфигурации нет параметра tenantId, он должен быть полномочным. Вот пример графического API с использованием msal. js https://github.com/Azure-Samples/active-directory-javascript-graphapi-v2

, в частности: конфигурация здесь: https://github.com/Azure-Samples/active-directory-javascript-graphapi-v2/blob/quickstart/JavaScriptSPA/authConfig.js

согласно здесь, https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-initializing-client-applications предполагается, что он будет нажимать на login.microsoftonline.com, а не на логин. windows. net

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...