Applicazione a pagina singola: configurazione del codice

Si applica a: Tenant del personale Tenant esterni (scopri di più)

Informazioni su come configurare il codice per l'applicazione a pagina singola.Learn how to configure the code for your single-page application (SPA).

Prerequisiti

• Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra, configurata solo per gli account in questa directory organizzativa. Per altri dettagli, vedere Registrare un'applicazione . Registrare i valori seguenti dalla pagina Panoramica dell'applicazione per usarli in un secondo momento:
  • ID applicazione (cliente)
  • ID della directory (cliente)
• Aggiungi gli URI di reindirizzamento seguenti utilizzando la configurazione della piattaforma applicazione a pagina singola. Per altri dettagli, vedere Come aggiungere un URI di reindirizzamento nell'applicazione .
  • URI di reindirizzamento: http://localhost:3000/.

Librerie Microsoft che supportano app a pagina singola

Le librerie Microsoft seguenti supportano app a pagina singola:

Linguaggio/framework	Progetto in GitHub	Pacchetto	Recupero avviata	Consentire l'accesso degli utenti	Accedere alle API Web
Reagire	MSAL React2	msal-react	Guida introduttiva
JavaScript	MSAL.js2	msal-browser	Guida introduttiva
Angolare	MSAL Angular2	msal-angular	Guida introduttiva

Configurazione del codice dell'applicazione

In una libreria MSAL le informazioni di registrazione dell'applicazione vengono passate come configurazione durante l'inizializzazione della libreria.

Reagire

import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create PublicClientApplication instance
const publicClientApplication = new PublicClientApplication(config);

// Wrap your app component tree in the MsalProvider component
ReactDOM.render(
    <React.StrictMode>
        <MsalProvider instance={publicClientApplication}>
            <App />
        </ MsalProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

JavaScript

import * as Msal from "@azure/msal-browser"; // if using CDN, 'Msal' will be available in global scope

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create PublicClientApplication instance
const publicClientApplication = new Msal.PublicClientApplication(config);

Angolare

// In app.module.ts
import { MsalModule } from '@azure/msal-angular';
import { PublicClientApplication } from '@azure/msal-browser';

@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'Enter_the_Application_Id_Here',
            }
        }), null, null)
    ]
})
export class AppModule { }

Per altre informazioni sulle opzioni configurabili, vedere Inizializzazione dell'applicazione con MSAL.js.

Passo successivo

• Aggiungere il codice di accesso e di disconnessione.