reactjs - React Azure AD 返回空白页

Question

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

在没有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

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

这是我的配置，请注意我使用了“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其中表示微软目前正在构建一个官方@azure/msal-react库，它将取代react-aad-msal，所以如果你准备改变主意，我认为samples此页面中的内容可以帮助您。它包含one使用@azure/msal-react。