Delen via

Zelfstudie: Een React-toepassing met één pagina maken en voorbereiden op verificatie

  • Artikel

Van toepassing op: groene cirkel met een wit vinkje. Workforce-tenants Groene cirkel met een wit vinkje. Externe tenants (meer informatie)

In deze zelfstudie bouwt u een React-toepassing met één pagina (SPA) en bereidt u deze voor op verificatie met behulp van het Microsoft Identity Platform. Deze zelfstudie laat zien hoe u een React SPA maakt met behulp van npm, bestanden maakt die nodig zijn voor verificatie en autorisatie en hoe u uw tenantgegevens toevoegt aan de broncode. De toepassing kan worden gebruikt voor werknemers in een personeelstenant of voor klanten die een externe tenant gebruiken.

In deze zelfstudie gaat u het volgende doen:

  • Een nieuw React-project maken
  • Pakketten installeren die vereist zijn voor verificatie
  • Maak de bestandsstructuur en voeg code toe aan het serverbestand
  • Voeg uw tenantgegevens toe aan het configuratiebestand voor verificatie

Voorwaarden

  • Een personeelstenant. U kunt uw Default Directory- gebruiken of een nieuwe tenant instellen.
  • Registreer een nieuwe app in het Microsoft Entra-beheercentrum met de volgende configuratie. Zie Een toepassing registrerenvoor meer informatie.
    • naam: identity-client-spa
    • Ondersteunde accounttypen: alleen accounts in deze organisatiemap (één tenant).
    • Platformconfiguratie: Single Page Application (SPA).
    • redirect-URI: http://localhost:3000/.

Een nieuw React-project maken

  1. Open Visual Studio Code, selecteer Bestand>Map openen.... Navigeer naar en selecteer de locatie waar u uw project wilt maken.

  2. Open een nieuwe terminal door Terminal>New Terminalte selecteren.

  3. Voer de volgende opdrachten uit om een nieuw React-project te maken met de naam reactspalocal, ga naar de nieuwe map en start het React-project. Een webbrowser wordt standaard geopend met het adres http://localhost:3000/. De browser blijft geopend en wordt opnieuw weergegeven voor elke opgeslagen wijziging.

    npx create-react-app reactspalocal
cd reactspalocal
npm start

  4. Maak extra mappen en bestanden om de volgende mapstructuur te bereiken:

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

Identiteits- en bootstrap-pakketten installeren

Identiteitsgerelateerde npm--pakketten moeten worden geïnstalleerd in het project om gebruikersverificatie in te schakelen. Voor projectstijl wordt Bootstrap- gebruikt.

  1. Selecteer in de terminalbalk het pictogram + om een nieuwe terminal te maken. Er wordt een afzonderlijk terminalvenster geopend met daarin het terminalvenster van de vorige node, dat nog steeds op de achtergrond draait.

  2. Zorg ervoor dat de juiste map is geselecteerd (reactspalocal) en voer vervolgens het volgende in de terminal in om de relevante msal en bootstrap pakketten te installeren.

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

Voeg uw tenantgegevens toe aan de MSAL-configuratie

Het bestand authConfig.js bevat de configuratie-instellingen voor de verificatiestroom en wordt gebruikt om MSAL.js te configureren met de vereiste instellingen voor verificatie.

  1. Open authConfig.js in de map src en voeg het volgende codefragment toe:

    
 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. Vervang de volgende waarden door de waarden uit het Microsoft Entra-beheercentrum.

    • clientId : de id van de toepassing, ook wel de client genoemd. Vervang Enter_the_Application_Id_Here door de toepassing (client) ID-waarde die eerder is vastgelegd op de Overzichtspagina van de geregistreerde toepassing.
    • authority - Dit bestaat uit twee delen:
      • Het Instance is het eindpunt van de cloudprovider. Controleer de verschillende beschikbare eindpunten in Nationale clouds.
      • De tenant-ID is de identificatie van de tenant waar de toepassing is geregistreerd. Vervang Enter_the_Tenant_Info_Here door de Directory (tenant) ID waarde die eerder is genoteerd op de overzichtspagina van de geregistreerde toepassing.

  3. Sla het bestand op.

De verificatieprovider toevoegen

De msal pakketten worden gebruikt om verificatie in de toepassing te bieden. Het msal-browser-pakket wordt gebruikt om de verificatiestroom te verwerken en het msal-react-pakket wordt gebruikt om msal-browser te integreren met React. addEventCallback wordt gebruikt om te luisteren naar gebeurtenissen die plaatsvinden tijdens het verificatieproces, bijvoorbeeld wanneer een gebruiker zich heeft aangemeld. De methode setActiveAccount wordt gebruikt om het actieve account voor de toepassing in te stellen. Deze wordt gebruikt om te bepalen welke gebruikersgegevens moeten worden weergegeven.

  1. Open index.js in de map src en vervang de inhoud van het bestand door het volgende codefragment om de msal pakketten en bootstrap-stijl te gebruiken:

    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. Sla het bestand op.

Raadpleeg de documentatie in msal-browser en msal-reactvoor meer informatie over deze pakketten.

Het hoofdtoepassingsonderdeel toevoegen

Alle onderdelen van de app waarvoor verificatie is vereist, moeten worden verpakt in het MsalProvider-onderdeel. U stelt een instance variabele in die de useMsal hook aanroept om het PublicClientApplication exemplaar op te halen en deze vervolgens door te geven aan MsalProvider. Het MsalProvider-onderdeel maakt het PublicClientApplication exemplaar beschikbaar in uw app via de Context-API van React. Alle componenten onder MsalProvider hebben via de context toegang tot de PublicClientApplication-instantie en tot alle hooks en componenten die door msal-reactworden geleverd.

  1. Open in de map srcApp.jsx en vervang de inhoud van het bestand door het volgende codefragment:

    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. Sla het bestand op.

Volgende stappen

Zelfstudie: Onderdelen maken voor aanmelden en afmelden in een React-app met één pagina