React Azure AD 返回空白页

Question

我有一个希望添加 Azure 登录身份验证的 React 应用程序。

在没有 Azure AD 的情况下调用 index.js 中的 App.js 的原始代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import 'index.css';
import App from 'App';
import * as serviceWorker from 'serviceWorker';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from 'store/reducer'

//, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    {/* <React.StrictMode> */}
    <App />
    {/* </React.StrictMode> */}
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

添加 Azure AD 后：

import React from 'react';
import ReactDOM from 'react-dom';
import 'index.css';
import App from 'App';
import * as serviceWorker from 'serviceWorker';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from 'store/reducer'

import { AzureAD } from 'react-aad-msal';
import { authProvider } from './authProvider';

ReactDOM.render(
  <AzureAD provider={authProvider} forceLogin={true}>
     <App />
   </AzureAD>,
   document.getElementById('root'),
 );
serviceWorker.unregister();

以上代码可以通过我的组织Azure登录。但是登录成功后会显示一个空白页面，即使我尝试将<App />更改为<h1>Hello World</h1>仍然是空白。

您对此有何见解？非常感谢！

参考： https://medium.com/@pavelray/connect-your-react-app-with-azure-ad-using-3ddd39223d27 https://www.npmjs.com/package/react-aad-msal

Answer 1

我已经按照您提供的文档进行了测试，确实有效，但我做了一些我认为是错误的更改。在我看来，重定向 url 似乎有问题。

这是我的配置，请注意我使用的是“http://localhost:3000”而不是文档中提到的“https”。当然，我在 azure 门户中设置了相同的重定向 url。然后成功了，我可以在登录后重定向到主页。

import { MsalAuthProvider, LoginType } from 'react-aad-msal';

// Msal Configurations
const config = {
    auth: {
      authority: 'https://login.microsoftonline.com/common',
      clientId: '<client-id>',
      redirectUri: 'http://localhost:3000'
    },
    cache: {
      cacheLocation: "localStorage",
      storeAuthStateInCookie: true
    }
  };
   
  // Authentication Parameters
  const authenticationParameters = {
    scopes: [
    //   '<property (i.e. user.read)>',
    //   'https://<your-tenant-name>.onmicrosoft.com/<your-application-name>/<scope (i.e. demo.read)>'
        'user.read'
    ]
  }
   
  // Options
  const options = {
    loginType: LoginType.Popup,
    tokenRefreshUri: window.location.origin + '/auth.html'
  }
   
  export const authProvider = new MsalAuthProvider(config, authenticationParameters, options)

最后，我找到了a doc，上面写着Microsoft is currently in process of building an official @azure/msal-react library which will replace react-aad-msal，所以如果你准备改变主意，我认为本页中的samples 可以帮助你。它包含 one 使用 @azure/msal-react。