Zelfstudie: Een React SPA maken voor verificatie in een externe tenant

Artikel
06/27/2024

Deze zelfstudie is deel 2 van een reeks die laat zien hoe u een React-toepassing met één pagina bouwt (bevoegde toegang beveiligen (BEVEILIGD-WACHTWOORDVERIFICATIE)) en deze voorbereidt op verificatie met behulp van het Microsoft Entra-beheercentrum. In deel 1 van deze reeks hebt u een toepassing geregistreerd en gebruikersstromen geconfigureerd in uw externe tenant. Deze zelfstudie laat zien hoe u een React SPA maakt met behulp van npm bestanden die nodig zijn voor verificatie en autorisatie.

In deze zelfstudie;

Een React-project maken in Visual Studio Code
Identiteits- en bootstrap-pakketten installeren
De instellingen voor de toepassing configureren

Vereisten

Zelfstudie: Uw externe tenant voorbereiden om gebruikers te verifiëren in een React SPA.
Hoewel elke IDE (Integrated Development Environment) die React-toepassingen ondersteunt, kan worden gebruikt, maakt deze zelfstudie gebruik van Visual Studio Code.
Node.js.

Een React-project maken

Open Visual Studio Code, selecteer Map>openen.... Navigeer naar en selecteer de locatie waar u uw project wilt maken.
Open een nieuwe terminal door Terminal>New Terminal te selecteren.
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. Er wordt standaard een webbrowser geopend met het adres http://localhost:3000/ . De browser blijft geopend en wordt opnieuw gebruikt voor elke opgeslagen wijziging.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

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

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

App-afhankelijkheden installeren

Npm-pakketten met betrekking tot identiteiten moeten worden geïnstalleerd in het project om gebruikersverificatie in te schakelen. Voor projectstijl wordt Bootstrap gebruikt.

Selecteer in de terminalbalk het + pictogram om een nieuwe terminal te maken. Er wordt een nieuw terminalvenster geopend, zodat de andere terminal op de achtergrond kan worden uitgevoerd.
Navigeer zo nodig naar Reactspalocal en voer de volgende opdrachten in de terminal in om de msal en bootstrap pakketten te installeren.
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Maak het verificatieconfiguratiebestand authConfig.js

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

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

Vervang de volgende waarden door de waarden uit Azure Portal:
- Zoek de Enter_the_Application_Id_Here waarde en vervang deze door de toepassings-id (clientId) van de app die u hebt geregistreerd in het Microsoft Entra-beheercentrum.
- Zoek en vervang deze in AuthorityEnter_the_Tenant_Subdomain_Here door het subdomein van uw tenant. Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantnaam niet hebt, leest u de details van uw tenant.
Sla het bestand op.

Aangepast URL-domein gebruiken (optioneel)

Gebruik een aangepast domein om de verificatie-URL volledig te merken. Vanuit gebruikersperspectief blijven gebruikers in uw domein tijdens het verificatieproces in plaats van omgeleid naar ciamlogin.com domeinnaam.

Gebruik de volgende stappen om een aangepast domein te gebruiken:

Gebruik de stappen in Aangepaste URL-domeinen inschakelen voor apps in externe tenants om aangepast URL-domein in te schakelen voor uw externe tenant.
Zoek vervolgens in het authConfig.js-bestand naar auth het object en vervolgens:
1. Werk de waarde van de authority eigenschap bij naar https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Vervang Enter_the_Custom_Domain_Here door uw aangepaste URL-domein en Enter_the_Tenant_ID_Here door uw tenant-id. Als u uw tenant-id niet hebt, leest u de details van uw tenant.
2. Voeg knownAuthorities de eigenschap toe met een waarde [Enter_the_Custom_Domain_Here].

Nadat u de wijzigingen hebt aangebracht in uw authConfig.js-bestand, als uw aangepaste URL-domein is login.contoso.com en uw tenant-id aaaabb-0000-cccc-1111-dddd2222eeeee is, moet uw bestand er ongeveer uitzien als het volgende fragment:

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

Wijzig index.js om de verificatieprovider op te nemen

Alle onderdelen van de app waarvoor verificatie is vereist, moeten in het MsalProvider onderdeel worden verpakt. U instantieert een PublicClientApplication en geeft deze door aan MsalProvider.

Open index.js in de src-map 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 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}/>
);

Volgende stap

Deel 3: Verificatiestromen verwerken in een React SPA

Share via