Application monopage : Se connecter et se déconnecter

Découvrez comment ajouter une connexion au code de votre application monopage.

Pour obtenir des jetons d’accès aux API de votre application, vous avez besoin d’un contexte d’utilisateur authentifié. Vous pouvez connecter des utilisateurs à votre application dans MSAL.js de deux manières :

• Fenêtre contextuelle, au moyen de la méthode loginPopup
• Redirection, au moyen de la méthode loginRedirect

Vous pouvez également passer les étendues des API, pour lesquelles l’utilisateur doit donner son consentement au moment de la connexion.

Si votre application a déjà 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 avec indicateur utilisateur.

Choisir entre une expérience de connexion avec fenêtre contextuelle ou avec redirection

Le choix entre la fenêtre contextuelle et la redirection dépend du flux de votre application :

• Si vous ne souhaitez pas que les utilisateurs quittent la page principale de votre application lors de l’authentification, nous vous recommandons d’utiliser la méthode avec fenêtre contextuelle. La redirection de l’authentification se produisant dans une fenêtre contextuelle, l’état de l’application principale est conservé.

• Si les utilisateurs sont soumis à des contraintes imposées par le navigateur ou par des stratégies qui bloquent les fenêtres contextuelles, vous pouvez utiliser la méthode avec redirection. Utilisez la méthode avec redirection dans le navigateur Internet Explorer, car il existe des problèmes connus avec l’utilisation de fenêtres contextuelles dans Internet Explorer.

Se connecter avec une fenêtre contextuelle

JavaScript (MSAL.js v2)

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);
  });

JavaScript (MSAL.js v1)

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"],
};

const myMsal = new UserAgentApplication(config);

myMsal
  .loginPopup(loginRequest)
  .then(function (loginResponse) {
    //login success
  })
  .catch(function (error) {
    //login failure
    console.log(error);
  });

Angular (MSAL.js v2)

Le wrapper MSAL Angular vous permet de sécuriser des itinéraires spécifiques dans votre application en ajoutant MsalGuard à la définition d’itinéraire. Cette protection appelle la méthode de connexion en cas d'accès à l'itinéraire.

// In app-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { ProfileComponent } from "./profile/profile.component";
import { MsalGuard } from "@azure/msal-angular";
import { HomeComponent } from "./home/home.component";

const routes: Routes = [
  {
    path: "profile",
    component: ProfileComponent,
    canActivate: [MsalGuard],
  },
  {
    path: "",
    component: HomeComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Pour une expérience de fenêtre contextuelle, définissez interactionType sur InteractionType.Popup dans la configuration de Guard. Vous pouvez également passer les étendues nécessitant un consentement comme suit :

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalModule } from "@azure/msal-angular";

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "Enter_the_Application_Id_Here",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Popup, // Msal Guard Configuration
        authRequest: {
          scopes: ["user.read"],
        },
      },
      null
    ),
  ],
})
export class AppModule {}

Angular (MSAL.js v1)

Le wrapper MSAL Angular vous permet de sécuriser des itinéraires spécifiques dans votre application en ajoutant MsalGuard à la définition d’itinéraire. Cette protection appelle la méthode de connexion en cas d'accès à l'itinéraire.

// In app-routing.module.ts
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { ProfileComponent } from "./profile/profile.component";
import { MsalGuard } from "@azure/msal-angular";
import { HomeComponent } from "./home/home.component";
const routes: Routes = [
  {
    path: "profile",
    component: ProfileComponent,
    canActivate: [MsalGuard],
  },
  {
    path: "",
    component: HomeComponent,
  },
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Pour une expérience de fenêtre contextuelle, activez l’option de configuration popUp. Vous pouvez également passer les étendues nécessitant un consentement comme suit :

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: 'your_app_id',
            }
        }, {
            popUp: true,
            consentScopes: ["User.ReadWrite"]
        })
    ]
})

React

Le wrapper MSAL React vous permet de protéger des composants spécifiques en les encapsulant dans le composant MsalAuthenticationTemplate. Si un utilisateur n’est pas déjà connecté, ce composant appelle la connexion ; sinon, il affiche les composants enfants.

import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Popup}>
      <p>This will only render if a user is signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

Vous pouvez également utiliser directement les API @azure/msal-browser pour appeler une connexion associée aux composants AuthenticatedTemplate et/ou UnauthenticatedTemplate afin d'afficher du contenu spécifique aux utilisateurs connectés ou déconnectés, respectivement. Il s'agit de l'approche recommandée si vous devez appeler la connexion suite à une interaction utilisateur, comme un clic sur un bouton.

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signInClickHandler(instance) {
  instance.loginPopup();
}

