Menggunakan pengalihan di MSAL Angular

Saat menggunakan pengalihan dengan MSAL, wajib menangani pengalihan menggunakan MsalRedirectComponent atau handleRedirectObservable.

Perlu diperhatikan bahwa panduan khusus telah ditambahkan untuk menggunakan MSAL Angular dengan komponen standalone Angular di bawah ini.

  1. MsalRedirectComponent
  2. Berlangganan handleRedirectObservablesecara manual
  3. Pengalihan dengan komponen mandiri

1. MsalRedirectComponent: Komponen khusus handleRedirectObservable

Note

Pendekatan ini tidak kompatibel dengan komponen mandiri Angular. Lihat bagian tentang pengalihan dengan komponen mandiri di bawah ini untuk panduan lebih lanjut.

Ini adalah pendekatan kami yang direkomendasikan untuk menangani pengalihan:

  • @azure/msal-angular menyediakan komponen pengalihan khusus yang dapat diimpor ke aplikasi Anda. Kami menyarankan untuk mengimpor MsalRedirectComponent dan menginisialisasikannya bersama AppComponent di aplikasi Anda pada app.module.ts, karena ini akan menangani semua pengalihan tanpa komponen Anda harus berlangganan ke handleRedirectObservable() secara manual.
  • Halaman yang ingin menjalankan fungsi setelah pengalihan (misalnya, fungsi akun pengguna, perubahan UI, dan sebagainya) harus berlangganan ke observable inProgress$, dengan memfilter InteractionStatus.None. Ini akan memastikan bahwa tidak ada interaksi yang sedang berlangsung saat melakukan fungsi. Perhatikan bahwa item terakhir / terbaru InteractionStatus juga akan tersedia saat berlangganan pada inProgress$ observable. Silakan lihat dokumentasi kami tentang peristiwa untuk informasi selengkapnya tentang memeriksa interaksi.
  • Jika Anda tidak ingin menggunakan MsalRedirectComponent, Anda harus menangani pengalihan dengan handleRedirectObservable() sendiri, sebagaimana dijelaskan dalam pendekatan di bawah ini.
  • Lihat sampel modul Angular kami untuk contoh pendekatan ini.

msal.redirect.component.ts

// This component is part of @azure/msal-angular and can be imported and bootstrapped
import { Component, OnInit } from "@angular/core";
import { MsalService } from "./msal.service.ts";

@Component({
  selector: 'app-redirect', // Selector to be added to index.html
  template: ''
})
export class MsalRedirectComponent implements OnInit {
  
  constructor(private authService: MsalService) { }
  
  ngOnInit(): void {    
      this.authService.handleRedirectObservable().subscribe();
  }
  
}

index.html

<body>
  <app-root></app-root>
  <app-redirect></app-redirect> <!-- Selector for additional bootstrapped component -->
</body>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular'; // Redirect component imported from msal-angular

export function loggerCallback(logLevel: LogLevel, message: string) {
  console.log(message);
}

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: '00001111-aaaa-2222-bbbb-3333cccc4444',
      redirectUri: 'http://localhost:4200',
      postLogoutRedirectUri: 'http://localhost:4200'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }
  });
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return { interactionType: InteractionType.Redirect };
}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    HttpClientModule,
    MsalModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [AppComponent, MsalRedirectComponent] // Redirect component bootstrapped here
})
export class AppModule { }

app.component.ts

import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
import { MsalBroadcastService, InteractionStatus } from '@azure/msal-angular';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit, OnDestroy {
  private readonly _destroying$ = new Subject<void>();

  constructor(
    private msalBroadcastService: MsalBroadcastService
  ) {}

  ngOnInit(): void {
    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        // Do user account/UI functions here
      })
  }

2. Berlangganan ke handleRedirectObservable secara manual

Ini bukan pendekatan yang kami rekomendasikan, tetapi jika Anda tidak dapat melakukan bootstrap MsalRedirectComponent, Anda harus menangani pengalihan menggunakan handleRedirectObservable sebagai berikut:

  • handleRedirectObservable() harus dilanggankan pada setiap halaman yang mungkin menjadi tujuan pengalihan. Halaman yang dilindungi oleh MSAL Guard tidak perlu melakukan subscribe ke handleRedirectObservable(), karena pengalihan diproses oleh Guard.
  • Mengakses atau melakukan tindakan apa pun yang terkait dengan akun pengguna tidak boleh dilakukan sampai handleRedirectObservable() selesai, karena mungkin tidak sepenuhnya diisi sampai saat itu. Selain itu, jika API interaktif dipanggil saat handleRedirectObservables() sedang berlangsung, itu akan mengakibatkan kesalahan interaction_in_progress . Lihat dokumen kami tentang peristiwa untuk informasi selengkapnya tentang memeriksa interaksi, dan dokumen kami tentang kesalahan untuk detail tentang kesalahan tersebut interaction_in_progress .
  • Lihat sampel modul MSAL Angular kami untuk contoh pendekatan ini.

Contoh file home.component.ts:

import { Component, OnInit } from '@angular/core';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { AuthenticationResult } from '@azure/msal-browser';

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

  constructor(private authService: MsalService) { }

  ngOnInit(): void {
    this.authService.handleRedirectObservable().subscribe({
      next: (result: AuthenticationResult) => {
        // Perform actions related to user accounts here
      },
      error: (error) => console.log(error)
    });
  }

}

handleRedirectObservable Opsi

handleRedirectObservable menerima objek opsional HandleRedirectPromiseOptions dengan properti berikut:

Property Type Deskripsi
hash string Hash opsional untuk diproses alih-alih hash URL saat ini.
navigateToLoginRequestUrl boolean Apakah akan menavigasi ke URL permintaan asli setelah memproses pengalihan. Secara default menjadi true. Atur ke false jika Anda ingin menangani navigasi sendiri.

Contoh penggunaan:

// Basic usage - processes redirect and navigates to original URL
this.authService.handleRedirectObservable().subscribe();

// Disable automatic navigation after redirect
this.authService.handleRedirectObservable({ navigateToLoginRequestUrl: false }).subscribe({
  next: (result: AuthenticationResult) => {
    if (result) {
      // Handle navigation yourself
      this.router.navigate(['/home']);
    }
  }
});

// Process a specific hash
this.authService.handleRedirectObservable({ hash: '#code=...' }).subscribe();

Note

Meneruskan string hash secara langsung ke handleRedirectObservable(hash) sudah tidak didukung. Gunakan objek opsi sebagai gantinya: handleRedirectObservable({ hash: "#..." }).

3. Pengalihan dengan komponen mandiri

Karena banyak aplikasi Angular yang menggunakan komponen mandiri tidak dapat melakukan bootstrap MsalRedirectComponent, handleRedirectObservable harus berlangganan secara langsung. Rekomendasi kami adalah berlangganannya dalam app.component.ts file.

  • Tergantung pada arsitektur aplikasi Anda, Anda mungkin juga harus berlangganan handleRedirectObservable() di area lain.
  • Memeriksa interaksi yang sedang berlangsung masih berlaku, silakan lihat dokumen kami tentang peristiwa untuk informasi selengkapnya tentang memeriksa interaksi.
  • Lihat sampel mandiri Angular kami untuk contoh pendekatan ini.

Contoh file app.component.ts:

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

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

  constructor(
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
    private authService: MsalService,
    private msalBroadcastService: MsalBroadcastService
  ) {}

  ngOnInit(): void {
    this.authService.handleRedirectObservable().subscribe();
  }
}
  • Last updated on