Vermeiden des erneuten Ladens von Seiten, wenn Sie Token mithilfe von MSAL.js automatisch abrufen und erneuern

Die Microsoft Authentication Library für JavaScript (MSAL.js) verwendet ausgeblendete iframe-Elemente, um Token automatisch im Hintergrund abzurufen und zu erneuern. Microsoft Entra ID gibt das Token wieder an den registrierten redirect_uri zurück, der in der Tokenanforderung angegeben ist (dies ist standardmäßig die Stammseite der App). Da es sich bei der Antwort um den Statuscode 302 handelt, wird folglich der HTML-Code, der dem redirect_uri entspricht, in iframe geladen. Normalerweise entspricht der App-redirect_uri der Stammseite, was dazu führt, dass sie erneut geladen wird.

In anderen Fällen, in denen das Navigieren zur Stammseite der App eine Authentifizierung erfordert, kann dies zu einer Schachtelung von iframe-Elementen oder zu einem X-Frame-Options: deny-Fehler führen.

Da MSAL.js den von Microsoft Entra ID ausgestellten 302 nicht ignorieren kann und für die Verarbeitung des zurückgegebenen Tokens erforderlich ist, kann es nicht verhindern, dass das redirect_uri in iframe geladen wird.

Um zu verhindern, dass die gesamte App erneut geladen wird oder andere Fehler auftreten, befolgen Sie bitte die folgenden Lösungsansätze.

Angeben eines anderen HTML-Codes für „iframe“

Legen Sie die Eigenschaft redirect_uri in der Konfiguration auf eine einfache Seite fest, die keine Authentifizierung erfordert. Sie müssen sicherstellen, dass sie mit dem in Microsoft Entra Admin Center registrierten redirect_uri übereinstimmt. Dies wirkt sich nicht auf die Anmeldeerfahrung des Benutzers aus, da MSAL die Startseite speichert, wenn der Benutzer mit dem Anmeldevorgang beginnt und zurück zum genauen Speicherort umleitet, nachdem die Anmeldung abgeschlossen wurde.

Initialisierung in der App-Hauptdatei

Wenn Ihre App so strukturiert ist, dass die App-Initialisierung, das Routing und andere Vorgänge in einer zentralen JavaScript-Datei definiert sind, können Sie die App-Module bedingt laden, je nachdem, ob die App in iframe geladen wird oder nicht. Beispiel:

In AngularJS: app.js

// Check that the window is an iframe and not popup
if (window !== window.parent && !window.opener) {
angular.module('todoApp', ['ui.router', 'MsalAngular'])
    .config(['$httpProvider', 'msalAuthenticationServiceProvider','$locationProvider', function ($httpProvider, msalProvider,$locationProvider) {
        msalProvider.init(
            // msal configuration
        );

        $locationProvider.html5Mode(false).hashPrefix('');
    }]);
}
else {
    angular.module('todoApp', ['ui.router', 'MsalAngular'])
        .config(['$stateProvider', '$httpProvider', 'msalAuthenticationServiceProvider', '$locationProvider', function ($stateProvider, $httpProvider, msalProvider, $locationProvider) {
            $stateProvider.state("Home", {
                url: '/Home',
                controller: "homeCtrl",
                templateUrl: "/App/Views/Home.html",
            }).state("TodoList", {
                url: '/TodoList',
                controller: "todoListCtrl",
                templateUrl: "/App/Views/TodoList.html",
                requireLogin: true
            })

            $locationProvider.html5Mode(false).hashPrefix('');

            msalProvider.init(
                // msal configuration
            );
        }]);
}

In Angular: app.module.ts

// Imports...
@NgModule({
  declarations: [
    AppComponent,
    MsalComponent,
    MainMenuComponent,
    AccountMenuComponent,
    OsNavComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    MsalModule.forRoot(environment.MsalConfig),
    SuiModule,
    PagesModule
  ],
  providers: [
    HttpServiceHelper,
    {provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true},
    AuthService
  ],
  entryComponents: [
    AppComponent,
    MsalComponent
  ]
})
export class AppModule {
  constructor() {
    console.log('APP Module Constructor!');
  }

  ngDoBootstrap(ref: ApplicationRef) {
    if (window !== window.parent && !window.opener)
    {
      console.log("Bootstrap: MSAL");
      ref.bootstrap(MsalComponent);
    }
    else
    {
    //this.router.resetConfig(RouterModule);
      console.log("Bootstrap: App");
      ref.bootstrap(AppComponent);
    }
  }
}

MsalComponent:

import { Component} from '@angular/core';
import { MsalService } from '@azure/msal-angular';

// This component is used only to avoid Angular reload
// when doing acquireTokenSilent()

@Component({
  selector: 'app-root',
  template: '',
})
export class MsalComponent {
  constructor(private Msal: MsalService) {
  }
}

Nächste Schritte

Erfahren Sie mehr, indem Sie eine Single-Page-Anwendung (React Single Page Application, SPA) erstellen, die Benutzer in der folgenden mehrteiligen Lernprogrammreihe anmeldet.