MSAL和React-Admin集成

Question

如何将MSAL与React-Admin正确集成。

我使用了微软提供的代码，并将其放在App.js的构造函数中，它使用重定向方法工作得很好，除了在它重定向到MS身份验证页面之前，我会在瞬间得到一个默认的React-Admin登录屏幕。

如果我将MSAL代码放在我的自定义登录页面(空页面)中，它将进入循环，并且身份验证不起作用。

如何摆脱React-Admin登录屏幕？

import { UserAgentApplication } from 'msal';

class App extends Component {

    constructor(props) {
      super(props);

      this.userAgentApplication = new UserAgentApplication({
        auth: {
          clientId: config.appId,
          authority: config.authEndPoint,
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: true
        }
      });

      this.userAgentApplication.handleRedirectCallback(this.authCallback.bind(this));

      var user = this.userAgentApplication.getAccount();
      if (user != null) {
        localStorage.setItem('token', user.idToken);
        localStorage.setItem('userName', user.userName);
        const userName = user.userName.toString();

        fetch('http://localhost:5000/getuserid', {
          mode: 'cors',
          method: "GET",
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'USERNAME': userName
          },
        }).then(res => res.json())
          .then(res => {
            if (res.id != null) {
                localStorage.setItem('userID', res.id);
            } else {
              console.log('Failed to retreived id');
            }
          }).catch(
            err => console.log(err))
      }

      this.state = {
        isAuthenticated: (user !== null),
        user: {},
        error: null
      };

      if (user) {
        // Enhance user object with data from Graph
        //this.getUserProfile();
      }
      else {
        const loginRequest = {
          scopes: ["https://graph.microsoft.com/User.Read"]
        }

        this.userAgentApplication.loginRedirect(loginRequest);
      }
    }

    authCallback(error, response) {
      //handle redirect response
      this.setState({
        authenticated: true
      });
    }

  render() {
    return (
      <Admin title="MyApp" >
    ...
      </Admin>
    );
  }
}
export default App;

Answer 1

我在你的例子上做了一些工作，我有一个解决方案。我读过大部分的React-Admin Tutorial https://marmelab.com/react-admin/Tutorial.html，还有一个自定义的React AAD MSAL库docs https://www.npmjs.com/package/react-aad-msal#react-aad-msal

请通过docs示例将这样的包添加到您的项目中。

我的App.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import {Admin, ListGuesser, Resource} from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import { AzureAD } from 'react-aad-msal';

// import App from './App';
import { authProvider } from './authProvider';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

const AdminApp = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="users" list={ListGuesser}/>
  </Admin>
);

const App = () => (
  <AzureAD provider={authProvider} forceLogin={true}>
    <AdminApp />
  </AzureAD>
);

export default App;

而对于authProvider.js

// authProvider.js
import { MsalAuthProvider, LoginType } from 'react-aad-msal';

// Msal Configurations
const config = {
  auth: {
    authority: 'https://login.microsoftonline.com/MY_TENANT_ID/',
    clientId: 'MY_APP_ID',
    redirectUri: 'http://localhost:3000/'
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};

// Authentication Parameters
const authenticationParameters = {
  scopes: [
    'User.Read'
  ]
}

// Options
const options = {
  loginType: LoginType.Redirect,
  tokenRefreshUri: window.location.origin + '/auth.html'
}

export const authProvider = new MsalAuthProvider(config, authenticationParameters, options)

该解决方案仅在MS身份验证成功时显示react-admin。它根本没有使用默认的登录页面。

下一步，这里可能会将该解决方案与基于以下文档的react-admin注销按钮合并：https://marmelab.com/react-admin/doc/2.8/Authentication.html#customizing-the-login-and-logout-components以及如何调用以下MSAL注销函数：https://www.npmjs.com/package/react-aad-msal#azuread-component