Connexion et déconnexion d’une application monopage - Microsoft identity platform

Article
05/14/2024

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.

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

Pour appeler une expérience de connexion pour un itinéraire spécifique, importez @angular/router et ajoutez MsalGuard à la définition de route.

// 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 activer l’expérience d’une fenêtre contextuelle, définissez la configuration interactionType à InteractionType.Popup dans la section MsalGuardConfiguration. Vous pouvez également passer les étendues nécessitant un consentement.

// 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: "your_app_id",
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE,
        },
      }),
      {
        interactionType: InteractionType.Popup, // MsalGuard Configuration
        authRequest: {
          scopes: ["User.Read"],
        },
      },
      null
    ),
  ],
})
export class AppModule {}

Pour appeler une expérience de connexion lorsqu’un utilisateur n’est pas déjà connecté, utilisez la fonction MsalAuthenticationTemplate à partir de @azure/msal-react. Le wrapper MSAL React protège des composants spécifiques en les encapsulant dans le composant MsalAuthenticationTemplate.

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 not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

Pour appeler une expérience de connexion spécifique en fonction de l’interaction utilisateur (par exemple, le bouton Sélectionner), utilisez la fonction AuthenticatedTemplate et/ou UnauthenticatedTemplate à partir de @azure/msal-react.

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

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

// SignInButton Component returns a button that invokes a popup sign in 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>
    </>
  );
}

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

Pour activer une expérience de redirection, définissez la configuration de interactionType sur InteractionType.Redirect dans le MsalGuardConfiguration, puis démarrez MsalRedirectComponent 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 {}

Pour appeler une expérience de connexion lorsqu’un(e) utilisateur(-trice) n’est pas connecté(e), utilisez la fonction MsalAuthenticationTemplate à partir de @azure/msal-react.

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 not signed-in.</p>
      <WelcomeUser />
    </MsalAuthenticationTemplate>
  );
}

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

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

// 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: "/"
    });
}

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 pop-up sign out 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 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.

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

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

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.

Partager via

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

Comportement de déconnexion sur les navigateurs

Se déconnecter avec une fenêtre contextuelle

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

Étapes suivantes

Commentaires

Ressources supplémentaires

Partager via

Connexion et de déconnexion d’une application monopage

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

Se connecter avec une fenêtre indépendante

Se connecter avec une redirection

Comportement de déconnexion sur les navigateurs

Se déconnecter avec une fenêtre contextuelle

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

Étapes suivantes

Commentaires

Ressources supplémentaires