Интеграция MSAL и React-Admin - PullRequest
Новая
       11

Интеграция MSAL и React-Admin

0 голосов
/ 06 мая 2020

Как правильно интегрировать MSAL с React-Admin.

Я использовал код, предоставленный Microsoft, и поместил его в Конструктор в приложении. js и он отлично работает с использованием метода перенаправления, за исключением того, что Я продолжаю получать экран входа в React-Admin по умолчанию за долю секунды, прежде чем он перенаправляется на страницу аутентификации MS.

Если я помещаю код MSAL на свою пользовательскую страницу входа (пустая страница), он переходит в al oop и аутентификация не работает.

Как мне избавиться от экрана входа в 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;

1 Ответ

1 голос
/ 08 мая 2020

Я немного поработал над вашим примером и у меня есть решение. Я прочитал в основном учебник React-Admin https://marmelab.com/react-admin/Tutorial.html, но также и пользовательские документы библиотеки React AAD MSAL https://www.npmjs.com/package/react-aad-msal#react -aad-msal

Пожалуйста, добавьте такой пакет в ваш проект через пример документации.

Мой код для приложения. 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)

Это решение отображает react-admin только при успешной проверке подлинности MS. Он вообще не использует страницу входа по умолчанию.

Следующим шагом, вероятно, будет объединение этого решения с использованием кнопки выхода из системы response-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

...