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

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

  • Статья

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

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

  • Создание проекта React
  • Настройка параметров для приложения
  • Установка пакетов удостоверений и начальной загрузки
  • Добавление кода проверки подлинности в приложение

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

  • Завершение предварительных требований и шагов в руководстве. Регистрация приложения.
  • Хотя можно использовать любую интегрированную среду разработки, поддерживающую приложения React, для этого руководства используются следующие среды разработки Visual Studio. Их можно скачать с страницы загрузки. Для пользователей macOS рекомендуется использовать Visual Studio Code.
    • Visual Studio 2022 год
    • Visual Studio Code
  • Node.js.

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

Чтобы создать проект React в интегрированной среде разработки, используйте следующие вкладки.

  1. Откройте Visual Studio и нажмите кнопку "Создать проект".

  2. Найдите и выберите автономный шаблон проекта JavaScript React, а затем нажмите кнопку "Далее".

  3. Введите имя проекта, например Reactspalocal.

  4. Выберите расположение проекта или примите параметр по умолчанию, а затем нажмите кнопку "Далее".

  5. В разделе "Дополнительные сведения" выберите "Создать".

  6. На панели инструментов нажмите кнопку "Пуск без отладки" , чтобы запустить приложение. Веб-браузер по умолчанию откроется с адресом http://localhost:3000/ . Браузер остается открытым и повторно отрисовывает все сохраненные изменения.

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

    ├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── PageLayout.jsx
    │   └─── ProfileData.jsx
    │   └─── SignInButton.jsx
    │   └─── SignOutButton.jsx
    └── App.css
    └── App.jsx
    └── authConfig.js
    └── graph.js
    └── index.css
    └── index.js

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

Пакеты npm, связанные с удостоверениями, должны быть установлены в проекте, чтобы включить проверку подлинности пользователя. Для стиля проекта будет использоваться начальная загрузка .

  1. В Обозреватель решений щелкните правой кнопкой мыши параметр npm и выберите "Установить новые пакеты npm".
  2. Найдите @azure/MSAL-browser, а затем выберите "Установить пакет". Повторите для @azure/MSAL-react.
  3. Найдите и установите react-bootstrap.
  4. Выберите Закрыть.

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

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

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

    /*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

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",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        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: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
};

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

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

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

Изменение index.js включения поставщика проверки подлинности

Все части приложения, для которых требуется проверка подлинности, должны быть упакованы в MsalProvider компонент. Создайте экземпляр PublicClientApplication , а затем передайте его MsalProviderв .

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

    import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './authConfig';

// Bootstrap components
import 'bootstrap/dist/css/bootstrap.min.css';

const msalInstance = new PublicClientApplication(msalConfig);

const root = ReactDOM.createRoot(document.getElementById('root'));

/**
 * We recommend wrapping most or all of your components in the MsalProvider component. It's best to render the MsalProvider as close to the root as possible.
 */
 root.render(
  <React.StrictMode>
      <MsalProvider instance={msalInstance}>
          <App />
      </MsalProvider>
  </React.StrictMode>
);

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

Следующие шаги

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