Kurz: Příprava React jednostránkové aplikace (SPA) na ověřování v tenantovi zákazníka

Článek
09/22/2023

V předchozím článku jste zaregistrovali aplikaci a nakonfigurovali toky uživatelů ve svém ID Microsoft Entra pro tenanta zákazníka. Tento kurz ukazuje, jak vytvořit React jednostránkovou aplikaci pomocí npm a vytvořit soubory potřebné k ověřování a autorizaci.

V tomto kurzu;

Vytvoření projektu React v editoru Visual Studio Code
Instalace balíčků identity a bootstrap
Konfigurace nastavení aplikace

Požadavky

Splnění požadavků a kroků v tématu Příprava tenanta zákazníka na ověřování uživatelů v React jednostránkové aplikaci (SPA)
I když je možné použít jakékoli integrované vývojové prostředí (IDE), které podporuje React aplikace, tento kurz používá Visual Studio Code. Můžete si ho stáhnout tady.
Node.js.

Vytvoření projektu React

Otevřete Visual Studio Code a vyberte Soubor>Otevřít složku.... Přejděte do umístění, ve kterém chcete projekt vytvořit, a vyberte ho.
Otevřete nový terminál výběrem možnosti Nový terminál>.
Spuštěním následujících příkazů vytvořte nový projekt React s názvem reactspalocal, přejděte do nového adresáře a spusťte React projekt. Ve výchozím nastavení se otevře webový prohlížeč s adresou http://localhost:3000/ . Prohlížeč zůstane otevřený a při každé uložené změně se znovu vykreslí.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

Vytvořte další složky a soubory, abyste dosáhli následující struktury složek:

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

Instalace závislostí aplikací

Aby bylo možné povolit ověřování uživatelů, musí být v projektu nainstalované balíčky npm související s identitou. Pro styl projektu se používá bootstrap .

Na panelu terminálu vyberte ikonu + a vytvořte nový terminál. Otevře se nové okno terminálu, které umožní, aby druhý terminál běžel na pozadí.
V případě potřeby přejděte na reactspalocal a zadáním následujících příkazů do terminálu nainstalujte msal balíčky a bootstrap .
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Vytvořte konfigurační soubor ověřování authConfig.js

Ve složce src otevřete authConfig.js a přidejte následující fragment kódu:

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

Nahraďte následující hodnoty hodnotami z Azure Portal:
- Enter_the_Application_Id_Here Vyhledejte hodnotu a nahraďte ji ID aplikace (clientId) aplikace, kterou jste zaregistrovali v centru pro správu Microsoft Entra.
- V části Autorita ji vyhledejte Enter_the_Tenant_Subdomain_Here a nahraďte subdoménou vašeho tenanta. Pokud je contoso.onmicrosoft.comnapříklad primární doména vašeho tenanta , použijte contoso. Pokud název tenanta nemáte, přečtěte si, jak si přečíst podrobnosti o tenantovi.
Soubor uložte.

Úprava index.js tak, aby zahrnovala zprostředkovatele ověřování

Všechny části aplikace, které vyžadují ověření, musí být zabalené v komponentě MsalProvider . Vytvoříte instanci aplikace PublicClientApplication a pak ji předáte do MsalProvider.

Ve složce src otevřete index.js a nahraďte obsah souboru následujícím fragmentem kódu, který použije msal balíčky a styl 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}/>
);

Další kroky

Konfigurace SPA pro ověřování

Share via