Application monopage : Configuration de code

En savoir plus sur la configuration du code de votre application monopage (SPA).

Bibliothèques Microsoft prenant en charge les applications monopages

Les bibliothèques Microsoft suivantes prennent en charge les applications monopages :

Langage/framework	Projet sur GitHub	Package	Bien démarrer démarré	Connexion des utilisateurs	Accès aux API web	Disponibilité générale ou Préversion publique1
Angular	MSAL Angular v22	msal-angular	Didacticiel			GA
Angular	MSAL Angular3	msal-angular	—			GA
AngularJS	MSAL AngularJS3	msal-angularjs	—			Préversion publique
JavaScript	MSAL.js v22	msal-browser	Didacticiel			GA
JavaScript	MSAL.js 1.03	msal-core	—			GA
React	MSAL React2	msal-react	Didacticiel			GA

¹Les termes du contrat de licence universelle pour les services en ligne s’appliquent aux bibliothèques en préversion publique.

²Flux de code d’authentification avec PKCE uniquement (recommandé).

³Flux d’octroi implicite uniquement (non recommandé).

Configuration du code de l’application

Dans une bibliothèque MSAL, les informations d’inscription d’application sont transmises en tant que configuration pendant l’initialisation de la bibliothèque.

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

Pour plus d’informations sur les options configurables, consultez Initialisation d’application avec 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);

Pour plus d’informations sur les options configurables, consultez Initialisation d’application avec 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')
);

Étapes suivantes

Passez à l’article suivant de ce scénario, Connexion et déconnexion.