Hindari memuat ulang halaman saat memperoleh dan memperbarui token secara diam-diam menggunakan MSAL.js

Perpustakaan Autentikasi Microsoft untuk JavaScript (MSAL.js) menggunakan elemen tersembunyi iframe untuk memperoleh dan memperbarui token secara diam-diam di latar belakang. Microsoft Entra ID mengembalikan token kembali ke yang terdaftar redirect_uri yang ditentukan dalam permintaan token(secara default ini adalah halaman akar aplikasi). Karena responsnya adalah 302, HTML yang sesuai dengan redirect_uri menjadi dimuat di dalam iframe. Biasanya, redirect_uri aplikasi adalah halaman akar, dan hal ini menyebabkannya dimuat ulang.

Dalam kasus lain, jika menavigasi ke halaman root aplikasi memerlukan autentikasi, hal ini dapat menyebabkan elemen iframe bertingkat atau kesalahan X-Frame-Options: deny.

Karena MSAL.js tidak dapat mengabaikan respons 302 yang dikeluarkan oleh Microsoft Entra ID dan harus memproses token yang dikembalikan, MSAL.js tidak dapat mencegah agar redirect_uri dimuat di iframe.

Untuk menghindari seluruh aplikasi memuat ulang lagi atau kesalahan lain yang disebabkan karena ini, ikuti solusi ini.

Tentukan HTML yang berbeda untuk iframe

Atur redirect_uri properti pada konfigurasi ke halaman sederhana, yang tidak memerlukan autentikasi. Anda harus memastikan bahwa itu cocok dengan redirect_uri yang terdaftar di pusat admin Microsoft Entra. Ini tidak akan memengaruhi pengalaman masuk pengguna karena MSAL menyimpan halaman mulai ketika pengguna memulai proses masuk dan mengalihkan kembali ke lokasi yang tepat setelah masuk selesai.

Inisialisasi dalam file aplikasi utama Anda

Jika aplikasi Anda disusun sedemikian rupa sehingga ada satu file JavaScript pusat yang mendefinisikan inisialisasi, perutean, dan hal lainnya dalam aplikasi, Anda dapat memuat modul aplikasi secara bersyarat berdasarkan apakah aplikasi dimuat di dalam iframe atau tidak. Contohnya:

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

Dalam 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) {
  }
}

Langkah berikutnya

Pelajari selengkapnya tentang membangun aplikasi satu halaman (SPA) menggunakan MSAL.js.