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	Ottenere avviata	Consentire l'accesso degli utenti	Accedere alle API Web	Disponibile a livello generale (GA) o Anteprimapubblica 1
Angular	MSAL Angular v2 2	msal-angular	Esercitazione			Disponibilità generale
Angular	MSAL Angular3	msal-angular	—			Disponibilità generale
AngularJS	MSAL AngularJS3	msal-angularjs	—			Anteprima pubblica
JavaScript	MSAL.js v2 2	msal-browser	Esercitazione			Disponibilità generale
JavaScript	MSAL.js 1.03	msal-core	—			Disponibilità generale
React	MSAL React2	msal-react	Esercitazione			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).

³Solo flusso di concessione implicita.

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.