Applicazione a pagina singola: configurazione del codice

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

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	Disponibile a livello generale (GA) o Anteprima pubblica1
Angular	MSAL Angular v22	msal-angular	Guida introduttiva			Disponibilità generale
Angular	MSAL Angular3	msal-angular	—			Disponibilità generale
AngularJS	MSAL AngularJS3	msal-angularjs	—			Anteprima pubblica
JavaScript	MSAL.js v22	msal-browser	Esercitazione			Disponibilità generale
JavaScript	MSAL.js 1.03	msal-core	—			Disponibilità generale
React	MSAL React2	msal-react	Guida introduttiva			Disponibilità generale

^{1 Le} condizioni di licenza universali per i servizi online si applicano alle librerie in anteprima pubblica.

² Flusso del codice di autenticazione solo con PKCE (scelta consigliata).

^{3 Solo} flusso di concessione implicita (non consigliato).

Configurazione del codice dell'applicazione

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

JavaScript (MSAL.js v2)

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);

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

JavaScript (MSAL.js v1)

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

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

// create UserAgentApplication instance
const userAgentApplication = new Msal.UserAgentApplication(config);

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

Angular (MSAL.js v2)

// 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 { }

Angular (MSAL.js v1)

// App.module.ts
import { MsalModule } from '@azure/msal-angular';
@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: 'your_app_id'
            }
        })
    ]
})
export class AppModule { }

React

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')
);

Passaggi successivi

Passare all'articolo successivo in questo scenario, accedere e disconnettersi.