Guide pratique pour configurer @azure/msal-angular l’utilisation de la fonction de navigation de votre routeur pour la navigation côté client

Par défaut, lorsque MSAL.js doit naviguer d’une page dans votre application à une autre, il réaffecte window.location, ce qui entraîne une redirection de trame complète vers l’autre page et provoque le réexécriture de votre application. Si vous utilisez le routeur Angular, cela peut être indésurable, car le routeur active la navigation côté client et affiche ou masque uniquement les parties de la page si nécessaire.

Il existe actuellement un scénario dans lequel MSAL.js naviguera d’une page dans votre application vers une autre. Si votre application effectue toutes les opérations suivantes, poursuivez la lecture :

• Votre application utilise le flux de redirection, au lieu du flux contextuel, pour vous connecter
• PublicClientApplication est configuré avec auth.navigateToLoginRequestUrl: true (par défaut)
• Votre application comporte des pages susceptibles d'appeler loginRedirect/acquireTokenRedirect avec un redirectUri partagé. Par exemple, vous appelez loginRedirect depuis http://localhost/protected avec un redirectUri défini sur http://localhost.

Si votre application effectue toutes les opérations ci-dessus, vous pouvez redéfinir la méthode que MSAL utilise pour la navigation en important MsalCustomNavigationClient et en appelant setNavigationClient.

REMARQUE : En raison d’un correctif de sécurité, l’élément MsalCustomNavigationClient Angular n’utilise pas Angular Router pour naviguer côté client lorsqu’il navigateToLoginRequestUrl est défini sur true et gère les redirections. Il s’agit d’un problème connu qui sera résolu dans une version ultérieure.

Exemple d’implémentation

L’exemple ci-dessous montre comment implémenter cette opération lors de l’utilisation de Angular Router. Pour plus d’informations sur le routeur Angular, vous trouverez ici un exemple complet d’application qui implémente cette application pour Angular.

import { Component, OnInit, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration, MsalCustomNavigationClient } from '@azure/msal-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {

  constructor(
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
    private authService: MsalService,
    private msalBroadcastService: MsalBroadcastService,
    private router: Router,
    private location: Location
  ) {
    const customNavigationClient = new MsalCustomNavigationClient(this.authService, this.router, this.location);
    this.authService.instance.setNavigationClient(customNavigationClient);
  }

  ngOnInit(): void {
    // Additional code
  }
}