Initialisation de MSAL

Avant d’initialiser MSAL Browser, commencez par inscrire votre application dans le centre d’administration Microsoft Entra pour obtenir l’ID de l’application (client).

Modèle CreatePCA

MSAL.js fournit un modèle CreatePCA qui vous permet de choisir le type de PublicClientApplication pour votre application. Les options actuelles incluent Standard et Nestable configurations. À l’avenir, d’autres configurations seront introduites.

Standard Configuration

Si vous utilisez MSAL.js dans une application monopage, importez msal-browser pour créer une IPublicClientApplication instance avec createStandardPublicClientApplication. Cette fonction crée une PublicClientApplication instance avec la configuration standard.

import * as msal from "@azure/msal-browser";

const pca = msal.createStandardPublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
    },
});

Configuration d’application imbriquée

Si votre application est une application imbriquée iframed qui délègue son authentification à un Kit de développement logiciel (SDK) hub (qui est une application SPA ou une application de bureau s’exécutant dans l’infrastructure MetaOS), importez msal-browser pour créer une IPublicClientApplication instance avec createNestablePublicClientApplication. Cette fonction crée une PublicClientApplication instance avec la configuration NAA.

import * as msal from "@azure/msal-browser";

const nestablePca = msal.createNestablePublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
    },
});

Initialisation de l’objet PublicClientApplication

Pour utiliser MSAL.js, vous devez instancier un PublicClientApplication objet. Vous devez fournir le client id (appId) de votre application.

Option 1 :

Instanciez un PublicClientApplication objet et initialisez-le ensuite. La initialize fonction est asynchrone et doit être résolue avant d’appeler d’autres API MSAL.js.

import { PublicClientApplication } from "@azure/msal-browser";

const msalConfig = {
    auth: {
        clientId: 'your_client_id'
    }
};

const msalInstance = new PublicClientApplication(msalConfig);
await msalInstance.initialize();

Option 2 :

Appelez la createPublicClientApplication méthode statique qui retourne un objet initialisé PublicClientApplication . Notez que cette fonction est asynchrone.

import { PublicClientApplication } from "@azure/msal-browser";

const msalConfig = {
    auth: {
        clientId: 'your_client_id'
    }
};

const msalInstance = await PublicClientApplication.createPublicClientApplication(msalConfig);

(Facultatif) Configurer l’autorité

Par défaut, MSAL est configuré avec le tenant common, utilisé pour les applications multilocataires et les applications qui autorisent les comptes personnels (hors B2C).

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/common/'
    }
};

Si votre application s’adresse à un seul locataire, vous devez fournir une autorité incluant votre ID de locataire, comme ci-dessous :

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/{your_tenant_id}'
    }
};

Si votre application utilise une autorité distincte compatible OIDC, comme "https://login.live.com" ou IdentityServer, vous devez la renseigner dans le champ knownAuthorities et définir votre protocolMode sur "OIDC".

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.live.com',
        knownAuthorities: ["login.live.com"],
    },
    system: {
        protocolMode: "OIDC",
    }
};

(Facultatif) Configurer l’URI de redirection

Par défaut, MSAL est configuré pour définir l’URI de redirection vers la page active sur laquelle elle s’exécute. Si vous souhaitez recevoir le code d’autorisation sur une page différente de celle qui exécute MSAL, vous pouvez le définir dans la configuration :

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/{your_tenant_id}',
        redirectUri: 'https://contoso.com'
    }
};

Tout URI de redirection utilisé doit être configuré dans l’inscription du portail. Vous pouvez également définir l’URI de redirection par requête à l’aide des API de connexion et de requête.

(Facultatif) Configuration supplémentaire

MSAL propose des options de configuration supplémentaires que vous pouvez consulter ici.

Gestion du lancement d’applications avec 0 ou plus de comptes disponibles

Le diagramme de flux suivant peut vous aider à éviter les invites d’authentification inutiles lorsqu’un compte (ou plusieurs comptes) est disponible pour l’authentification unique.

Choix d’un type d’interaction

Dans le navigateur, vous pouvez présenter l’écran de connexion à vos utilisateurs à partir de votre application de deux façons :

• présentation d’une fenêtre contextuelle à partir de la page active
• redirection de la fenêtre du navigateur vers le serveur de connexion

API des fenêtres contextuelles

• loginPopup
• acquireTokenPopup

Les API contextuelles utilisent les promesses ES6 qui se résolvent lorsque le flux d’authentification dans la fenêtre contextuelle conclut et retourne à l’URI de redirection spécifié, ou rejettent s’il existe des problèmes dans le code ou si la fenêtre contextuelle est bloquée.

Considérations relatives à RedirectUri

Lorsque vous utilisez des API de fenêtre contextuelle, le redirectUri doit pointer vers une page dédiée qui implémente le mécanisme de redirection MSAL. Cette page gère la réponse d’authentification et la communique à l’application principale.

Pour obtenir des instructions détaillées sur la configuration de la page de redirection, consultez considérations relatives à RedirectUri.

msalInstance.loginPopup({
    redirectUri: "http://localhost:3000/redirect",
});

API de redirections

• loginRedirect
• acquireTokenRedirect

Remarque : si vous utilisez msal-angular ou msal-react, les redirections sont gérées différemment. Consultez le msal-angular document sur les redirections et la msal-react FAQ pour plus d’informations.

Les API de redirection sont des fonctions asynchrones (c’est-à-dire qu’elles renvoient une promesse) void qui redirigent la fenêtre du navigateur après avoir mis en cache quelques informations de base. Si vous choisissez d’utiliser les API de redirection, sachez que vous devez appeler handleRedirectPromise() pour gérer correctement l’API. Vous pouvez utiliser la fonction suivante pour effectuer une action lorsque cet échange de jetons est terminé :

msalInstance.handleRedirectPromise().then((tokenResponse) => {
    // Check if the tokenResponse is null
    // If the tokenResponse !== null, then you are coming back from a successful authentication redirect.
    // If the tokenResponse === null, you are not coming back from an auth redirect.
}).catch((error) => {
    // handle error, either in the library or coming back from the server
});

Cela vous permettra également de récupérer des jetons sur le rechargement de page. Pour plus d’informations sur l’utilisation, consultez l’exemple onPageLoad .

Il n’est pas recommandé d’utiliser les deux types d’interaction dans une seule application.

Prochaines étapes

Vous êtes prêt à vous connecter !