Application monopage : Configuration de code

Article
07/12/2024

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é	Disponibilité générale ou Préversion publique¹
Angular	MSAL Angular v2²	msal-angular	Démarrage rapide	GA
Angular	MSAL Angular³	msal-angular	—	GA
AngularJS	MSAL AngularJS³	msal-angularjs	—	Préversion publique
JavaScript	MSAL.js v2²	msal-browser	Didacticiel	GA
JavaScript	MSAL.js 1.0³	msal-core	—	GA
React	MSAL React²	msal-react	Démarrage rapide	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.

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.

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.

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

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

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.

Partager via

Application monopage : Configuration de code

Bibliothèques Microsoft prenant en charge les applications monopages

Configuration du code de l’application

Étapes suivantes

Commentaires

Ressources supplémentaires