Partager via


Application monopage : Configuration de code

S’applique à : cercle vert avec un symbole de coche blanc qui indique que le contenu suivant s’applique aux locataires du personnel. Locataires de main-d’œuvre (en savoir plus)

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

Conditions préalables

  • Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
    • ID d’application (client)
    • ID de l’annuaire (locataire)
  • Ajoutez les URI de redirection suivants à l'aide de la configuration de la plateforme d'application monopage. Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
    • URI de redirection : http://localhost:3000/.

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
Paquet Bien démarrer
démarré
Connexion des utilisateurs Accéder aux API web
Réagir MSAL React2 msal-react Démarrage rapide La bibliothèque peut demander des jetons d’ID pour la connexion de l’utilisateur. La bibliothèque peut demander des jetons d’accès pour les API web protégées.
JavaScript MSAL.js2 msal-browser Démarrage rapide La bibliothèque peut demander des jetons d’ID pour la connexion de l’utilisateur. La bibliothèque peut demander des jetons d’accès pour les API web protégées.
Angular MSAL Angular2 msal-angular Démarrage rapide La bibliothèque peut demander des jetons d’ID pour la connexion de l’utilisateur. La bibliothèque peut demander des jetons d’accès pour les API web protégées.

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

Pour plus d’informations sur les options configurables, consultez Initialisation d’application avec MSAL.js.

Étape suivante