使用MSAL获取账户信息失败，调用acquireTokenSilent报no_account_error

问题描述 #

我是JavaScript及Web开发领域的新手，若表述有不当之处还请见谅。尝试使用MSAL开发登录页面时，始终无法完成登录，抛出如下错误：

Uncaught (in promise) BrowserAuthError: no_account_error: No account object provided to acquireTokenSilent and no active account has been set. Please call setActiveAccount or provide an account on the request.

_AuthError chunk-3XQJSEYN.js:319
_BrowserAuthError chunk-3XQJSEYN.js:8258
createBrowserAuthError chunk-3XQJSEYN.js:8264
acquireTokenSilent chunk-3XQJSEYN.js:14613
acquireTokenSilent PublicClientApplication.ts:134
Login Login.js:30

应用注册配置无误且我拥有访问权限，但无法获取任何账户信息。调用msalInstance.getAllAccounts()[0]返回undefined，调用msalInstance.setActiveAccount(account)也无法解决问题。我的目标是成功执行.acquireTokenSilent(accessTokenRequest)获取令牌以作后续使用，已尝试推迟初始化、调整setActiveAccount和getAllAccounts的调用顺序，但均未成功。

相关代码 #

Login.js #

import { AuthConfig } from "../Config/AuthenticationConfig.js";
import { PublicClientApplication } from "@azure/msal-browser";

export async function Login() {
  const msalInstance = new PublicClientApplication({
    auth: {
      clientId: AuthConfig.clientId,
      redirectUri: AuthConfig.redirectUri,
      postLogoutRedirectUri: AuthConfig.postLogoutRedirectUri,
      authority: AuthConfig.authority,
    },
    cache: {
      cacheLocation: "sessionStorage",
      storeAuthStateInCookie: false,
    },
  });

  await msalInstance.initialize();

  const account = msalInstance.getAllAccounts()[0];

  const accessTokenRequest = {
    scopes: ["User.Read"],
    account: account
  };

  await msalInstance.setActiveAccount(account);
  console.log(account + "test");

  await msalInstance.acquireTokenSilent(accessTokenRequest).then((tokenResponse) => {
    console.log(JSON.stringify(tokenResponse.accessToken));
  });


  await msalInstance.loginPopup({
    scopes: AuthConfig.scopes,
    prompt: "select_account",
  });

  return;
}

AuthenticationConfig.js #

export const AuthConfig = {
  clientId: "***",
  redirectUri: "http://localhost:***/",
  postLogoutRedirectUri: "http://localhost:***/Login",
  scopes: ["User.Read"],
  authority:
    "https://login.microsoftonline.com/***",
};

页面组件代码 #

import * as apiservice from "../Utility/Login.js";
import "../App.css";
import "../index.css";

export function ShowLoginPage() {
  return (
    <div className="App">
      <header>
        <div className="LogginBackground">
          <img
            src={
              "****"
            }
            className="App-logo"
            alt="logo"
          />
          <img
            src="****"
            className="picture"
            alt="picture"
          />
          <p>
            <button
              onClick={async () => {
                await apiservice.Login();
              }}
            >
              Login
            </button>
          </p>
        </div>
      </header>
    </div>
  );
}

问题根源与解决方法 #

核心问题 #

代码逻辑顺序完全颠倒：在调用loginPopup完成用户登录之前，就尝试调用acquireTokenSilent获取令牌。此时用户未登录，MSAL缓存中无任何账户信息，必然抛出no_account_error。此外，每次调用Login函数都新建PublicClientApplication实例，会导致缓存无法复用，进一步加剧账户获取失败的问题。

修正步骤 #

1. 调整执行顺序：先完成登录流程，再获取账户并调用acquireTokenSilent
2. 全局复用MSAL实例：避免每次创建新实例，确保缓存一致性
3. 正确设置活跃账户：登录成功后从返回结果或缓存中读取账户，再设置为活跃账户
4. 异常处理：捕获acquireTokenSilent的交互需求异常，降级使用交互式令牌获取方法

修正后的Login.js示例 #

import { AuthConfig } from "../Config/AuthenticationConfig.js";
import { PublicClientApplication, InteractionRequiredAuthError } from "@azure/msal-browser";

// 全局初始化MSAL实例，确保缓存复用
let msalInstance;

async function initMsal() {
  if (!msalInstance) {
    msalInstance = new PublicClientApplication({
      auth: {
        clientId: AuthConfig.clientId,
        redirectUri: AuthConfig.redirectUri,
        postLogoutRedirectUri: AuthConfig.postLogoutRedirectUri,
        authority: AuthConfig.authority,
      },
      cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: false,
      },
    });
    await msalInstance.initialize();
    
    // 初始化时检查缓存中的账户，自动设置活跃账户
    const cachedAccounts = msalInstance.getAllAccounts();
    if (cachedAccounts.length > 0) {
      msalInstance.setActiveAccount(cachedAccounts[0]);
    }
  }
}

export async function Login() {
  await initMsal();

  // 先执行登录弹窗，完成用户认证
  const loginResponse = await msalInstance.loginPopup({
    scopes: AuthConfig.scopes,
    prompt: "select_account",
  });

  // 获取登录后的账户信息
  const account = loginResponse.account || msalInstance.getAllAccounts()[0];
  if (!account) {
    throw new Error("登录后未获取到有效账户信息");
  }

  // 设置活跃账户
  msalInstance.setActiveAccount(account);

  // 尝试静默获取令牌
  const accessTokenRequest = {
    scopes: ["User.Read"],
    account: account
  };

  try {
    const tokenResponse = await msalInstance.acquireTokenSilent(accessTokenRequest);
    console.log("获取到的令牌:", tokenResponse.accessToken);
  } catch (error) {
    // 静默获取失败时，调用交互式方法重试
    if (error instanceof InteractionRequiredAuthError) {
      const tokenResponse = await msalInstance.acquireTokenPopup(accessTokenRequest);
      console.log("交互式获取到的令牌:", tokenResponse.accessToken);
    } else {
      console.error("获取令牌失败:", error);
    }
  }
}

额外注意事项 #

• 确保redirectUri与应用注册后台配置完全一致，包括端口、路径和协议
• 若需要持久化登录状态，可将cacheLocation改为localStorage（默认是sessionStorage，关闭浏览器会清除缓存）
• 生产环境中避免在控制台打印令牌，需妥善存储和使用令牌

内容的提问来源于stack exchange，提问作者Moony