【问题标题】:Migrate ADAL.js to MSAL.js将 ADAL.js 迁移到 MSAL.js
【发布时间】:2020-10-11 02:46:45
【问题描述】:

我有一个 SPA,它使用提供的解决方案 here 向 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.

我得到的令牌似乎也是无效的,因为我在尝试使用令牌调用 api 时遇到 401 错误。根据https://jwt.io/ 检查令牌后,我得到一个无效签名。

我非常感谢任何人的意见,因为我已经度过了好几天,但还没有任何结果。

【问题讨论】:

  • 似乎是 Azure 端的配置问题。

标签: vue.js adal.js msal.js


【解决方案1】:

我不确定这是否是您的问题。但是,对于msal.js,配置中没有tenantId参数,应该是权限。这是使用 msal.js 的图形 api 示例 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 而不是 login.windows.net

【讨论】:

  • 谢谢@alphaz18 我已经改用authority: 'https://login.microsoftonline.com/&lt;mytenant.com&gt; 但还是一样
  • 你好,应该是权限:“login.microsoftonline.com/tenantID”,而不是tenantdomain.com,应该是像xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx这样的guid
猜你喜欢
  • 2019-09-03
  • 2018-01-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-04
  • 2016-01-27
  • 2019-06-26
  • 2014-07-15
相关资源
最近更新 更多