Samouczek: tworzenie usługi React SPA na potrzeby uwierzytelniania w dzierżawie zewnętrznej

Artykuł
07/25/2024

Ten samouczek jest częścią 2 serii, która demonstruje tworzenie jednostronicowej aplikacji React (zabezpieczanie uprzywilejowanego dostępu (SPA)) i przygotowanie jej do uwierzytelniania przy użyciu centrum administracyjnego firmy Microsoft Entra. W części 1 tej serii zarejestrowano aplikację i skonfigurowano przepływy użytkowników w dzierżawie zewnętrznej. W tym samouczku pokazano, jak utworzyć spa react przy użyciu i npm utworzyć pliki potrzebne do uwierzytelniania i autoryzacji.

W tym samouczku;

Tworzenie projektu React w programie Visual Studio Code
Instalowanie pakietów identity i bootstrap
Konfigurowanie ustawień aplikacji

Wymagania wstępne

Samouczek: przygotowanie dzierżawy zewnętrznej do uwierzytelniania użytkowników w aplikacji React SPA.
Mimo że można używać dowolnego zintegrowanego środowiska projektowego (IDE), które obsługuje aplikacje React, w tym samouczku jest używany program Visual Studio Code.
Node.js.

Tworzenie projektu React

Otwórz program Visual Studio Code, wybierz pozycję Plik>Otwórz folder.... Przejdź do i wybierz lokalizację, w której chcesz utworzyć projekt.
Otwórz nowy terminal, wybierając pozycję Terminal>Nowy terminal.
Uruchom następujące polecenia, aby utworzyć nowy projekt React o nazwie reactspalocal, zmienić na nowy katalog i uruchomić projekt React. Przeglądarka internetowa zostanie otwarta z adresem http://localhost:3000/ domyślnie. Przeglądarka pozostaje otwarta i rerenders dla każdej zapisanej zmiany.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

Utwórz dodatkowe foldery i pliki, aby uzyskać następującą strukturę folderów:

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

Instalowanie zależności aplikacji

Aby umożliwić uwierzytelnianie użytkowników, należy zainstalować pakiety npm powiązane z tożsamościami w projekcie. W przypadku stylów projektu jest używany bootstrap .

Na pasku terminalu wybierz ikonę+, aby utworzyć nowy terminal. Zostanie otwarte nowe okno terminalu umożliwiające kontynuowanie działania drugiego terminalu w tle.
W razie potrzeby przejdź do reactspalocal i wprowadź następujące polecenia w terminalu, aby zainstalować msal pakiety i bootstrap .
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Tworzenie pliku konfiguracji uwierzytelniania authConfig.js

W folderze src otwórz authConfig.js i dodaj następujący fragment kodu:

/*
 * 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"
// };

Zastąp następujące wartości wartości wartościami z witryny Azure Portal:
- Enter_the_Application_Id_Here Znajdź wartość i zastąp ją identyfikatorem aplikacji (clientId) aplikacji zarejestrowanej w centrum administracyjnym firmy Microsoft Entra.
- W obszarze Urząd znajdź Enter_the_Tenant_Subdomain_Here i zastąp ją poddomeną dzierżawy. Jeśli na przykład domena podstawowa dzierżawy to contoso.onmicrosoft.com, użyj polecenia contoso. Jeśli nie masz swojej nazwy dzierżawy, dowiedz się, jak odczytywać szczegóły dzierżawy.
Zapisz plik.

Użyj niestandardowej domeny adresu URL (opcjonalnie)

Użyj domeny niestandardowej, aby w pełni oznaczyć adres URL uwierzytelniania. Z perspektywy użytkownika użytkownicy pozostają w domenie podczas procesu uwierzytelniania, a nie przekierowywani do ciamlogin.com nazwy domeny.

Aby użyć domeny niestandardowej, wykonaj następujące czynności:

Wykonaj kroki opisane w temacie Włączanie niestandardowych domen url dla aplikacji w dzierżawach zewnętrznych, aby włączyć niestandardową domenę adresu URL dla dzierżawy zewnętrznej.
W pliku authConfig.js znajdź następnie auth obiekt, a następnie:
1. Zaktualizuj wartość authority właściwości na https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Zastąp Enter_the_Custom_Domain_Here ciąg domeną niestandardowego adresu URL i Enter_the_Tenant_ID_Here identyfikatorem dzierżawy. Jeśli nie masz identyfikatora dzierżawy, dowiedz się, jak odczytywać szczegóły dzierżawy.
2. Dodaj knownAuthorities właściwość o wartości [Enter_the_Custom_Domain_Here].

Po wprowadzeniu zmian w pliku authConfig.js , jeśli domena niestandardowego adresu URL jest login.contoso.com, a identyfikator dzierżawy to aaaabbbb-0000-cccc-1111-dddd2222eeeee, plik powinien wyglądać podobnie do następującego fragmentu kodu:

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

Modyfikowanie index.js w celu uwzględnienia dostawcy uwierzytelniania

Wszystkie części aplikacji, które wymagają uwierzytelniania, muszą być opakowane w składnik.MsalProvider Następnie należy utworzyć wystąpienie elementu PublicClientApplication , a następnie przekazać go do elementu MsalProvider.

W folderze src otwórz index.js i zastąp zawartość pliku następującym fragmentem kodu, aby użyć msal pakietów i stylu bootstrap:

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}/>
);

Następny krok

Część 3. Obsługa przepływów uwierzytelniania w aplikacji React SPA

Udostępnij za pośrednictwem