msal-react :未能获取

Question

我在用：

• "@azure/msal-browser"："^2.11.2"，
• "@azure/msal-react"："^1.0.0-alpha.6"

我的配置：

const configuration: Configuration = {
  auth: {
    clientId: CLIENT_ID,
    authority: `${AUTHORITY}${TENANT}`,
    redirectUri: window.location.origin,
  },
  cache: {
    cacheLocation: BrowserCacheLocation.LocalStorage,
  },
}

export const pca = new PublicClientApplication(configuration)

应用程序：

const authRequest = {
  scopes: [
    'openid',
    'profile',
    'User.Read'
  ],
}


const App = () => {
  return (
    <div>Nice</div>
  )
}

const app = (
  <MsalProvider instance={pca}>
    <MsalAuthenticationTemplate
      interactionType={InteractionType.Redirect}
      authenticationRequest={authRequest}
      errorComponent={ErrorComponent}
      loadingComponent={LoadingComponent}>
      <Router>
        <StrictMode>
          <App/>
        </StrictMode>
      </Router>
    </MsalAuthenticationTemplate>
  </MsalProvider>
)

重定向工作，我登录公司帐户，然后我将被重定向回本地主机。但是:在控制台中获得以下错误：

TypeError:未能获取

LocalStorage：

{"failedRequests":865，"ac1b77cf-4d4f-4917-a0cf-6e9fdda4a8f3"，“failedRequests”：“TypeError:未能获取”，"cacheHits":0}

而App组件也不会呈现。呈现ErrorComponent。

与示例有相同的问题：https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/typescript-sample

我发现了网络中的CORS错误: Request：https://login.microsoftonline.com/******-aa2f-23**-****-************/oauth2/v2.0/token，这很奇怪，因为同样的重定向url适用于react。

我认为这个问题的发生是因为Azure应用程序配置错误：

清单：

{
"allowPublicClient": null,
"oauth2AllowIdTokenImplicitFlow": true,
"oauth2AllowImplicitFlow": true,
"oauth2Permissions": [],
"oauth2RequirePostResponse": false
}

oauth2AllowImplicitFlow绝对应该是错误的。

有人能为我提供舱单的工作示例吗？

Answer 1

几天前我遇到了这个问题。

对我来说，问题是注册申请的类型不正确。请尝试将应用程序注册为“单页”应用程序，而不是"Web“应用程序，这样您就不会看到这个问题。