Поделиться через

Руководство. Добавление входа и выхода в React SPA для внешнего клиента

  • Статья

В этом руководстве представлена окончательная часть серии, демонстрирующая создание одностраничного приложения React (SPA) и подготовка его к проверке подлинности с помощью Центра администрирования Microsoft Entra. В части 3 этой серии вы создали SPA React в Visual Studio Code и настроили его для проверки подлинности. На этом последнем шаге показано, как добавить функции входа и выхода в приложение.

В этом руководстве;

  • Создание макета страницы и добавление интерфейса входа и выхода
  • Замените функцию по умолчанию для отрисовки сведений, прошедших проверку подлинности
  • Вход и выход из приложения с помощью пользовательского потока

Необходимые компоненты

Изменение имени файла и добавление функции для отображения сведений, прошедших проверку подлинности

По умолчанию приложение выполняется через файл JavaScript с именем App.js. Он должен быть изменен на JSX, который является расширением, которое позволяет разработчику писать HTML в React.

  1. Убедитесь, что App.js переименован в App.jsx.

  2. Замените существующий код следующим фрагментом кода:

     import { MsalProvider, AuthenticatedTemplate, useMsal, UnauthenticatedTemplate } from '@azure/msal-react';
 import { Container, Button } from 'react-bootstrap';
 import { PageLayout } from './components/PageLayout';
 import { IdTokenData } from './components/DataDisplay';
 import { loginRequest } from './authConfig';

 import './styles/App.css';

 /**
  * Most applications will need to conditionally render certain components based on whether a user is signed in or not. 
  * msal-react provides 2 easy ways to do this. AuthenticatedTemplate and UnauthenticatedTemplate components will 
  * only render their children if a user is authenticated or unauthenticated, respectively. For more, visit:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
  */
 const MainContent = () => {
     /**
      * useMsal is hook that returns the PublicClientApplication instance,
      * that tells you what msal is currently doing. For more, visit:
      * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md
      */
     const { instance } = useMsal();
     const activeAccount = instance.getActiveAccount();

     const handleRedirect = () => {
         instance
             .loginRedirect({
                 ...loginRequest,
                 prompt: 'create',
             })
             .catch((error) => console.log(error));
     };
     return (
         <div className="App">
             <AuthenticatedTemplate>
                 {activeAccount ? (
                     <Container>
                         <IdTokenData idTokenClaims={activeAccount.idTokenClaims} />
                     </Container>
                 ) : null}
             </AuthenticatedTemplate>
             <UnauthenticatedTemplate>
                 <Button className="signInButton" onClick={handleRedirect} variant="primary">
                     Sign up
                 </Button>
             </UnauthenticatedTemplate>
         </div>
     );
 };


 /**
  * msal-react is built on the React context API and all parts of your app that require authentication must be 
  * wrapped in the MsalProvider component. You will first need to initialize an instance of PublicClientApplication 
  * then pass this to MsalProvider as a prop. All components underneath MsalProvider will have access to the 
  * PublicClientApplication instance via context as well as all hooks and components provided by msal-react. For more, visit:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
  */
 const App = ({ instance }) => {
     return (
         <MsalProvider instance={instance}>
             <PageLayout>
                 <MainContent />
             </PageLayout>
         </MsalProvider>
     );
 };

 export default App;

Запуск проекта и вход

Добавлены все необходимые фрагменты кода, поэтому приложение теперь можно протестировать в веб-браузере.

  1. Приложение уже должно работать в терминале. В противном случае выполните следующую команду, чтобы запустить приложение.

    npm start

  2. Откройте веб-браузер и перейдите к http://localhost:3000/ ней, если вы не перенаправляетесь автоматически.

  3. В целях работы с этим руководством выберите вариант входа с помощью параметра Всплывающего окна .

  4. После появления всплывающего окна с параметрами входа выберите учетную запись, с которой необходимо войти.

  5. Второе окно может появиться, указывающее, что код будет отправлен на ваш адрес электронной почты. В этом случае выберите "Отправить код". Откройте сообщение электронной почты от команды учетной записи майкрософт отправителя и введите семизначный код одноразового использования. После ввода нажмите кнопку "Войти".

  6. Чтобы оставаться в системе, можно выбрать "Нет" или "Да".

  7. Приложение запрашивает разрешение на вход и доступ к данным. Нажмите кнопку "Принять ", чтобы продолжить.

Выход из приложения

  1. Чтобы выйти из приложения, выберите " Выйти" на панели навигации.
  2. Появится окно с запросом учетной записи для выхода из нее.
  3. После успешного выхода появится окончательное окно, консультирование по закрытию всех окон браузера.

См. также