Руководство. Создание SPA React для проверки подлинности во внешнем клиенте

Мақала
06/27/2024

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

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

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

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

Руководство. Подготовка внешнего клиента к проверке подлинности пользователей в SPA React.
Хотя можно использовать любую интегрированную среду разработки (IDE), поддерживающую приложения React, в этом руководстве используется Visual Studio Code.
Node.js.

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

Откройте Visual Studio Code, выберите "Открыть папку">.... Перейдите к папке и выберите расположение, в котором нужно создать проект.
Откройте новый терминал, выбрав терминал>"Новый терминал".
Выполните следующие команды, чтобы создать проект React с именем reactspalocal, изменить новый каталог и запустить проект React. Веб-браузер по умолчанию открывается с адресом http://localhost:3000/ . Браузер остается открытым и rerenders для каждого сохраненного изменения.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

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

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

Установка зависимостей приложения

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

На панели терминала выберите + значок, чтобы создать новый терминал. Откроется новое окно терминала, позволяющее другому терминалу продолжать работать в фоновом режиме.
При необходимости перейдите к ответу и введите в терминал следующие команды, чтобы установить и bootstrap пакетыmsal.
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

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

В папке 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', // This is the ONLY mandatory field that you need to supply.
        authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant subdomain 
        redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure Portal/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/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"
// };

Замените следующие значения значениями из портал Azure:
- Enter_the_Application_Id_Here Найдите значение и замените его идентификатором приложения (clientId) приложения, зарегистрированного в Центре администрирования Microsoft Entra.
- В службе "Центр" найдите Enter_the_Tenant_Subdomain_Here и замените его поддоменом клиента. Например, если основной домен клиента — это contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени клиента, узнайте, как прочитать сведения о клиенте.
Сохраните файл.

Использование личного домена URL-адреса (необязательно)

Используйте личный домен для полной фирменной символики URL-адреса проверки подлинности. С точки зрения пользователя пользователи остаются в домене во время проверки подлинности, а не перенаправляются на ciamlogin.com доменное имя.

Чтобы использовать личный домен, выполните следующие действия.

Выполните действия, описанные в разделе "Включение пользовательских доменов URL-адресов" для приложений во внешних клиентах , чтобы включить личный ДОМЕН URL-адресов для внешнего клиента.
В файле authConfig.js найдите затем auth объект, а затем:
1. Измените значение authority свойства https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Hereна . Замените Enter_the_Custom_Domain_Here домен личного URL-адреса и Enter_the_Tenant_ID_Here идентификатором клиента. Если у вас нет идентификатора клиента, узнайте, как прочитать сведения о клиенте.
2. Добавьте knownAuthorities свойство со значением [Enter_the_Custom_Domain_Here].

После внесения изменений в файл authConfig.js, если ваш личный URL-адрес login.contoso.com, а идентификатор клиента — aaaabbbb-0000-cccc-1111-dd222eeee, файл должен выглядеть следующим фрагментом кода:

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

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

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

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

import React from 'react';
import ReactDOM 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 = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

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

Часть 3. Обработка потоков проверки подлинности в SPA React

Бөлісу құралы: