Déconnexion des utilisateurs

Avant de commencer ici, veillez à comprendre comment vous connecter, acquérir des jetons et gérer les durées de vie des jetons.

Déconnexion

Le processus de déconnexion pour MSAL effectue deux étapes.

1. Effacez le cache MSAL.
2. Effacez la session sur le serveur d’identité.

L’objet PublicClientApplication expose deux API qui effectuent ces actions.

msalInstance.logoutRedirect();
msalInstance.logoutPopup();

Ces API effacent le cache des jetons ainsi que toutes les données utilisateur et de session, puis redirigent la fenêtre du navigateur ou la fenêtre contextuelle vers la page de déconnexion du serveur. Le serveur demandera ensuite à l’utilisateur de sélectionner le compte duquel il souhaite être déconnecté, puis le redirigera vers votre postLogoutRedirectUri, à condition que les conditions suivantes soient remplies :

1. L’URI est inscrit en tant qu’URL de réponse sur l’inscription de l’application
2. L'URI est fournie en tant que postLogoutRedirectUri dans la configuration PublicClientApplication ou dans la demande de déconnexion.
3. L’utilisateur dispose d’une session active avec le fournisseur d’identité
4. (Scénarios MSA) Une URL de déconnexion du canal frontal est configurée dans l’inscription de l’application

Si l’une des conditions ci-dessus n’est pas remplie, la page (ou la fenêtre contextuelle) reste sur la page de déconnexion du fournisseur d’identité.

IMPORTANT: Si cette navigation de déconnexion est interrompue de quelque manière que ce soit, votre cache MSAL peut être effacé, mais la session peut toujours persister sur le serveur. Vérifiez que la navigation est entièrement terminée avant de revenir à votre application.

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

Objets de requête

Les options de configuration peuvent être fournies à chacune des API de déconnexion pour personnaliser le comportement :

• logoutRedirect request
• Demande logoutPopup

logoutRedirect

L’utilisation logoutRedirect efface le cache local des jetons utilisateur, puis redirige la fenêtre vers la page de déconnexion du serveur. La promesse renvoyée par logoutRedirect n’est pas censée se résoudre, mais vous pouvez quand même attendre sa résolution si vous devez bloquer l’exécution d’autre code avant que la redirection ne soit initiée.

Les options de configuration peuvent être fournies pour personnaliser le comportement :

const currentAccount = msalInstance.getAccount({ homeAccountId });
await msalInstance.logoutRedirect({
    account: currentAccount,
    postLogoutRedirectUri: "https://contoso.com/loggedOut"
});

Ignorer la déconnexion du serveur

Si vous souhaitez que votre application effectue uniquement une déconnexion locale, vous pouvez fournir une fonction de rappel au paramètre onRedirectNavigate de la requête et faire en sorte que cette fonction renvoie false.

msalInstance.logoutRedirect({
    onRedirectNavigate: (url) => {
        // Return false if you would like to stop navigation after local logout
        return false;
    }
});

logoutPopup

L’API logoutPopup ouvre la page de déconnexion du serveur dans une fenêtre contextuelle, ce qui permet à votre application de conserver son état actuel. De ce fait, il y a quelques considérations supplémentaires par rapport à logoutRedirect lorsque vous choisissez d’utiliser des fenêtres contextuelles pour vous déconnecter :

• La promesse retournée par logoutPopup est censée être résolue après la fermeture de la fenêtre contextuelle
• postLogoutRedirectUri est nécessaire pour que MSAL puisse fermer la fenêtre contextuelle lorsque la connexion est terminée
• postLogoutRedirectUri s’ouvre dans la fenêtre contextuelle, et non dans le cadre principal. Si vous avez besoin que votre application de niveau supérieur soit redirigée après la déconnexion, vous pouvez utiliser le mainWindowRedirectUri paramètre sur la demande de déconnexion.

Les options de configuration peuvent être fournies pour personnaliser le comportement.

const currentAccount = msalInstance.getAccount({ homeAccountId });
await msalInstance.logoutPopup({
    account: currentAccount,
    postLogoutRedirectUri: "https://contoso.com/loggedOut",
    mainWindowRedirectUri: "https://contoso.com/homePage",
    popupWindowAttributes: {
        popupSize: {
            height: 100,
            width: 100
        },
        popupPosition: {
            top: 100,
            left: 100
        }
    }
});

Déconnexion sans confirmation

Si votre application cliente a activé la revendication facultative login_hint pour les jetons d’identité, vous pouvez tirer parti de la revendication login_hint du jeton d’identité pour effectuer une déconnexion « silencieuse » ou sans invite en utilisant logoutRedirect ou logoutPopup. Il existe deux façons d’effectuer une déconnexion sans invite de confirmation :

