ClientAuthError：令牌调用在隐藏的 iframe 中被阻止

Question

我正在使用 MSAL.js 作为 Azure Active Directory 的客户端构建 javascript SPA。

为我的 API 请求访问令牌时

var requestObj = {
  scopes: ["api://MyApi/Access"]
};
msalUserAgent.acquireTokenSilent(requestObj ) 

Msal 在内部创建了一个 iframe 来处理请求，然后给出以下关于在不支持的 iframe 内操作的错误：

ClientAuthError: Token calls are blocked in hidden iframes
    at ClientAuthError.AuthError [as constructor] (webpack-internal:///./node_modules/msal/lib-es6/error/AuthError.js:26:28)
    at new ClientAuthError (webpack-internal:///./node_modules/msal/lib-es6/error/ClientAuthError.js:111:28)
    at Function.ClientAuthError.createBlockTokenRequestsInHiddenIframeError (webpack-internal:///./node_modules/msal/lib-es6/error/ClientAuthError.js:192:16)
    at Function.WindowUtils.blockReloadInHiddenIframes (webpack-internal:///./node_modules/msal/lib-es6/utils/WindowUtils.js:206:90)
    at eval (webpack-internal:///./node_modules/msal/lib-es6/UserAgentApplication.js:474:77)
    at new Promise (<anonymous>)
    at UserAgentApplication.acquireTokenSilent (webpack-internal:///./node_modules/msal/lib-es6/UserAgentApplication.js:472:16)
    at Object.ensureUserLoggedIn (webpack-internal:///./src/services/ActiveDirectoryService.js:93:19)
    at eval (webpack-internal:///./src/main.js:36:89)
    at Module../src/main.js (http://localhost:8080/js/app.js:1178:1)

我的网页似乎仍然按预期工作，但我真的不习惯携带未解决的错误，所以我试图找出问题的原因。

在尝试解决这个问题时，我在 github 上发现了这个问题， 它看起来很像我的问题。它确认acquireTokenSilent 确实创建了一个iFrame，该iFrame 重定向回主spa 应用程序（然后尝试登录并请求令牌......所以基本上是无限递归）。这就是它被阻止的原因。

建议之一是将 redirectUri 指定为没有我尝试过的 MSAL 的页面，但没有成功

 request = {
      scopes:  ["api://MyApi/Access"],
      redirectUri: "http://localhost:8080/token-landing.html"
    };
    // }
    return msalUserAgent.acquireTokenSilent(request);

这并没有解决这个问题，很难看出是否甚至使用了重定向。其他建议是在我尝试获取的令牌的任何地方检查 url 中的“#”，这不是很好，因为“#”在 SPA 网站中很常见。

Answer 1

来源： https: //github.com/lukezirngibl/msal-react-v2

enum Scopes {
  OPEN_ID = 'openid',
  CUSTOM_SCOPE = 'api://XXXX-XXXX-XXXXXX-XXXXX/all',
  USER_READ = 'User.Read',
}

const config = {
  auth: {
    clientId: 'XXXXXX-XXXXXX-XXXXXX-XXXXX-XXXXX', // clientId or appId
    redirectUri: 'http://localhost:3000',         // redirectUri
    authority: undefined,                         // Optional
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: true,
  },
}

const {
  AuthProvider,   // Use once!
  getAccessToken, // Can use to inject access tokens elsewhere in your app
  msalClient,     // Use elsewhere for msalClient.logout() and other client functions
  graphClient,    // Use for graph client api calls
  useAccount,     // React Hook to give access to account info in child components
} = configureMsal({
  config,                                                // Required
  msalScopes: [Scopes.OPEN_ID, Scopes.CUSTOM_SCOPE],     // Optional (But Recommended)
  graphClientScopes: [                                   // Optional (But Recommended
    Scopes.USER_READ,
  ],
})

const App = () => (
  <AuthProvider
    render={({ state, account }) =>
      state === AuthProviderState.Success ? (
        <div>Logged in as {account.username} </div>
      ) : (
        <div>Loading..</div>
      )
    }
  />
);