Sdílet prostřednictvím

Kurz: Vytvoření jednostrákové aplikace React a jeho příprava na ověřování

  • Článek

platí pro: zelený kruh se symbolem bílého zaškrtnutí. zaměstnanečtí nájemníci zelený kruh se symbolem bílého zaškrtnutí. externí nájemníci (další informace)

V tomto kurzu vytvoříte jednostránkovou aplikaci React (SPA) a připravíte ji na ověřování pomocí platformy Microsoft Identity Platform. Tento kurz ukazuje, jak vytvořit React SPA pomocí npm, vytvořit soubory potřebné k ověřování a autorizaci a přidat podrobnosti o tenantovi do zdrojového kódu. Aplikaci je možné použít pro zaměstnance v tenantovi pracovních sil nebo pro zákazníky, kteří používají externího tenanta.

V tomto kurzu:

  • Vytvoření nového projektu React
  • Instalace balíčků vyžadovaných pro ověřování
  • Vytvoření struktury souborů a přidání kódu do souboru serveru
  • Přidejte informace o tenantovi do konfiguračního souboru ověřování

Požadavky

  • Tenant pracovní síly. Můžete použít výchozí adresář nebo nastavit nového tenanta.
  • Zaregistrujte novou aplikaci v Centru pro správu Microsoft Entra s následující konfigurací. Další informace najdete v tématu Registrace aplikace.
    • název : identity-client-spa
    • podporované typy účtů: Účty v tomto adresáři organizace (jenom jeden tenant).
    • konfigurace platformy: Jednostránková aplikace (SPA).
    • URI pro přesměrování: http://localhost:3000/.

Vytvoření nového projektu React

  1. Otevřete Visual Studio Code, vyberte Soubor>Otevřít složku.... Přejděte a vyberte umístění, ve kterém chcete projekt vytvořit.

  2. Otevřete nový terminál tak, že vyberete Terminal>New Terminal.

  3. 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 projekt React. 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ě dojde k novému vykreslení.

    npx create-react-app reactspalocal
cd reactspalocal
npm start

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

    ├─── 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

Instalace balíčků identity a bootstrap

Aby bylo možné povolit ověřování uživatelů, musí být v projektu nainstalované npm balíčky identity. Pro stylování projektu se použije Bootstrap.

  1. Na panelu Terminál vyberte ikonu + a vytvořte nový terminál. Otevře se samostatné okno terminálu s předchozím terminálem uzlu, který bude dál běžet na pozadí.

  2. Ujistěte se, že je vybraný správný adresář (reactspalocal) a pak do terminálu zadejte následující příkaz, aby se nainstalovaly příslušné msal a bootstrap balíčky.

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

Přidání podrobností o tenantovi do konfigurace MSAL

Soubor authConfig.js obsahuje nastavení konfigurace pro tok ověřování a slouží ke konfiguraci MSAL.js s požadovanými nastaveními pro ověřování.

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

    
 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. Nahraďte následující hodnoty hodnotami z Centra pro správu Microsoft Entra.

    • clientId – identifikátor aplikace, označovaný také jako klient. Nahraďte Enter_the_Application_Id_Here hodnotou ID aplikace (klient), která byla zaznamenána dříve ze stránky přehledu registrované aplikace.
    • authority – skládá se ze dvou částí:
      • Instance je koncový bod poskytovatele cloudu. Ověřte různé dostupné koncové body v národních cloudech.
      • ID tenanta je identifikátor tenanta, ve kterém je aplikace zaregistrovaná. Nahraďte Enter_the_Tenant_Info_Here hodnotou ID Directory (tenant), která byla zaznamenána dříve ze stránky přehledu registrované aplikace.

  3. Uložte soubor.

Přidání zprostředkovatele ověřování

Balíčky msal slouží k zajištění ověřování v aplikaci. Balíček msal-browser slouží ke zpracování toku ověřování a balíček msal-react slouží k integraci msal-browser s Reactem. addEventCallback slouží k naslouchání událostem, ke kterým dochází během procesu ověřování, například při úspěšném přihlášení uživatele. Metoda setActiveAccount slouží k nastavení aktivního účtu aplikace, který slouží k určení informací o uživateli, které se mají zobrazit.

  1. Ve složce src otevřete index.js a nahraďte obsah souboru následujícím fragmentem kódu, abyste mohli použít balíčky msal a styl 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. Uložte soubor.

Další informace o těchto balíčcích najdete v dokumentaci v msal-browser a msal-react.

Přidání hlavní součásti aplikace

Všechny části aplikace, které vyžadují ověření, musí být zabalené do komponenty MsalProvider. Nastavíte proměnnou instance, která volá hák useMsal, aby získala instanci PublicClientApplication, a poté ji předáte MsalProvider. Komponenta MsalProvider zpřístupňuje instanci PublicClientApplication v celé aplikaci prostřednictvím kontextového rozhraní API Reactu. Všechny komponenty pod MsalProvider budou mít přístup k instanci PublicClientApplication prostřednictvím kontextu a také ke všem hákům a komponentám poskytovaným msal-react.

  1. Ve složce src otevřete App.jsx a nahraďte obsah souboru následujícím fragmentem kódu:

    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. Uložte soubor.

Další kroky

kurz : Vytvoření komponent pro přihlášení a odhlášení v jednostráňové aplikaci React