无法静默获取令牌或通过使用msal浏览器重定向

Question

我正在尝试开发一个VueJS单页应用程序，让你登录AAD，这样我就可以获得一个访问令牌来调用各种API(例如Graph)。

一旦用户登录，您必须获得一个令牌，有两种方法可以做到这一点:静默(如果失败，使用重定向体验)。

但是，我无法使用这两种方法获取令牌：

export default class AuthService {
  constructor() {
    console.log('[AuthService.constructor] started constructor');

    this.app = new Msal.PublicClientApplication(msalConfig);
    this.signInType = 'loginRedirect';
  }

  init = async () => {
    console.log('[AuthService.init] started init');

    await this.app.handleRedirectPromise().catch(error => {
      console.log(error);
    });


    try {

      let signedInUser = this.app.getAllAccounts()[0];

      //  if no accounts, perform signin
      if (signedInUser === undefined) {
        alert(this.app.getAllAccounts().length == 0)
        await this.signIn();
        signedInUser = this.app.getAllAccounts()[0];
        console.log("user has been forced to sign in")
      }

      console.log("Signed in user is: ", signedInUser);

      // Acquire Graph token
      try {
        var graphToken = await this.app.acquireTokenSilent(authScopes.graphApi);
        console.log("(Silent) Graph token is ", graphToken);
        alert(graphToken);
      } catch (error) {
        alert("Error when using silent: " + error)
        try {
          var graphToken = await this.app.acquireTokenRedirect(authScopes.graphApi);
        } catch (error) {
          alert ("Error when using redirect is: " +  error)
        }

        alert("(Redirect) Graph token is " + graphToken);
      }

    } catch (error) {
      console.log('[AuthService.init] handleRedirectPromise error', error);
    }
  }

  signIn = async () => {
    console.log('[AuthService.signIn] signInType:', this.signInType);
    this.app.loginRedirect("user.read", "https://xxx.azurewebsites.net/user_impersonation");
  }

  signOut = () => {
    this.app.logout();
  }
}

加载SPA后，我会被重定向到AAD登录页面。

然后我得到以下警报提示：

使用静默时出错： ClientAuthError：no_account_in_silent_request：请传递一个账户对象，没有账户信息不支持静默流

使用重定向时的错误是：浏览器身份验证错误：interaction_in_progress：交互当前正在进行中。在调用交互式 API 之前，请确保已完成此交互。

（重定向）图形令牌未定义

即使我已登录，为什么获取TokenSilent认为我没有登录？

那幺＜code＞BrowserAuthError:interaction_in_progress＜code＞是什么意思？我在网上搜索了这个，唯一的结果是因为有人使用了过时的msal浏览器。在我的例子中，我使用的是最新和最好的（v2.0.1）。

更新1:

我使用以下代码摘录修复了我的静默令牌获取：

const silentRequest = {
  account: signedInUser,
  scopes: authScopes.graphApi.scopes1
}
var graphToken = await this.app.acquireTokenSilent(silentRequest);

看起来我以错误的格式传递了我的作用域（即，应该传递一个数组，但实际上不是数组！）

然而，在微软的留档中有一个关于如何使用akereTokenSilent的差异。

在这里，我们被告知只需将一组作用域传递给acquireTokenSilent方法。然而，在这里，我们被告知在作用域旁边传递accountInfo。

让我们看看我现在是否可以让< code > acquire token redirect 工作...

更新2：经过多次试验和错误，我终于让akereTokenRedirect正常工作。

import * as Msal from '@azure/msal-browser';

const msalConfig = {
  auth: {
    clientId:    "XYZ",
    authority:   "ABC",
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: true
  }
};

export default class AuthenticationService {

  constructor() {

    this.app = new Msal.PublicClientApplication(msalConfig)
  }

  init = async () => {

    try {
      let tokenResponse = await this.app.handleRedirectPromise();

      let accountObj;
      if (tokenResponse) {
        accountObj = tokenResponse.account;
      } else {
        accountObj = this.app.getAllAccounts()[0];
      }

      if (accountObj && tokenResponse) {
        console.log("[AuthService.init] Got valid accountObj and tokenResponse")
      } else if (accountObj) {
        console.log("[AuthService.init] User has logged in, but no tokens.");
        try {
          tokenResponse = await this.app.acquireTokenSilent({
            account: this.app.getAllAccounts()[0],
            scopes: ["user.read"]
          })
        } catch(err) {
          await this.app.acquireTokenRedirect({scopes: ["user.read"]});
        }
      } else {
        console.log("[AuthService.init] No accountObject or tokenResponse present. User must now login.");
        await this.app.loginRedirect({scopes: ["user.read"]})
      }
    } catch (error) {
      console.error("[AuthService.init] Failed to handleRedirectPromise()", error)
    }

  }

}

Answer 1

在Azure AD中检查您的应用注册。

MSAL v2要求迁移重定向URI。

Azure AD警告：此应用已启用隐式授权设置。如果您在带有MSAL的SPA中使用这些URI中的任何一个。在JS2.0中，您应该迁移URI。

迁移URI消息：最新版本的MSAL.js使用PKCE和CORS的授权代码流。

Answer 2

必须经历一些试验和错误，但最终< code > acquire token redirect 成功运行，以下摘录可能对其他人有所帮助:

import * as Msal from '@azure/msal-browser';

const msalConfig = {
  auth: {
    clientId:    "XYZ",
    authority:   "ABC",
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: true
  }
};

export default class AuthenticationService {

  constructor() {

    this.app = new Msal.PublicClientApplication(msalConfig)
  }

  init = async () => {

    try {
      let tokenResponse = await this.app.handleRedirectPromise();

      let accountObj;
      if (tokenResponse) {
        accountObj = tokenResponse.account;
      } else {
        accountObj = this.app.getAllAccounts()[0];
      }

      if (accountObj && tokenResponse) {
        console.log("[AuthService.init] Got valid accountObj and tokenResponse")
      } else if (accountObj) {
        console.log("[AuthService.init] User has logged in, but no tokens.");
        try {
          tokenResponse = await this.app.acquireTokenSilent({
            account: this.app.getAllAccounts()[0],
            scopes: ["user.read"]
          })
        } catch(err) {
          await this.app.acquireTokenRedirect({scopes: ["user.read"]});
        }
      } else {
        console.log("[AuthService.init] No accountObject or tokenResponse present. User must now login.");
        await this.app.loginRedirect({scopes: ["user.read"]})
      }
    } catch (error) {
      console.error("[AuthService.init] Failed to handleRedirectPromise()", error)
    }

  }

}