Connexion et de déconnexion d’une application monopage

Pour obtenir des jetons d’accès aux API de votre application, vous avez besoin d’un contexte d’utilisateur authentifié. Pour authentifier un utilisateur, vous pouvez utiliser une fenêtre contextuelle et/ou une méthode de connexion Rediriger.

Si votre application a accès à un contexte d’utilisateur authentifié ou à un jeton d’ID, vous pouvez ignorer l’étape de connexion et obtenir directement des jetons. Pour plus d’informations, consultez l’article Authentification unique (SS) avec indicateur utilisateur.

Choix entre une expérience avec fenêtre indépendante ou avec redirection

Le choix entre la fenêtre indépendante et la redirection dépend du flux d'application.

  • Utilisez une fenêtre contextuelle si vous ne souhaitez pas que les utilisateurs quittent la page principale de votre application lors de l’authentification. La redirection de l’authentification se produisant dans une fenêtre contextuelle, l’état de l’application principale est conservé.

  • Optez pour une redirection si les utilisateurs sont soumis à des contraintes imposées par le navigateur ou par des stratégies qui bloquent les fenêtres contextuelles. Par exemple, l’utilisation des fenêtres contextuelles sur Internet Explorer peut entraîner des problèmes.

Se connecter avec une fenêtre indépendante

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

let accountId = "";

const myMsal = new PublicClientApplication(config);

myMsal
  .loginPopup(loginRequest)
  .then(function (loginResponse) {
    accountId = loginResponse.account.homeAccountId;
    // Display signed-in user content, call API, etc.
  })
  .catch(function (error) {
    //login failure
    console.log(error);
  });

Se connecter avec une redirection

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const loginRequest = {
  scopes: ["User.ReadWrite"],
};

let accountId = "";

const myMsal = new PublicClientApplication(config);

function handleResponse(response) {
  if (response !== null) {
    accountId = response.account.homeAccountId;
    // Display signed-in user content, call API, etc.
  } else {
    // In case multiple accounts exist, you can select
    const currentAccounts = myMsal.getAllAccounts();

    if (currentAccounts.length === 0) {
      // no accounts signed-in, attempt to sign a user in
      myMsal.loginRedirect(loginRequest);
    } else if (currentAccounts.length > 1) {
      // Add choose account code here
    } else if (currentAccounts.length === 1) {
      accountId = currentAccounts[0].homeAccountId;
    }
  }
}

myMsal.handleRedirectPromise().then(handleResponse);

Comportement de déconnexion sur les navigateurs

Pour garantir la déconnexion sécurisée d’une ou plusieurs applications, les méthodes suivantes sont recommandées :

  • Sur les appareils partagés, les utilisateurs doivent utiliser le mode privé/incognito d’un navigateur et fermer toutes les fenêtres du navigateur avant de s’éloigner de l’appareil.

  • Sur les appareils qui ne sont pas partagés, les utilisateurs doivent utiliser un écran de verrouillage du système d’exploitation pour verrouiller ou se déconnecter de l’ensemble de leur session de système d’exploitation sur l’appareil. Microsoft utilise sa page de déconnexion pour rappeler aux utilisateurs ces meilleures pratiques en matière de confidentialité et de sécurité.

Pour plus d’informations, consultez les meilleures pratiques de confidentialité Internet de Microsoft.

Si un utilisateur choisit de ne pas se déconnecter à l’aide des recommandations, les méthodes suivantes permettent d’activer la fonctionnalité de déconnexion :

  • La déconnexion Front Channel de Microsoft pour la déconnexion fédérée. Vous pouvez utiliser cette option lorsqu'une application partage un état de connexion avec une nouvelle application, mais gère ses propres jetons/cookies de session. Cette mise en œuvre présente certaines limites lorsque le contenu est bloqué, par exemple lorsque les navigateurs bloquent les cookies de tiers.

  • Fenêtre contextuelle et/ou une redirection pour la déconnexion de l’application locale. Les méthodes contextuelles et de redirection finaux la session de l’utilisateur(-trice) au niveau du point de terminaison et de l’application locale. Toutefois, ces méthodes peuvent ne pas libérer immédiatement la session pour d’autres applications fédérées si la communication frontale est bloquée.

Se déconnecter avec une fenêtre contextuelle

MSAL.js v2 et versions supérieures fournit une méthode logoutPopup qui efface le cache dans le stockage du navigateur et ouvre une fenêtre contextuelle sur la page de déconnexion de Microsoft Entra. Après la déconnexion, la redirection par défaut vers la page de démarrage de la connexion et la fenêtre contextuelle est fermée.

Pour l’expérience de déconnexion après, vous pouvez définir la postLogoutRedirectUri pour rediriger l’utilisateur(-trice) vers un URI spécifique. Cet URI doit être enregistré en tant qu’URI de redirection dans l’inscription de votre application. Vous pouvez également configurer logoutPopup de manière à rediriger la fenêtre principale vers une autre page, telle que la page d’accueil ou la page de connexion, en transmettant mainWindowRedirectUri dans le cadre de la requête.

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", // defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
  mainWindowRedirectUri: "your_app_main_window_redirect_uri",
};

await myMsal.logoutPopup(logoutRequest);

Se déconnecter à l’aide d’une redirection

MSAL.js fournit une méthode logout dans la version v1 et une méthode logoutRedirect dans la version 2 qui efface le cache dans le stockage du navigateur et redirige vers la page de déconnexion de Microsoft Entra. Après la déconnexion, la redirection par défaut vers la page de démarrage de la connexion.

Pour l’expérience de déconnexion après, vous pouvez définir la postLogoutRedirectUri pour rediriger l’utilisateur(-trice) vers un URI spécifique. Cet URI doit être enregistré en tant qu’URI de redirection dans l’inscription de votre application.

Étant donné que le rappel par Microsoft des meilleures pratiques en matière de la confidentialité sur Internet concernant l’utilisation d’un navigateur privé et d’un écran de verrouillage n’apparaît pas dans cette méthode, vous pouvez décrire les meilleures pratiques et rappeler aux utilisateurs qu’ils doivent fermer toutes les fenêtres du navigateur.

const config = {
  auth: {
    clientId: "your_app_id",
    redirectUri: "your_app_redirect_uri", //defaults to application start page
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  },
};

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
  account: myMsal.getAccountByHomeId(homeAccountId),
};

myMsal.logoutRedirect(logoutRequest);

Étapes suivantes

Passez à l’article suivant de ce scénario, Acquérir un jeton pour l’application.