Option 1 : laissez MSAL analyser automatiquement le login_hint à partir des revendications du token d'ID du compte.

La première et la plus simple consiste à fournir l’objet de compte que vous souhaitez mettre fin à la session pour l’API de déconnexion. MSAL vérifie si la valeur login_hint est disponible dans le jeton d’identité du compte et l’ajoute automatiquement à la requête de fermeture de session sous la forme de logout_hint afin d’ignorer l’invite de sélection de compte.

const currentAccount = msalInstance.getAccount({ homeAccountId });
// The account's ID Token must contain the login_hint optional claim to avoid the account picker
await msalInstance.logoutRedirect({ account: currentAccount});

Option 2 : Définir manuellement l’option logoutHint dans la demande de déconnexion

Sinon, si vous préférez définir manuellement le logoutHint, vous pouvez extraire le claim login_hint dans votre application et le définir comme logoutHint dans la requête de déconnexion :

const currentAccount = msalInstance.getAccount({ homeAccountId });

// Extract login hint to use as logout hint
const logoutHint = currentAccount.idTokenClaims.login_hint;
await msalInstance.logoutPopup({ logoutHint: logoutHint });

Remarque : selon l’API que vous choisissez (redirection/fenêtre contextuelle), l’application redirigera ou ouvre une fenêtre contextuelle pour arrêter la session du serveur. La différence est que l’utilisateur ne verra pas ou n’aura pas à interagir avec l’invite du sélecteur de compte du serveur.

Déconnexion via le canal frontal

Microsoft Entra ID et Azure AD B2C prennent en charge la fonctionnalité de déconnexion du canal frontal OAuth, qui permet la déconnexion unique sur toutes les applications lorsqu’un utilisateur lance la déconnexion. Pour tirer parti de cette fonctionnalité avec MSAL.js, procédez comme suit :

1. Dans votre application, créez une page de déconnexion dédiée. Cette page ne doit pas exécuter d’autres fonctions, telles que l’acquisition de jetons sur le chargement de page (voir ci-dessous pour plus d’informations). Veuillez noter que cette page sera chargée dans un iframe masqué et que, pour les utilisateurs de Microsoft Entra ID et de MSA, elle inclura les paramètres de requête iss et sid.
2. Dans le centre d’administration Microsoft Entra, accédez à la page Authentification de votre application, puis enregistrez la page de l’étape 1 dans le champ URL de déconnexion du canal frontal. Notez que cette page doit être chargée via https.

Exigences relatives à la page de déconnexion via le canal frontal

La page utilisée pour la déconnexion par canal frontal doit être construite comme suit :

1. Lors du chargement de page, appelez automatiquement l’API MSAL logoutRedirect .
2. Dans la configuration PublicClientApplication, définissez system.allowRedirectInIframe sur true.
3. Lors de l’appel de logout, nous vous recommandons d’empêcher la redirection au sein de l’iframe vers la page de déconnexion (voir ci-dessus).

Exemple :

const msal = new PublicClientApplication({
    auth: {
        clientId: "my-client-id"
    },
    system: {
        allowRedirectInIframe: true
    }
})

// Automatically on page load
msal.logoutRedirect({
    onRedirectNavigate: () => {
        // Return false to stop navigation after local logout
        return false;
    }
});

Maintenant, lorsqu’un utilisateur se déconnecte d’une autre application, l’URL de déconnexion du canal frontal de votre application est chargée dans un iframe masqué et MSAL.js efface son cache pour terminer l’authentification unique.

Exemples de déconnexion via le canal frontal

Les exemples suivants montrent comment mettre en œuvre la déconnexion par canal frontal à l’aide de MSAL.js :

• MSAL Angular v2 : Exemple Angular 11
• MSAL React : exemple de routeur React

Événements

Si différentes parties de votre application doivent réagir à l’état de déconnexion sans accéder directement à la promesse retournée par logoutRedirect ou logoutPopup vous pouvez utiliser l’API d’événement.

Les événements sont émis lorsque la déconnexion réussit ou échoue et lorsque la fenêtre contextuelle est ouverte lors de l’utilisation logoutPopup.

Remarques importantes

• Si aucun compte n’est transmis à l’API de déconnexion, ou si aucun objet EndSessionRequest n’est fourni, tous les comptes seront déconnectés.
• Si un compte est passé à l’API de déconnexion, MSAL efface uniquement les jetons associés à ce compte.
• La déconnexion du serveur est une fonctionnalité de confort et, à ce titre, elle est assurée dans la mesure du possible. Les API de déconnexion résolvent correctement tant que le cache d’application local a été effacé, que la déconnexion du serveur réussisse ou non.

Prochaines étapes

Explorez des rubriques plus avancées, telles que :

• Mise en cache
• Options de configuration avancées