Condividi tramite

Esercitazione: Creare un'applicazione a pagina singola React e prepararla per l'autenticazione

  • Articolo

si applica a: cerchio verde con un segno di spunta bianco. tenant della forza lavoro cerchio verde con un segno di spunta bianco. tenant esterni (altre)

In questa esercitazione si creerà un'applicazione a pagina singola React e la si preparerà per l'autenticazione usando Microsoft Identity Platform. Questa esercitazione illustra come creare un'applicazione a pagina singola React usando npm, creare i file necessari per l'autenticazione e l'autorizzazione e aggiungere i dettagli del tenant al codice sorgente. L'applicazione può essere usata per i dipendenti in un tenant della forza lavoro o per i clienti che usano un tenant esterno.

In questa esercitazione si apprenderà come:

  • Creare un nuovo progetto React
  • Installare i pacchetti necessari per l'autenticazione
  • Creare la struttura dei file e aggiungere codice al file del server
  • Aggiungere i dettagli del tenant al file di configurazione dell'autenticazione

Prerequisiti

  • Tenant della forza lavoro. È possibile usare la directory predefinita o configurare un nuovo tenant.
  • Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra con la configurazione seguente. Per altre informazioni, vedere Registra un'applicazione.
    • Nome: identity-client-spa
    • Tipi di account supportati: Solo account in questa directory organizzativa (tenant singolo).
    • Configurazione della piattaforma: applicazione a pagina singola (SPA).
    • URI di reindirizzamento: http://localhost:3000/.

Creare un nuovo progetto React

  1. Aprire Visual Studio Code, selezionare File>Apri cartella.... Passare a e selezionare il percorso in cui creare il progetto.

  2. Aprire un nuovo terminale selezionando Terminale>Nuovo terminale.

  3. Eseguire i comandi seguenti per creare un nuovo progetto React con il nome reactspalocal, passare alla nuova directory e avviare il progetto React. Per impostazione predefinita, verrà aperto un Web browser con l'indirizzo http://localhost:3000/. Il browser rimane aperto ed esegue nuovamente il rendering per ogni modifica salvata.

    npx create-react-app reactspalocal
cd reactspalocal
npm start

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

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

Installare pacchetti identity e bootstrap

Per abilitare l'autenticazione utente, è necessario installare i pacchetti di identità correlati npm nel progetto. Per lo stile del progetto, verrà usato Bootstrap.

  1. Nella barra terminale selezionare l'icona + per creare un nuovo terminale. Verrà aperta una finestra del terminale separata, mentre il terminale del nodo precedente continuerà a essere eseguito in background.

  2. Assicurarsi che la directory corretta sia selezionata (reactspalocal) e quindi immettere quanto segue nel terminale per installare i pacchetti msal e bootstrap pertinenti.

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

Aggiungi i dettagli del tenant alla configurazione di MSAL

Il file authConfig.js contiene le impostazioni di configurazione per il flusso di autenticazione e viene usato per configurare MSAL.js con le impostazioni necessarie per l'autenticazione.

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

    
 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. Sostituire i valori seguenti con i valori dell'interfaccia di amministrazione di Microsoft Entra.

    • clientId: identificatore dell'applicazione, detto anche client. Sostituire Enter_the_Application_Id_Here con il valore ID applicazione (client) che è stato registrato in precedenza nella pagina di panoramica dell'applicazione registrata.
    • authority : si tratta di due parti:
      • Il dell'istanza di è l'endpoint del provider di servizi cloud. Verificare i diversi endpoint disponibili nei cloud nazionali .
      • L'ID tenant è l'identificatore del tenant in cui è registrata l'applicazione. Sostituire Enter_the_Tenant_Info_Here con il valore dell'ID di directory (tenant) che è stato registrato in precedenza nella pagina di panoramica dell'applicazione registrata.

  3. Salvare il file.

Aggiungere il provider di autenticazione

I pacchetti msal vengono usati per fornire l'autenticazione nell'applicazione. Il pacchetto msal-browser viene usato per gestire il flusso di autenticazione e il pacchetto msal-react viene usato per integrare msal-browser con React. addEventCallback viene usato per restare in ascolto degli eventi che si verificano durante il processo di autenticazione, ad esempio quando un utente accede correttamente. Il metodo setActiveAccount viene usato per impostare l'account attivo per l'applicazione, che viene usato per determinare le informazioni dell'utente da visualizzare.

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

Per altre informazioni su questi pacchetti, vedere la documentazione in msal-browser e msal-react.

Aggiungere il componente principale dell'applicazione

Tutte le parti dell'app che richiedono l'autenticazione devono essere incluse nel componente MsalProvider. Imposta una variabile instance che chiama l'hook useMsal per ottenere l'istanza PublicClientApplication e poi passarla a MsalProvider. Il componente MsalProvider rende disponibile l'istanza di PublicClientApplication nell'intera app tramite l'API Context di React. Tutti i componenti sottostanti MsalProvider avranno accesso all'istanza di PublicClientApplication tramite contesto, nonché tutti gli hook e i componenti forniti da msal-react.

  1. Nella cartella src aprire App.jsx e sostituire il contenuto del file con il frammento di codice seguente:

    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. Salvare il file.

Passaggi successivi

Esercitazione: Creare componenti per l'accesso e la disconnessione in un'app a pagina singola React