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

Руководство. Создание одностраничного приложения React и подготовка его к проверке подлинности

  • Статья

применяется к: зеленый круг с символом белой флажки. арендаторы рабочей силы зеленый круг с символом белой галочки. внешние клиенты (подробнее)

В этом руководстве вы создадите одностраничное приложение на React и подготовите его для аутентификации с использованием платформы идентификации Microsoft. В этом руководстве показано, как создать SPA React с помощью npm, создать файлы, необходимые для проверки подлинности и авторизации, и добавить сведения о клиенте в исходный код. Приложение может быть использовано для сотрудников в арендуемой рабочей системе или для клиентов, использующих внешнюю арендуемую систему.

В этом руководстве описано следующее:

  • Создание проекта React
  • Установка пакетов, необходимых для проверки подлинности
  • Создание структуры файлов и добавление кода в файл сервера
  • Добавьте сведения о тенанте в файл конфигурации проверки подлинности

Необходимые условия

  • Арендатор рабочей силы. Вы можете использовать каталог по умолчанию или настроить нового арендатора.
  • Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra с помощью следующей конфигурации. Дополнительные сведения см. в разделе Регистрация приложения.
    • Имя: identity-client-spa
    • Поддерживаемые типы учетных записей: Учетные записи только в этом каталоге организации (единственный клиент).
    • конфигурация платформы: одностраничные приложения (SPA).
    • URI для перенаправления: http://localhost:3000/.

Создание проекта React

  1. Откройте Visual Studio Code, выберите Файл>Открыть папку.... Перейдите к папке и выберите место для создания проекта.

  2. Откройте новый терминал, выбрав терминал>новый терминал.

  3. Выполните следующие команды, чтобы создать проект React с именем reactspalocal, изменить новый каталог и запустить проект React. Веб-браузер откроется с адресом http://localhost:3000/ по умолчанию. Браузер остается открытым и повторно отрисовывает все сохраненные изменения.

    npx create-react-app reactspalocal
cd reactspalocal
npm start

  4. Создайте дополнительные папки и файлы для достижения следующей структуры папок:

    ├─── public
│   └─── index.html
└───src
    └─── styles
    │   └─── App.css
    │   └─── index.css
    ├─── utils
    │   └─── claimUtils.js
    ├─── components
    │   └─── DataDisplay.jsx
    │   └─── NavigationBar.jsx
    │   └─── PageLayout.jsx
    └── App.jsx
    └── authConfig.js
    └── index.js

Установка пакетов идентификации и начальной загрузки

Для включения аутентификации пользователей в проекте необходимо установить npm-пакеты, связанные с идентификацией . Для стиля проекта будет использоваться Bootstrap.

  1. На панели терминала выберите значок +, чтобы создать новый терминал. Отдельное окно терминала откроется с предыдущим терминалом узла, продолжающим работать в фоновом режиме.

  2. Убедитесь, что выбран правильный каталог (reactspalocal), а затем введите следующий код в терминал для установки соответствующих msal и пакетов bootstrap.

    npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap

Добавление сведений о клиенте в конфигурацию MSAL

Файл authConfig.js содержит параметры конфигурации для потока проверки подлинности и используется для настройки MSAL.js с необходимыми параметрами для проверки подлинности.

  1. В папке src откройте authConfig.js и добавьте следующий фрагмент кода:

    
 import { LogLevel } from '@azure/msal-browser';

 /**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */

 export const msalConfig = {
     auth: {
         clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
         authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Replace the placeholder with your tenant info
         redirectUri: 'http://localhost:3000/redirect', // Points to window.location.origin. You must register this URI on Microsoft Entra admin center/App Registration.
         postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
         navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
     },
     cache: {
         cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
         storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
     },
     system: {
         loggerOptions: {
             loggerCallback: (level, message, containsPii) => {
                 if (containsPii) {
                     return;
                 }
                 switch (level) {
                     case LogLevel.Error:
                         console.error(message);
                         return;
                     case LogLevel.Info:
                         console.info(message);
                         return;
                     case LogLevel.Verbose:
                         console.debug(message);
                         return;
                     case LogLevel.Warning:
                         console.warn(message);
                         return;
                     default:
                         return;
                 }
             },
         },
     },
 };

 /**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
 export const loginRequest = {
     scopes: [],
 };

 /**
 * An optional silentRequest object can be used to achieve silent SSO
 * between applications by providing a "login_hint" property.
 */
 // export const silentRequest = {
 //     scopes: ["openid", "profile"],
 //     loginHint: "example@domain.net"
 // };

  2. Замените следующие значения значениями из Центра администрирования Microsoft Entra.

    • clientId — идентификатор приложения, который также называется клиентом. Замените Enter_the_Application_Id_Here значением идентификатора клиента , записанного ранее на странице обзора зарегистрированного приложения.
    • authority — это состоит из двух частей:
      • экземпляра является конечной точкой поставщика облачных служб. Ознакомьтесь с различными доступными конечными точками в национальных облаках .
      • Идентификатор клиента — это идентификатор клиента, в котором зарегистрировано приложение. Замените Enter_the_Tenant_Info_Here значением идентификатора каталога (клиента), которое было записано ранее на странице обзора зарегистрированного приложения.

  3. Сохраните файл.

Добавление поставщика проверки подлинности

Пакеты msal используются для проверки подлинности в приложении. Пакет msal-browser используется для обработки потока проверки подлинности, а пакет msal-react используется для интеграции msal-browser с React. addEventCallback используется для прослушивания событий, происходящих во время процесса проверки подлинности, например при успешном входе пользователя. Метод setActiveAccount используется для задания активной учетной записи приложения, которая используется для определения отображаемых сведений пользователя.

  1. В папке src откройте index.js и замените содержимое файла на следующий фрагмент кода, чтобы использовать пакеты msal и Bootstrap-стили.

    import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { PublicClientApplication, EventType } from '@azure/msal-browser';
import { msalConfig } from './authConfig';

import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/index.css';

/**
* MSAL should be instantiated outside of the component tree to prevent it from being re-instantiated on re-renders.
* For more, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const msalInstance = new PublicClientApplication(msalConfig);

// Default to using the first account if no account is active on page load
if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
    // Account selection logic is app dependent. Adjust as needed for different use cases.
    msalInstance.setActiveAccount(msalInstance.getActiveAccount()[0]);
}

// Listen for sign-in event and set active account
msalInstance.addEventCallback((event) => {
    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
        const account = event.payload.account;
        msalInstance.setActiveAccount(account);
    }
});

const root = createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

  2. Сохраните файл.

Дополнительные сведения об этих пакетах см. в документации по msal-browser и msal-react.

Добавление основного компонента приложения

Все части приложения, для которых требуется проверка подлинности, должны быть упакованы в компонент MsalProvider. Вы задаете переменную instance, которая вызывает перехватчик useMsal, чтобы получить экземпляр PublicClientApplication, а затем передать его в MsalProvider. Компонент MsalProvider делает экземпляр PublicClientApplication доступным во всем приложении через API контекста React. Все компоненты под MsalProvider будут иметь доступ к экземпляру PublicClientApplication через контекст, а также ко всем хукам и компонентам, предоставляемым msal-react.

  1. В папке src откройте App.jsx и замените содержимое файла следующим фрагментом кода:

    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;

  2. Сохраните файл.

Дальнейшие действия

руководство : создание компонентов для входа и выхода в одностраничное приложение React