// SignInButton Component returns a button that invokes a popup login when clicked
function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </>
  );
}

Se connecter avec une redirection

JavaScript (MSAL.js v2)

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

JavaScript (MSAL.js v1)

Les méthodes de redirection ne retournent pas de promesse en raison du déplacement en dehors de l’application principale. Pour traiter les jetons retournés et y accéder, enregistrez les rappels de réussite et d’erreur avant d’appeler les méthodes de 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"],
};

const myMsal = new UserAgentApplication(config);

function authCallback(error, response) {
  //handle redirect response
}

myMsal.handleRedirectCallback(authCallback);

myMsal.loginRedirect(loginRequest);

Angular (MSAL.js v2)

Le code est ici le même que celui décrit dans la section relative à la connexion avec une fenêtre contextuelle, sauf que interactionType est défini sur InteractionType.Redirect pour la configuration de MsalGuard, et que le composant MsalRedirectComponent est amorcé pour gérer les redirections.

// In app.module.ts
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";
import { MsalModule, MsalRedirectComponent } from "@azure/msal-angular";

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: "Enter_the_Application_Id_Here",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Redirect, // Msal Guard Configuration
        authRequest: {
          scopes: ["user.read"],
        },
      },
      null
    ),
  ],
  bootstrap: [AppComponent, MsalRedirectComponent],
})
export class AppModule {}

Angular (MSAL.js v1)

Ce code est identique à celui décrit plus haut, à la section traitant de la connexion au moyen d’une fenêtre contextuelle. La redirection correspond au flux par défaut.

React

Le wrapper MSAL React vous permet de protéger des composants spécifiques en les encapsulant dans le composant MsalAuthenticationTemplate. Si un utilisateur n’est pas déjà connecté, ce composant appelle la connexion ; sinon, il affiche les composants enfants.

import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
      <p>This will only render if a user is signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

Vous pouvez également utiliser directement les API @azure/msal-browser pour appeler une connexion associée aux composants AuthenticatedTemplate et/ou UnauthenticatedTemplate afin d'afficher du contenu spécifique aux utilisateurs connectés ou déconnectés, respectivement. Il s'agit de l'approche recommandée si vous devez appeler la connexion suite à une interaction utilisateur, comme un clic sur un bouton.

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signInClickHandler(instance) {
  instance.loginRedirect();
}

// SignInButton Component returns a button that invokes a popup login when clicked
function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}

function WelcomeUser() {
  const { accounts } = useMsal();
  const username = accounts[0].username;

  return <p>Welcome, {username}</p>;
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
        <SignInButton />
      </UnauthenticatedTemplate>
    </>
  );
}

Comportement de déconnexion sur les navigateurs

Avec l’augmentation du nombre d’applications auxquelles un utilisateur s’est connecté et veut se déconnecter, davantage de problèmes se produisent, étant donnés les limites d’implémentation de ces fonctionnalités dans les navigateurs. Les meilleures pratiques de confidentialité Internet de Microsoft recommandent que sur un appareil partagé où un utilisateur souhaiterait se déconnecter d’une application, l’utilisateur doit utiliser le mode privé/incognito d’un navigateur et fermer toutes les fenêtres de navigateur avant de s’éloigner de l’appareil.

Sur les appareils qui ne sont pas partagés, les utilisateurs doivent tirer parti de l’écran de verrouillage du système d’exploitation afin qu’ils puissent verrouiller ou se déconnecter de leur session sur le système d’exploitation de l’appareil. Microsoft utilise sa page de déconnexion pour rappeler aux utilisateurs ces meilleures pratiques pour améliorer leur confidentialité et leur sécurité.

Pour les utilisateurs qui ne choisissent pas de suivre l’approche sécurisée, l’application peut tenter de se préparer aux deux cas suivants :

1. L’utilisateur a lancé la déconnexion directement à partir de l’application.
2. À partir d’une autre application qui partage l’état de connexion avec la nouvelle application, mais gère ses propres jetons/cookies de session.

Dans le premier cas, les sections suivantes décrivent les options permettant de déconnecter l’utilisateur d’une application locale à l’aide d’une fenêtre contextuelle ou d’une redirection.

