Esercitazione: Creare un'applicazione a pagina singola React per l'autenticazione in un tenant esterno

Articolo
06/27/2024

Questa esercitazione è la parte 2 di una serie che illustra la creazione di un'applicazione a pagina singola React (protezione dell'accesso con privilegi)) e la preparazione per l'autenticazione tramite l'interfaccia di amministrazione di Microsoft Entra. Nella parte 1 di questa serie è stata registrata un'applicazione e sono stati configurati i flussi utente nel tenant esterno. Questa esercitazione illustra come creare un'applicazione a pagina singola React usando npm e creare file necessari per l'autenticazione e l'autorizzazione.

Contenuto dell'esercitazione:

Creare un progetto React in Visual Studio Code
Installare pacchetti identity e bootstrap
Configurare le impostazioni per l'applicazione

Prerequisiti

Esercitazione: Preparare il tenant esterno per autenticare gli utenti in un'applicazione a pagina singola React.
Anche se è possibile usare qualsiasi ambiente di sviluppo integrato (IDE) che supporta le applicazioni React, questa esercitazione usa Visual Studio Code.
Node.js.

Creare un progetto React

In Visual Studio Code, selezionare File>Apri cartella.... Passare a e selezionare il percorso in cui creare il progetto.
Aprire un nuovo terminale selezionando Terminale>Nuovo terminale.
Eseguire i comandi seguenti per creare un nuovo progetto React con il nome reactspalocal, passare alla nuova directory e avviare il progetto React. Viene aperto un Web browser con l'indirizzo http://localhost:3000/ per impostazione predefinita. Il browser rimane aperto e rerenders per ogni modifica salvata.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

Creare cartelle e file aggiuntivi per ottenere la struttura di cartelle seguente:

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

Installare le dipendenze dell'app

I pacchetti npm correlati all'identità devono essere installati nel progetto per abilitare l'autenticazione utente. Per lo stile del progetto, viene usato Bootstrap .

Nella barra del terminale selezionare l'icona + per creare un nuovo terminale. Viene aperta una nuova finestra del terminale che consente all'altro terminale di continuare l'esecuzione in background.
Se necessario, passare a reactspalocal e immettere i comandi seguenti nel terminale per installare i msal pacchetti e bootstrap .
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Creare il file di configurazione dell'autenticazione authConfig.js

Nella cartella src aprire authConfig.js e aggiungere il frammento di codice seguente:

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

Sostituire i valori seguenti con i valori del portale di Azure:
- Trovare il Enter_the_Application_Id_Here valore e sostituirlo con l'ID applicazione (clientId) dell'app registrata nell'Interfaccia di amministrazione di Microsoft Entra.
- In Autorità trovare Enter_the_Tenant_Subdomain_Here e sostituirlo con il sottodominio del tenant. Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non si dispone del nome del tenant, vedere informazioni su come leggere i dettagli del tenant.
Salvare il file.

Usare l'URL di dominio personalizzato (facoltativo)

Usare un dominio personalizzato per personalizzare completamente l'URL di autenticazione. Dal punto di vista dell'utente, gli utenti rimangono nel dominio durante il processo di autenticazione, anziché essere reindirizzati a ciamlogin.com nome di dominio.

Usare la procedura seguente per usare un dominio personalizzato:

Usare la procedura descritta in Abilitare domini URL personalizzati per le app nei tenant esterni per abilitare l'URL di dominio personalizzato per il tenant esterno.
Nel file authConfig.js individuare quindi auth l'oggetto e quindi:
1. Aggiornare il valore della authority proprietà in https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Sostituire Enter_the_Custom_Domain_Here con l'URL del dominio personalizzato e Enter_the_Tenant_ID_Here con l'ID tenant. Se non si ha l'ID tenant, vedere come leggere i dettagli del tenant.
2. Aggiungere knownAuthorities una proprietà con un valore [Enter_the_Custom_Domain_Here].

Dopo aver apportato le modifiche al file di authConfig.js , se l'URL del dominio personalizzato è login.contoso.com e l'ID tenant è aaaabbbbbb-0000-cccc-1111-dddd2222eeee, il file dovrebbe essere simile al frammento di codice seguente:

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

Modificare index.js per includere il provider di autenticazione

Tutte le parti dell'app che richiedono l'autenticazione devono essere incluse nel MsalProvider componente. Creare un'istanza di PublicClientApplication e quindi passarla a MsalProvider.

Nella cartella src aprire index.js e sostituire il contenuto del file con il frammento di codice seguente per usare i pacchetti e lo msal stile 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}/>
);

Passaggio successivo

Parte 3: Gestire i flussi di autenticazione in un'applicazione a pagina singola React

Condividi tramite