javascript - 客户端验证错误: Token calls are blocked in hidden iframes

Question

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

当为我的 API 请求访问 token 时

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)

我的网页似乎仍然按预期工作，但我真的不愿意携带 Unresolved 错误，因此我正在尝试找出问题的原因。

试图解决这个问题I have found this issue on github这看起来很像我的问题。它确认 acquireTokenSilent 确实创建了一个 iFrame，该 iFrame 重定向回主 spa 应用程序(然后尝试登录并请求 token ......所以基本上是无休止的递归)。这就是它被阻止的原因。

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

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

这并没有解决问题，而且很难看出是否使用了重定向。其他建议是在我尝试获取 token 的所有地方检查网址中是否有“#”，但这并不好，因为“#”在 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>
      )
    }
  />
);