Dans le cas où la déconnexion est lancée à partir d’une autre application, Microsoft utilise la déconnexion du canal frontal d’OpenID Connect pour la déconnexion fédérée. Il existe certaines limitations à cette implémentation où le contenu tiers est bloqué, par exemple lorsque les navigateurs bloquent les cookies tiers par défaut.

Les méthodes suivantes avec fenêtre contextuelle et redirection terminent la session de l’utilisateur au niveau du point de terminaison. Au niveau de l’application locale, la session ne s’effacera pas nécessairement immédiatement pour d’autres applications fédérées, si la communication par canal frontal est bloquée. Pour une déconnexion fédérée garantie, quel que soit le comportement du navigateur, nous recommandons les meilleures pratiques aux utilisateurs qui consistent à utiliser la navigation privée ou les écrans de verrouillage.

Se déconnecter avec une fenêtre contextuelle

Ce mode est pris en charge, mais a les mêmes limites de connexion qu’avec une fenêtre contextuelle, où les contraintes ou stratégies de navigateur peuvent désactiver les fenêtres contextuelles. 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, Microsoft Entra ID redirige la fenêtre contextuelle vers votre application et MSAL.js fermera la fenêtre contextuelle.

Vous pouvez configurer l'URI vers lequel Microsoft Entra ID doit rediriger après la déconnexion en définissant postLogoutRedirectUri. 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, une fois la déconnexion terminée en transmettant mainWindowRedirectUri dans le cadre de la requête.

JavaScript (MSAL.js v2)

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

JavaScript (MSAL.js v1)

La déconnexion à l’aide d’une fenêtre contextuelle n’est pas prise en charge dans MSAL.js v1

Angular (MSAL.js v2)

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: 'your_app_logout_redirect_uri'
            }
        }), null, null)
    ]
})

// In app.component.ts
logout() {
    this.authService.logoutPopup({
        mainWindowRedirectUri: "/"
    });
}

Angular (MSAL.js v1)

La déconnexion à l’aide d’une fenêtre contextuelle n’est pas prise en charge dans MSAL Angular v1

React

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signOutClickHandler(instance) {
  const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    mainWindowRedirectUri: "your_app_main_window_redirect_uri",
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  };
  instance.logoutPopup(logoutRequest);
}

// SignOutButton Component returns a button that invokes a popup logout when clicked
function SignOutButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return (
    <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
  );
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <SignOutButton />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
      </UnauthenticatedTemplate>
    </>
  );
}

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

MSAL.js fournit une méthode logout dans la version v1 et une nouvelle méthode logoutRedirect dans la version v2 qui efface le cache dans le stockage du navigateur et redirige la fenêtre vers la page de déconnexion de Microsoft Entra. Après la déconnexion, Microsoft Entra ID redirige par défaut vers la page qui a appelé la déconnexion.

Étant donné que l’utilisateur ne verra pas le rappel de Microsoft concernant les meilleures pratiques de confidentialité Internet sur l’utilisation d’un navigateur privé et d’un écran de verrouillage, l’application SPA peut également décrire les meilleures pratiques et rappeler aux utilisateurs de fermer toutes les fenêtres de navigateur.

Vous pouvez configurer l’URI de redirection après la déconnexion en définissant postLogoutRedirectUri. Cet URI doit être enregistré en tant qu’URI de redirection dans l’inscription de votre application.

JavaScript (MSAL.js v2)

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

JavaScript (MSAL.js v1)

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 UserAgentApplication(config);

myMsal.logout();

Angular (MSAL.js v2)

// In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: 'your_app_logout_redirect_uri'
            }
        }), null, null)
    ]
})

// In app.component.ts
logout() {
    this.authService.logoutRedirect();
}

Angular (MSAL.js v1)

//In app.module.ts
@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: 'your_app_id',
                postLogoutRedirectUri: "your_app_logout_redirect_uri"
            }
        })
    ]
})
// In app.component.ts
this.authService.logout();

React

import {
  useMsal,
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
} from "@azure/msal-react";

function signOutClickHandler(instance) {
  const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    postLogoutRedirectUri: "your_app_logout_redirect_uri",
  };
  instance.logoutRedirect(logoutRequest);
}

// SignOutButton Component returns a button that invokes a redirect logout when clicked
function SignOutButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
  const { instance } = useMsal();

  return (
    <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
  );
}

// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
  return (
    <>
      <AuthenticatedTemplate>
        <p>This will only render if a user is signed-in.</p>
        <SignOutButton />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <p>This will only render if a user is not signed-in.</p>
      </UnauthenticatedTemplate>
    </>
  );
}

Étapes suivantes

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