Sdílet prostřednictvím

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

Platí pro: Zelený kruh se symbolem bílé značky zaškrtnutí, který označuje následující obsah platí pro tenanty pracovních sil. Tenanti pracovních sil zelený kruh se symbolem bílé značky zaškrtnutí, který označuje následující obsah platí pro externí tenanty. Externí tenanti (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 se naučíte:

  • 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, která je nakonfigurovaná jenom pro účty v tomto organizačním adresáři. Další podrobnosti najdete v tématu Registrace aplikace . Na stránce Přehled aplikace si poznamenejte následující hodnoty pro pozdější použití:
    • ID aplikace (klienta)
    • ID adresáře (klienta)
  • Přidejte následující identifikátory URI přesměrování pomocí konfigurace platformy jednostránkové aplikace. Další podrobnosti najdete v tématu Jak přidat URI pro přesměrování ve vaší aplikaci.
    • 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', // 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.getAllAccounts()[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

  • Last updated on